iview Tree組件實現深度查詢

 

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 = final
14   } 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 += '<span class="select-label" data-id=' + '"' + intersectionNode[i].id + '"' + ' data-score1=' + '"' + intersectionNode[i].score1 + '"' + ' data-score2=' + '"' +
 26               intersectionNode[i].score2 + '"' + '  data-hasScore=' + '"' + intersectionNode[i].hasScore + '"' + ' data-labelstr=' +
 27               intersectionNode[i].labelstr + '>' + intersectionNode[i].label +
 28               '<span class="singleBtn" onclick="singleDel(this)"></span></span>';
 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)===-1
103         });
104         return final
105     },
106 };