Extjs 完整树 但是有个bug 也许节点很多会出bug 有待调试

js 文件


/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [e-mail]
* http://www.extjs.com/license
*/

Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
        title: 'My Task List',
        height: 450,
        width: 600,
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        rootVisible: false,
        frame: true,
        root: {
            nodeType: 'async'
        },
       
        dataUrl: 'check-nodes.json',
       
        buttons: [{
            text: 'Get Completed Tasks',
            handler: function(){
                var msg = '', selNodes = tree.getChecked(); // getNode  select return array
                Ext.each(selNodes, function(node){
                    if(msg.length > 0){
                        msg += ', ';
                    }
                    msg += node.text;
                });
                Ext.Msg.show({
                    title: 'Completed Tasks',
                    msg: msg.length > 0 ? msg : 'None',
                    icon: Ext.Msg.INFO,
                    minWidth: 200,
                    buttons: Ext.Msg.OK
                });
            }
        }]
    });
   
    /*  
     * tree.suspendEvents()  方法说明：暂停触发所有的事件
     *  tree.resumeEvents()   方法说明：重新触发事件
     */
   
   
    tree.on('checkchange', function(node, checked) {
node.expand();  // 展开树
    var no = 0;
       // **************当被单击的节点是叶子节点时*******************
       if(node.isLeaf()){
      
       /*
       * 子节点全部选中 ， 父节点被选中
       */
       // 选中子节点中的一个选项
       if(node.getUI().isChecked()){
       // 父节点在没被选中的情况下
       if(!node.parentNode.getUI().isChecked()){
       // 遍历子节点的选项
       var num = node.parentNode.childNodes.length;
       //alert('num = '+num);
       node.parentNode.eachChild(function(child){
       // 子节点中有一项未被选中，停止 跳出循环
       if(child.getUI().isChecked()){
       no++;
       }
       });
      
       if(no==num){
       //alert("ok 选中父节点");
       node.parentNode.ui.toggleCheck(true);      
           node.parentNode.attributes.checked = true;
       }
       // 父节点选中情况下不做处理
       }else{
       return;
       }
       }
      
       /*
       * 子节点中有一个未被选中 ， 父节点将不被选中
       */
      
       if(!node.getUI().isChecked()){
       //no--;
       if(node.parentNode.text != undefined){
       node.parentNode.ui.toggleCheck(false);      
           node.parentNode.attributes.checked = false;
       }
       }
       }
      
       //  **************当被单击的节点不是叶子节点时*******************
       var i = 0;
       var j = 0;
       // 叶子父节点选中
        if(!node.isLeaf()){
        // 累加
        // 遍历子节点的选项
       var num = node.parentNode.childNodes.length;
       node.parentNode.eachChild(function(child){
       if(child.getUI().isChecked()){
       no++;
   }
   });
if(no==num){
node.parentNode.ui.toggleCheck(true);      
    node.parentNode.attributes.checked = true;
}
       
        // ***************  全选  ****************
        if(node.getUI().isChecked()){
        tree.suspendEvents();  //暂停触发所有事件
checkAll(node,0,0);
        tree.resumeEvents(); //重新出发所有事件
        }
       
       
        // ****************  去选（父节点选项去选）  *******************
        // 叶子父节点的去选情况
       
        if(!node.getUI().isChecked()){
       
        node.eachChild(function(child){
        i++;
        if(child.getUI().isChecked()){
        j++;
        }
        });
        // 表面点击了全部去选
        if(i==j){
        outOfcheck(node,0,0);      // 调用全消的方法
        }
       
        // 判断该节点上面是否还有父节点
        // 1. 有的话 去掉父节点的选项
        if(node.parentNode.text!=undefined){
        //alert('他有父节点');
        if(node.parentNode.getUI().isChecked()){
       
        node.parentNode.ui.toggleCheck(false);      
           node.parentNode.attributes.checked = false;
           return;
           }
        // 2. 没有的话 // 不做处理
        }else{
        //alert('他没有父节点');
        }
        }
       
       
        // 全选的方法
        function checkAll(node,i,j){
     var z = [];
    // 全部选中  Begin
    this.node = node;
node.eachChild(function(child){
j++;
if(!child.getUI().isChecked()){
i++;
if(child.hasChildNodes()){
z.push(child);
}
}
});
if(j>=i){
tree.suspendEvents(); //暂停触发所有事件
node.eachChild(function(child){
if(!child.getUI().isChecked()){
child.ui.toggleCheck(true);
child.attributes.checked = true;
}
});
tree.resumeEvents(); //重新触发所有事件
}
if(z.length>0){
for(var s=0;s<z.length;s++){
checkAll(z[s],0,0);
}
}
// 全部选中  End
    }
   
    // 全部去选的方法
   
    function outOfcheck(node,i,j){
   var z = [];
    // 全部去选  Begin
    this.node = node;
node.eachChild(function(child){
j++;
if(child.getUI().isChecked()){
i++;
if(child.hasChildNodes()){
z.push(child);
}
}
});

if(i==j){
tree.suspendEvents(); //暂停触发所有事件
node.eachChild(function(child){
if(child.getUI().isChecked()){
child.ui.toggleCheck(false);
child.attributes.checked = false;
}
});

tree.resumeEvents(); //重新出发所有事件
}
if(z.length>0){
for(var s=0;s<z.length;s++){
outOfcheck(z[s],0,0);
}
}  
        // 全部去选 End
    }
        }
    });
   
    tree.getRootNode().expand(true); // 找到根节点展开
});



html 文件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <link rel="stylesheet" type="text/css" href="../ux/css/ColumnNodeUI.css" />
    <link rel="stylesheet" type="text/css" href="column-tree.css" />
    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../code-display.js"></script>

    <script type="text/javascript" src="../ux/ColumnNodeUI.js"></script>
    <script type="text/javascript" src="column-tree.js"></script>
    <!-- EXAMPLES -->
    <script type="text/javascript" src="../shared/examples.js"></script>
</head>
<body>

    <h1>ColumnTree Example</h1>

    <p>Demonstrates extending the native <tt>Ext.tree.TreePanel</tt> and <tt>Ext.tree.TreeNodeUI</tt>
    to display basic columns via the custom <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnTree</a>
    and <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnNodeUI</a> classes.</p>
    <p>The js is not minified so it is readable. See <a href="column-tree.js">column-tree.js</a>.</p>

</body>
</html>


josn 文件


[{
id:1001,
    text: 'To Do',
    checked: false,
    cls: 'folder',
    children: [{
        text: 'Go jogging',
        id:100101,
        checked: false,
        children:[{id:10010101,text:'aaa',leaf:true,checked:false},{id:10010102,text:'bbb',leaf:true,checked:false}]
    },{
        text: 'Take a nap',
        id:100102,
        leaf: true,
        checked: false
    },{
        text: 'Climb Everest',
        id:100103,
        leaf: true,
        checked: false
    }]
},{
    text: 'Grocery List',
    id:1002,
    checked: false,
    cls: 'folder',
    children: [{
        text: 'Bananas',
        id:100201,
        leaf: true,
        checked: false
    },{
        text: 'Milk',
        id:100202,
        leaf: true,
        checked: false
    },{
        text: 'Cereal',
        id:100203,
        leaf: true,
        checked: false
    },{
        text: 'Energy foods',
        id:100204,
        checked: false,
        cls: 'folder',
        children: [{
            text: 'Coffee',
            id:10020401,
            leaf: true,
            checked: false
        },{
            text: 'Red Bull',
            id:10020402,
            leaf: true,
            checked: false
        }]
    }]
},{
    text: 'Remodel Project',
    id:1003,
    checked: false,
    cls: 'folder',
    children: [{
        text: 'Finish the budget',
        id:100301,
        leaf: true,
        checked: false
    },{
        text: 'Call contractors',
        id:100302,
        leaf: true,
        checked: false
    },{
        text: 'Choose design',
        id:100303,
        leaf: true,
        checked: false
    }]
}]