Ext 树级联选中子节点,包含怎么实现半选中状态

var treePanel = new Ext.tree.TreePanel({

        border:true,
              autoScroll:true,
              animate:true,
              autoWidth:true,       
              enableDD:true,
              width:280,
              height:300,
              containerScroll: true,
              loader: new Ext.tree.TreeLoader({
                      dataUrl:'../contCondition.do?action=getMatTree'
              })

    });

    var root = new Ext.tree.AsyncTreeNode({

            text: '物料类别',                  //节点名称
                   checked:false,
                   draggable:false,                  //是否支持拖动
                   id:'0'                      //节点id
          });

   treePanel.setRootNode(root);

//判断是否有子结点被选中
         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监听

   treePanel.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);

           });    

    }, treePanel);



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

        var checkedNodes = treePanel.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(',');

    };

    方法二:最近在一个项目中用到了EXT中TREE,但是它本身不提供自己想要的功能,在一番搜索之后,找到了《 Ext.tree.TreeNodeUI 进行checkbox功能的扩展》这个文章,在看过以后,发现了几个问题

1、只有两种状态

2、当选中子节点的时候,它又把自己的父节点给循环了一边

于是自己就做了如下修改,这里只贴修改后的,如果有人想比较,可以找找那篇文章

  // private
        childCheck : function(node,checked)
       {
                 var a = node.attributes;
                if(!a.leaf)
               {
                    var cs = node.childNodes;
                    var csui;
                   for(var i = 0; i < cs.length; i++)
                   {
                         csui = cs[i].getUI();
                         csui.checkbox.checked=checked;
                         this.childCheck(cs[i],checked);
                 }
              }
        },

// private
parentCheck : function(node ,checked)
{
         var checkbox = node.getUI().checkbox;
         if(typeof checkbox == 'undefined')return ;
         var state=this.childHasChecked(node,checked);
 
        //if(!(checked ^ checkbox.checked))return; 
         //if(!checked && childhaschecked) return;
         if (state==0)//全否
         {
                 checkbox.checked=false;
                 checkbox.indeterminate=false;
         }
       else   if (state==1) //半选中
        {
                 checkbox.checked=true;
                 checkbox.indeterminate=true;
         }
       else
         {
                 checkbox.checked=true;
                 checkbox.indeterminate=false;
         }
        // checkbox.checked = checked; 
         node.attributes.checked = checkbox.checked;
         node.getOwnerTree().fireEvent('check', node, checked);
 
         var parentNode = node.parentNode;
         if( parentNode !== null)
        {
                 this.parentCheck(parentNode,checked);
         }
    },

   // 检查是否存在被勾选的 并且状态不为灰化的
childHasChecked : function(node,checked)
{
         var childNodes = node.childNodes;
          var retValue=0;
          if(childNodes || childNodes.length>0)
        {
                 for(var i=0;i<childNodes.length;i++)
                {
                    var checkbox=childNodes[i].getUI().checkbox;
            // 本身是全选中状态  即 checked=true,  indeterminate=false  , 并且此次进来取消选中状态(参数checked=false) 则只需要找出子节点是否存在被选中如果存在某个子节点为半选中状态,则为半选中,否则不选中
                    if(!checked) 
                   {
                             if (checkbox.checked )  //存在选中 则直接退出
                             {
                                      return 1;//半选中状态
                             }
                  }
                  else
                {
                            retValue=2;
                             if (!checkbox.checked || (checkbox.checked && checkbox.indeterminate))
                             {
                                       return 1;
                             }
                 }
    
           }
  }
  return retValue;
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IMK7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值