1. 程式人生 > >ext3.0 樹控制元件處理

ext3.0 樹控制元件處理

前幾個月,一直在學習ext,並用它做了個專案,其中涉及到大量的樹列表的建立,動態修改。現在不忙了,總結出來:

//建立節點

root為樹的根節點,node當前要加入的節點,nodeArray所有的樹節點(可以不包括根節點) checked表示樹節點是否加入check框,帶check框的節點都加入了選中子節點,父節點連同當前節點的子節點一起選中的事件。


        function addNode(root,node,nodeArray,checked){
         //alert(node.ID);
         if(findNode(root,node.ID)!=null){
          return;
         }
         var parent = findNode(root,node.PARENT);
         if(parent==null){
          for(var j=0;j<nodeArray.length;j++){
           if(nodeArray[j].ID==node.PARENT){
            addNode(root,nodeArray[j],nodeArray,checked);
           }
          }
         }
         parent = findNode(root,node.PARENT);
         if(checked){
          if(node.CHECKED=='true'){
           node.CHECKED=true;
          }
          if(node.CHECKED=='false'){
           node.CHECKED=false;
          }
          var newNode=createCheckedNode(node);
      }else{
       var newNode=new Ext.tree.TreeNode({
          text : node.TEXT,
          id : node.ID ,
          leaf:false,
          draggable: false,
          expanded : true//預設展開根節點
        });
      }
      parent.appendChild(newNode);
        }
        //建立帶checked屬性的節點
        function createCheckedNode(node){
         var newNode=new Ext.tree.TreeNode({
          text : node.TEXT,
          id : node.ID ,
          leaf:false,
          draggable: false,
          checked:node.CHECKED,
          expanded : true,//預設展開根節點
          listeners:{
           'checkchange': function(){
            checkChange(newNode);
           }
          }
        });
        return newNode;
        }
        //節點改變觸發的狀態
        function checkChange(newNode){
         var checked=newNode.attributes.checked;
      //alert("ssssss");
      changeParentNode(newNode);
      var childs = newNode.childNodes;
      //alert(childs.length);
      for(var i=0;i<childs.length;i++){
       //alert(childs[i].attributes.checked);
       if(childs[i].attributes.checked!=checked){
          childs[i].ui.toggleCheck();
        }
      }
        }
        //同步父節點
        function changeParentNode(newNode){
         var parent=newNode.parentNode;
         if(parent==null){
          return;
         }
         var allChilds=parent.childNodes;
         //alert(allChilds.length);
         var checked=parent.attributes.checked;
         var childChecked=false;
         for(var i=0;i<allChilds.length;i++){
          if(allChilds[i].attributes.checked){
           childChecked=true;
           if(!checked){
            changeChecked(parent);
            changeParentNode(parent);
           }
           return;
          }
         }
         if(checked){
          changeChecked(parent);
          changeParentNode(parent);
          return;
         }
        }
        //改變父節點的選中狀態
        function changeChecked(node){
         node.suspendEvents();
         node.ui.toggleCheck();
         node.resumeEvents();
        }

 

查詢任意層次的節點,只要你的nodeId足夠深。
        //查詢節點     
        function findNode(parent,nodeId){
         if(parent.id==nodeId){
          return parent;
         }
         var node=parent.findChild('id',nodeId);
         if(node!=null){
          return node;
         }else{
          var childs=parent.childNodes;
          for(var i=0;i<childs.length;i++){
           if(childs[i].hasChildNodes()){
            node = findNode(childs[i],nodeId);
            if(node!=null){
             return node;
            }
           }
          }
          return null;
         }
        }

查詢當前根節點的所有節點。
        //查詢所有的節點,有子節點則不加人返回陣列,沒有則加入返回陣列
     
        var array=[];
        function findAllNode(root,arr){
         if(arr==null){
          array=[];
         }
         array.push(root);
         if(!root.hasChildNodes()){
          return array;
         }
         var childs=root.childNodes;
         for(var i=0;i<childs.length;i++){
           findAllNode(childs[i],array);
         }
         return array;
        }