【非常实用】EXTJS TREE 上下级级联选择扩展方法

最新推荐文章于 2020-08-10 17:12:56 发布

漂泊那几年

最新推荐文章于 2020-08-10 17:12:56 发布

阅读量1.7k

点赞数

分类专栏： WEB前端文章标签： extjs tree function null 扩展

WEB前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种实现复选框树控件联动的方法，包括父节点与子节点之间的状态同步。通过自定义函数实现了当父节点被选中时，其所有子节点也会被自动选中；反之亦然。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当父节点的复选框被选中时，其子节点要自动级联全被选中，当父节点的一个子节点被选中时，其对应的父节点也要被级联选中

//判断是否有子结点被选中
    var childHasChecked = function(node) {
         var childNodes = node.childNodes;
         if(childNodes || childNodes.length>0){
            for(var i=0;i<childNodes.length;i++){
                if(childNodes[i].getUI().checkbox.checked)
                    return true;
                }
         }
        return false;
    };

//级联选中父节点
   var parentCheck = function(node ,checked){
   var checkbox = node.getUI().checkbox;

   if(typeof checkbox == 'undefined')

       return false;

   if(!(checked ^ checkbox.checked))

       return false;

   if(!checked && childHasChecked(node))

       return false;

   checkbox.checked = checked;
          node.attributes.checked = checked;
          node.getUI().checkbox.indeterminate = checked; //半选中状态

   node.getOwnerTree().fireEvent('check', node, checked);

   var parentNode = node.parentNode;

   if( parentNode !== null){

       parentCheck(parentNode,checked);

   }

};

//增加checkchange监听

tree.on('checkchange', function(node, checked) {

       var parentNode = node.parentNode;

       if(parentNode !== null) {
                   parentCheck(parentNode,checked);
              }

      node.expand();

      node.attributes.checked = checked;

      node.eachChild(function(child)
            {

             child.ui.toggleCheck(checked);
                    child.attributes.checked = checked;
                    child.fireEvent('checkchange', child, checked);

      });

}, tree);

//获取新增复选框树的值
    function onItemClick(){

   var checkedNodes = tree.getChecked();//tree必须事先创建好.这里要标识识获取那个treepanel的 id

   var checkedIds = [];

   for(var i=0;i<checkedNodes.length;i++)
          {

            if( checkedNodes[i].hasChildNodes())
                    {
                           //这里只是获取节点为子节点的id ，如果不需要可以删除。
                    }
                     else
                     {
                           checkedIds.push(checkedNodes[i].id);
                      }

   }
                   return checkedIds.join(',');

};