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