Extjs TreePanel 完美实现

最新推荐文章于 2018-12-26 14:48:42 发布

原创最新推荐文章于 2018-12-26 14:48:42 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function

Ext 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在树形控件中实现选择状态同步的方法，包括如何在选中或取消选中某个节点时更新其所有子节点及父节点的状态。通过递归和其他遍历技巧确保了树状结构中选择状态的一致性。

treepanel.on('change',function(node,checked){

treecheck(node,checked);//调用下列方法

});

////树形控件的选择
var treecheck=function(node,checked){
     node.expand();
     if(node.hasChildNodes()){
       ChildWithParent(node,checked);
     }
     //如果是选中状态,则选中所有父节点
     if(checked){
      ParentWithChild1(node,checked);
     }
     //如果不选中
     else{
        ParentWithChild2(node,checked);
     }
}
//选择结点，影响所有子节点
var ChildWithParent=function(node,bool){
  if(node){
   node.attributes.checked = bool;
   if(node.hasChildNodes()){
    node.eachChild(function(child){
     child.ui.toggleCheck(bool);
     child.attributes.checked = bool;
     ChildWithParent(child,bool);
    });
   }
  }
}
//如果是选中状态，则选中父节点---递归
var ParentWithChild1=function(node,bool){
  if(node.parentNode.getUI().checkbox){
   var parent=node.parentNode;
   parent.attributes.checked=bool;
   parent.getUI().checkbox.checked=bool;
   ParentWithChild1(parent,bool);
  }
}
//如果是不选中状态，则遍历父节点，如果该父节点下的所有节点都为不选中，则取消选中
var ParentWithChild2=function(node,bool){
  if(node.parentNode.getUI().checkbox){
   var parent=node.parentNode;
   var temp=false;
   parent.eachChild(function(child){
    if(child.getUI().checkbox.checked==true){
     temp=true;
     return false;
    }
   });
   if(!temp){
    parent.attributes.checked=bool;
    parent.getUI().checkbox.checked=bool;
    temp=false;
    ParentWithChild2(parent,bool);
   }
  }
}