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

猜你喜欢

转载自blog.csdn.net/sjc106112/article/details/5623577
ext