博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iview Tree组件实现深度查询
阅读量:6693 次
发布时间:2019-06-25

本文共 5761 字,大约阅读时间需要 19 分钟。

 

iview组件库中的的Tree组件实现深度查询:

  1.精确匹配第一个符合条件的节点,并返回整条数据链

  2.展开当前节点

1 efficientSearch: function () { 2   var self = this; 3   console.log(self.$refs.tree) 4   if (!self.efficientSearchData) { 5     return 6   } 7   if (!self.searchWord) { 8     self.getTag() 9   }10   var final = self.variableDeepSearch(self.efficientSearchData, [], self.searchWord); // 返回符合条件的对象11   if (final) {12     self.treeData = []13     self.treeData = final14   } else {15     self.treeData = []16   }17 18 19 },20 variableDeepSearch: function(treeDataFilter, childTemp, searchWord) {21   var that = this;22   for (let i = 0; i < treeDataFilter.length; i++) {23     let item = treeDataFilter[i]24     if (item.title == searchWord) {25       if (childTemp.length == 0) {26         item.expand = true;27         childTemp.push(item);28       }29       return childTemp;30     }31     if (item.children && item.children.length > 0) {32       item.expand = true;33       childTemp.push(item);34       let rs = that.variableDeepSearch(item.children, childTemp, searchWord);35       if (rs) {36         return rs;37       } else {38         let index = childTemp.indexOf(item);39         if (index > -1) {40           childTemp.splice(index, 1);41         }42       }43     }44   }45 }

 2.实现勾选节点全局去重

全局去重:1.获得已勾选的标签数组 getCheckedNodes,以直线的属性结构展示2.判断 checkedAllNode 中是否有标签    a,若有,首先对 已勾选数组 getCheckedNodes 进行拼接过滤得到 boolStrList ,再将所有标签数组和已勾选数组进行计算,得到已勾选数组中的交集 intersectionNode ,将 intersectionNode 交集 push 到 checkedAllNode ,                b,若没有,对已勾选的数组进行拼接过滤得到 boolStrList ,再把 boolStrList 赋值给 checkedAllNode ,        当前勾选的数组 getCheckedNodes    当前勾选格式化的数组 boolStrList    所有选中的数组 checkedAllNode    当前勾选的交集 intersectionNode    3.循环 intersectionNode ,将拼接好的DOM结构追加到最后一个容器删除单个1.获取当前标签节点的 labelstr ,使用 filter 对所有标签数组进行过滤,找到相同的 labelstr 对象删除掉2.remove 当前标签节点的DOM删除多个1.循环当前容器所有标签,得到 labelstr 数组 ,使用 filter 对所有标签数组进行过滤,找到相同的 labelstr 对象删除掉2.remove 当前容器DOM问题1.可能存在父节点下面的子节点标签    循环 checkedAllNode ,若存在 children

 

1  add:function(){  2         var that = this;  3         let boolStrList = []; //拼接过滤  4         let intersectionNode = [];  // 当前勾选的交集   5         let finalArray = [];  6         let str = '';  7         let getCheckedNodes = that.$refs.tree.getCheckedNodes();  8         if (getCheckedNodes.length < 1) {  9           return; 10         } 11          12         boolStrList = that.addBoolStrList(getCheckedNodes); 13         if(checkedAllNode.length > 0){ 14           intersectionNode = filterArray.intersection(checkedAllNode,boolStrList); 15           finalArray = checkedAllNode.concat(intersectionNode); 16           checkedAllNode = finalArray; 17           console.log(checkedAllNode); 18         }else{ 19           checkedAllNode = intersectionNode = boolStrList; 20         } 21         for (let i = 0; i < intersectionNode.length; i++) { 22           if (intersectionNode[i].label.length < 2) { // 如果标签名称的字符长度小于2,则把父级的标签名称拼接上,labelstr有所有的父级 23             intersectionNode[i].label = intersectionNode[i].labelstr.split('_').slice(-2).join('_'); 24           } 25           str += '' + intersectionNode[i].label + 28               ''; 29         } 30         $("#type-content div").last().append(str); 31         that.cancelChecked(); 32       }, 33  addBoolStrList: function(data) { 34         let boolList = []; 35         for (let i = 0; i < data.length; i++) { 36           if (!data[i].disableCheckbox) { 37             boolList.push({ 38               labelstr: data[i].labelstr, 39               hasScore: data[i].hasScore, 40               id:data[i].id, 41               label: data[i].title, 42               score1: data[i].score1, 43               score2: data[i].score2 44             }); 45             i += this.skipStep(data[i]); 46           } 47         } 48         return boolList; 49       }, 50       skipStep: function(data) { 51         let step = 0; 52         let node = data.children; 53         let l = node && node.length; 54         let count = 0; 55         step += l; 56         while (node && count < node.length) { 57           step += this.skipStep(node[count++]); 58         } 59         return step; 60       }, 61  arrFunc: function(arr1, arr2) { 62         for (let i = 0; i < arr1.length; i++) { 63           for (let j = 0; j < arr2.length; j++) { 64             //判断添加的数组是否为空了 65             if (arr1.length > 0) { 66               if (arr1[i]["labelstr"] == arr2[j]["labelstr"]) { 67                 arr1.splice(i, 1); //利用splice函数删除元素,从第i个位置,截取长度为1的元素 68               } 69             } 70           } 71         } 72         for (let n = 0; n < arr2.length; n++) { 73           arr1.push(arr2[n]); 74         } 75         return arr1 76       }, 77 var filterArray = { 78     removeDuplicate: function (arr1, arr2) { 79         var json = arr1.concat(arr2); //两个数组对象合并 80         var newJson = []; //盛放去重后数据的新数组 81         for(item1 of json){  //循环json数组对象的内容 82             var flag = true;  //建立标记,判断数据是否重复,true为不重复 83             for(item2 of newJson){  //循环新数组的内容 84                 if(item1.id==item2.id){ //让json数组对象的内容与新数组的内容作比较,相同的话,改变标记为false 85                     flag = false; 86                 } 87             } 88             if(flag){ //判断是否重复 89                 newJson.push(item1); //不重复的放入新数组。  新数组的内容会继续进行上边的循环。 90             } 91         } 92         return newJson; 93     }, 94     intersection: function(arr1, arr2) { 95         //求交集 96         var arr1Id = []; 97         arr1.forEach(function(item){ 98             arr1Id.push(item.labelstr) 99         });100         let arr3 = arr1.concat(arr2);101         let final = arr3.filter(function(v){102             return arr1Id.indexOf(v.labelstr)===-1103         });104         return final105     },106 };

 

转载于:https://www.cnblogs.com/ihuangqing/p/10839870.html

你可能感兴趣的文章
想要百度信息流效果更好你应该这样投放
查看>>
Oracle教程之Oralce OMF功能详解(三)--使用Oralce OMF管理控制文件
查看>>
C# extern 修饰符的用法
查看>>
Zabbix修正错误两例(只提供解决思路)
查看>>
Redhat6.X 配置HP3PAR7200存储多路径过程
查看>>
Java基础系列19:使用JXL或者POI生成和解析Excel文件
查看>>
使用xshell打开centos中文显示为乱码
查看>>
达内实习——数据库编程、文件读写数据
查看>>
zabbix 监控percona
查看>>
我的友情链接
查看>>
HA高可用集群基础概念和原理
查看>>
MySQL over函数的用法
查看>>
Linux命令(9):mkdir命令
查看>>
vmstat命令
查看>>
poj2245 Lotto
查看>>
我的友情链接
查看>>
Oracle版本升级
查看>>
sizeof 的使用(标记一下)
查看>>
第 四 十 天:关 于 正 则 的 一 些 小 用 法
查看>>
编程 -- awk
查看>>