miniUI tree 過濾（filter）的問題

原創

小土為尘

2020-02-20 20:54

通過關鍵字搜索節點並顯示結果集，miniUI tree 提供了過濾的方法：

但這個過濾實質是隱藏掉其他節點，對這些隱藏節點的操作都有效。這樣在樹設置爲聯動的時候，就會有問題，具體操作：過濾後，勾選“客戶”，下級節點聯動勾選，去掉“財政部”勾選狀態，就是下邊這種結果：

需求要求是過濾後，只能勾選過濾後的節點，確實需求這樣是比較合理的。當時想就是要遍歷樹把隱藏的節點刪除掉，做到真正的“過濾”。恩...idea 有了，那就開始吧（過程太焦躁，就不贅述了，用它來代替......）

1. 先說一下做的過程中的困難吧：

miniUI tree 甚至沒有一個判斷節點是否爲過濾的標識或方法（ps：miniUI tree 節點過濾與否的區別就是“看得到”與“看不到”的區別，這個區別不是之一，是唯一）；
刪除節點的時候需要從葉子節點向上刪除，否則 miniui.js 會報錯；miniUI tree 提供的遍歷方法 cascadeChild 、filter 都是廣度優先，而且我們的樹都是多叉樹，自己寫深度優先遍歷有難度。
miniUI tree 也沒有提供直接獲取所有葉子節點的方法，所以循環取葉子節點刪除也不好實現。

2. 最終的解決想法和代碼：
在 miniUI tree 的結構上刪除會報錯，那麼可以轉化爲對樹的節點數據集做操作，遍歷一次數組刪除那些過濾掉的節點數據，重新調用 loadList()。到這裏，現在還是缺一個判斷是否爲過濾節點的標識，這個可以在 filter 或 cascadeChild 方法中自己添加。最終，包括 filter 方法，整體遍歷兩次，代碼和效果如下：

tree.filter(function(node){
       if(node.text.indexOf(currentTexbox.getValue().trim())!= -1) {
                 // 設置 isFilter (是否爲過濾節點的標誌)
                 var ancestors =currentTree.getAncestors(node);
                 for(var i = 0; i < ancestors.length;i++) {
                        ancestors["isFilter"] =false;
                 }
                   node["isFilter"] = false;
                   // 展開節點的路徑
                 currentTree.expandPath(node);
                 return true;
                }else {
                 if(node["isFilter"] != false) {
                        node["isFilter"] = true;
               }
         }
});
/** 刪除節點*/
function deleteNode(currentTree) {
      vartreeDataArr = mini.clone(currentTree.getList());
      for(vari = 0; i < treeDataArr.length; i++) {
             if(true== treeDataArr["isFilter"]) {
                    treeDataArr.splice(i,1);
                    i--;
             }
      }
      currentTree.loadList(treeDataArr);   // 重新 load
}

結果是：