H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】树的搜索(用的树是:iview的Tree)

一、需求:输入节点名称,选中该节点并展开它的父节点。
二、核心:使节点的selected为true,它的父节点的expand为true。
三、template:

           <Col span="24">
             <Input
                prefix="ios-search"
                v-model="searchName"
                clearable
                placeholder="请输入名称"
                @on-enter="searchTree"
              />
            </Col>
            <Col span="24">
              <Tree
                :data="treeData"
              ></Tree>
            </Col>

四、定义:

treeRawData:[ //后端输出的数据格式
{title:'地球',id:'1',parentId:'0'},
{title:'中国',id:'2',parentId:'1'},
{title:'上海',id:'3',parentId:'2'},
{title:'徐汇',id:'4',parentId:'3'},
{title:'美国',id:'5',parentId:'1'},
{title:'纽约',id:'6',parentId:'5'},
],
treeData:[ //前端处理后的数据格式
                    {
                        title: '地球',
                        id: '1',
                        children: [
                            {
                                title: '中国',
                                id: '2',
                                children: [
                                    {
                                        title: '上海',
                                        id: '3',
                                        children: [
                                            {
                                                title: '徐汇',
                                                id: '4'
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                title: '美国',
                                id: '5',
                                children: [
                                    {
                                        title: '纽约',
                                        id: '6'
                                    }
                                ]
                            }
                        ]
                    }
                ],
searchName:'', //输入框绑定的数据
currentId:'' //节点id

五、方法:

searchTree(){
   for (var i = 0; i < this.treeRawData.length; i++) {
     if (this.treeRawData[i].title.indexOf(this.searchName) !== -1){
       this.currentId = this.treeRawData[i].id
       this.treeData=this.fineCurrentIdRecursive(this.treeData)
       break
     }
},
fineCurrentIdRecursive (list) { //通过节点id选中树中节点并展开它的父节点-递归方式
   for (var i = 0; i < list.length; i++) {
         if (list[i].id === this.currentId) {
              list[i].selected = true;//如果节点id等于currentId,则选中该节点
               break;
          } else {
              list[i].children=this.fineCurrentIdRecursive(list[i].children);//找不到想要的节点则继续找孩子的(递归)
              for (var j = 0; j < list[i].children.length; j++) { 
                 if (list[i].children[j].selected || list[i].children[j].expand) {
                         list[i].expand = true;//如果子节点(末端节点)选中或者子节点(非末端节点)展开,则展开该子节点的父节点
                 }
               }
          }
    }
    return list;
 }

六、这一套下来后,treeData成为了想要的数据(徐汇节点的selected为true,它的父节点的expand为true,可以在控制台输出看看)。如果发现视图不变,并且试了各种强制视图更新的方法,如this.$forceUpdate()等,还是没有更新,则要在这句

this.treeData=this.fineCurrentIdRecursive(this.treeData)

前面,再调一次接口获取treeRawData,然后转化为treeData(重新渲染树)。

本文地址:H5W3 » 【前端技术】树的搜索(用的树是:iview的Tree)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址