miniUI tree 过滤(filter)的问题

    通过关键字搜索节点并显示结果集,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
}
结果是:
     

你可能感兴趣的:(learn)