iview Tree組件實現深度查詢

 

iview組件庫中的的Tree組件實現深度查詢：

　　1.精確匹配第一個符合條件的節點，並返回整條數據鏈

　　2.展開當前節點

efficientSearch: function () {
  var self = this;
  console.log(self.$refs.tree)
  if (!self.efficientSearchData) {
    return
  }
  if (!self.searchWord) {
    self.getTag()
  }
  var final = self.variableDeepSearch(self.efficientSearchData, [], self.searchWord); // 返回符合條件的對象
  if (final) {
    self.treeData = []
    self.treeData = final
  } else {
    self.treeData = []
  }


},
variableDeepSearch: function(treeDataFilter, childTemp, searchWord) {
  var that = this;
  for (let i = 0; i < treeDataFilter.length; i++) {
    let item = treeDataFilter[i]
    if (item.title == searchWord) {
      if (childTemp.length == 0) {
        item.expand = true;
        childTemp.push(item);
      }
      return childTemp;
    }
    if (item.children && item.children.length > 0) {
      item.expand = true;
      childTemp.push(item);
      let rs = that.variableDeepSearch(item.children, childTemp, searchWord);
      if (rs) {
        return rs;
      } else {
        let index = childTemp.indexOf(item);
        if (index > -1) {
          childTemp.splice(index, 1);
        }
      }
    }
  }
}

 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 

 

 add:function(){
        var that = this;
        let boolStrList = []; //拼接過濾
        let intersectionNode = [];  // 當前勾選的交集 
        let finalArray = [];
        let str = '';
        let getCheckedNodes = that.$refs.tree.getCheckedNodes();
        if (getCheckedNodes.length < 1) {
          return;
        }
        
        boolStrList = that.addBoolStrList(getCheckedNodes);
        if(checkedAllNode.length > 0){
          intersectionNode = filterArray.intersection(checkedAllNode,boolStrList);
          finalArray = checkedAllNode.concat(intersectionNode);
          checkedAllNode = finalArray;
          console.log(checkedAllNode);
        }else{
          checkedAllNode = intersectionNode = boolStrList;
        }
        for (let i = 0; i < intersectionNode.length; i++) {
          if (intersectionNode[i].label.length < 2) { // 如果標簽名稱的字符長度小於2，則把父級的標簽名稱拼接上,labelstr有所有的父級
            intersectionNode[i].label = intersectionNode[i].labelstr.split('_').slice(-2).join('_');
          }
          str += '<span class="select-label" data-id=' + '"' + intersectionNode[i].id + '"' + ' data-score1=' + '"' + intersectionNode[i].score1 + '"' + ' data-score2=' + '"' +
              intersectionNode[i].score2 + '"' + '  data-hasScore=' + '"' + intersectionNode[i].hasScore + '"' + ' data-labelstr=' +
              intersectionNode[i].labelstr + '>' + intersectionNode[i].label +
              '<span class="singleBtn" onclick="singleDel(this)"></span></span>';
        }
        $("#type-content div").last().append(str);
        that.cancelChecked();
      },
 addBoolStrList: function(data) {
        let boolList = [];
        for (let i = 0; i < data.length; i++) {
          if (!data[i].disableCheckbox) {
            boolList.push({
              labelstr: data[i].labelstr,
              hasScore: data[i].hasScore,
              id:data[i].id,
              label: data[i].title,
              score1: data[i].score1,
              score2: data[i].score2
            });
            i += this.skipStep(data[i]);
          }
        }
        return boolList;
      },
      skipStep: function(data) {
        let step = 0;
        let node = data.children;
        let l = node && node.length;
        let count = 0;
        step += l;
        while (node && count < node.length) {
          step += this.skipStep(node[count++]);
        }
        return step;
      },
 arrFunc: function(arr1, arr2) {
        for (let i = 0; i < arr1.length; i++) {
          for (let j = 0; j < arr2.length; j++) {
            //判斷添加的數組是否為空了
            if (arr1.length > 0) {
              if (arr1[i]["labelstr"] == arr2[j]["labelstr"]) {
                arr1.splice(i, 1); //利用splice函數刪除元素，從第i個位置，截取長度為1的元素
              }
            }
          }
        }
        for (let n = 0; n < arr2.length; n++) {
          arr1.push(arr2[n]);
        }
        return arr1
      },
var filterArray = {
    removeDuplicate: function (arr1, arr2) {
        var json = arr1.concat(arr2); //兩個數組對象合並
        var newJson = []; //盛放去重后數據的新數組
        for(item1 of json){  //循環json數組對象的內容
            var flag = true;  //建立標記，判斷數據是否重復，true為不重復
            for(item2 of newJson){  //循環新數組的內容
                if(item1.id==item2.id){ //讓json數組對象的內容與新數組的內容作比較，相同的話，改變標記為false
                    flag = false;
                }
            }
            if(flag){ //判斷是否重復
                newJson.push(item1); //不重復的放入新數組。  新數組的內容會繼續進行上邊的循環。
            }
        }
        return newJson;
    },
    intersection: function(arr1, arr2) {
        //求交集
        var arr1Id = [];
        arr1.forEach(function(item){
            arr1Id.push(item.labelstr)
        });
        let arr3 = arr1.concat(arr2);
        let final = arr3.filter(function(v){
            return arr1Id.indexOf(v.labelstr)===-1
        });
        return final
    },
};