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; 
},