ExtJs之treePanel checkbox 复选框

需求

目录树需要实现多级复选的时的应用

• 1

效果图

代码

1.实现关键—–子节点和父节点的联动

/** 递归遍历父节点 **/  
var travelParentChecked = function(node, checkStatus, opts){  
    //父节点  
    var upNode = node.parentNode;  
    if(upNode != null){  
        var opts = {};  
        opts["isPassive"] = true;  
        //父节点当前选中状态  
        var upChecked = upNode.data.checked;  

        //选中状态，遍历父节点，判断有父节点下的子节点是否都全选  
        if(checkStatus){  
            var allChecked = true;  
            //此时父节点不可能是选中状态  
            //如果有一个节点未选中，可以判断，当前父节点肯定是未选中状态，所以此时不必向上遍历  
            upNode.eachChild(function (child) {  
                if(!child.data.checked){  
                    allChecked = false;  

                    return false;  
                }  
            });  

            upNode.set('checked', allChecked);  
            if(allChecked){  
                travelParentChecked(upNode, allChecked, opts);  
            }else{//如果后台传递数据时，选择状态正确的话，此处不需要执行  
                //travelParentChecked(upNode, allChecked, opts);  
            }  
        }else{//未选中，让父节点全都 不选  
            if(upNode.data.checked){  
                upNode.set('checked', checkStatus);  
                travelParentChecked(upNode, checkStatus, opts);  
            }else{  
                //travelParentChecked(upNode, allChecked, opts);  
            }  
        }  
    }  
}  

/** 递归遍历子节点，复选框 **/  
var travelChildrenChecked = function(node, checkStatus, eOpts){  
    var isLeaf = node.data.leaf;  
    if(!isLeaf){  
        node.expand(false, function(){  
            if(eOpts["isPassive"] == null){//主动点击  
                node.eachChild(function (child) {  
                    child.set('checked', checkStatus);  

                    travelChildrenChecked(child, checkStatus, eOpts);  
                    //child.fireEvent('checkchange',child, checked);//不知什么原因，不起作用  
                });  
            }  
        });  
    }  
    node.set('checked', checkStatus);  
}  

2.事件要写在checkchange监听事件当中

 listeners: {
       "checkchange": function(node, checked, eOpts){
             travelChildrenChecked(node, checked, eOpts);
             travelParentChecked(node, checked, eOpts);
         }
 }

3.完整案例

Ext.define('dxgx.gxInfoTreePanel',{
    extend: "Ext.tree.Panel",
    xtype: "nav",
    id: "nav",
    title: "导航菜单",
    collapsible: true,
    //split: true,
    autoScroll: true,
    margin: "0 5 0 5",
    width: 225,
    border: true,
    rootVisible: false,
    initComponent: function() {
        //导航菜单Store
      var navStore = Ext.create("Ext.data.TreeStore", {
            // proxy: {
            //     type: "ajax",
            //     reader: "json",
            //     url: "data/nav.json"
            // }

            root: {
                expanded: true,
                children: [
                    {
                        text: "首页",
                        leaf: true,
                        checked:false

                    },
                    {
                        text: "系统管理",
                        expanded: true,
                        checked:true,
                        children: [{
                            text: "角色管理",
                            leaf: true,
                            checked:true
                        },
                            {
                                text: "用户管理",
                                leaf: true,
                                checked:true
                            }
                        ]
                    }, {
                        text: "文章管理",
                        expanded: true,
                        checked:true,
                        children: [{
                            text: "文章列表",
                            leaf: true,
                            checked:true
                        }, {
                            text: "发布文章",
                            leaf: true,
                            checked:true
                        }]
                    }, {
                        text: "产品管理",
                        expanded: true,
                        checked:true,
                        children: [{
                            text: "产品列表",
                            leaf: true,
                            checked:true
                        }, {
                            text: "新增产品",
                            leaf: true,
                            checked:true
                        }, {
                            text: "产品监控",
                            leaf: true,
                            checked:true
                        }]
                    }, {
                        text: "报表管理",
                        expanded: true,
                        children: [{
                            text: "生成报表",
                            leaf: true
                        }, {
                            text: "报表统计",
                            leaf: true
                        }, {
                            text: "报表打印",
                            leaf: true
                        }]
                    }]
            }
        });

        Ext.apply(this, {
            store: navStore,
            listeners: {
                "click": function(node) {
                    trNode = node;
                    Ext.get("nodeid").dom.value = node.id;
                    alert(Ext.get("nodeid").dom.value);
                },
                "checkchange": function(node, checked, eOpts){
                    travelChildrenChecked(node, checked, eOpts);
                    travelParentChecked(node, checked, eOpts);
                }
            }
        });
        this.callParent(arguments);

         /** 递归遍历父节点 **/
        var travelParentChecked = function(node, checkStatus, opts){
            //父节点
            var upNode = node.parentNode;
            if(upNode != null){
                var opts = {};
                opts["isPassive"] = true;
                //父节点当前选中状态
                var upChecked = upNode.data.checked;

                //选中状态，遍历父节点，判断有父节点下的子节点是否都全选
                if(checkStatus){
                    var allChecked = true;
                    //此时父节点不可能是选中状态
                    //如果有一个节点未选中，可以判断，当前父节点肯定是未选中状态，所以此时不必向上遍历
                    upNode.eachChild(function (child) {
                        if(!child.data.checked){
                            allChecked = false;

                            return false;
                        }
                    });

                    upNode.set('checked', allChecked);
                    if(allChecked){
                        travelParentChecked(upNode, allChecked, opts);
                    }else{//如果后台传递数据时，选择状态正确的话，此处不需要执行
                        //travelParentChecked(upNode, allChecked, opts);
                    }
                }else{//未选中，让父节点全都 不选
                    if(upNode.data.checked){
                        upNode.set('checked', checkStatus);
                        travelParentChecked(upNode, checkStatus, opts);
                    }else{
                        //travelParentChecked(upNode, allChecked, opts);
                    }
                }
            }
        };

        /** 递归遍历子节点，复选框 **/
        var travelChildrenChecked = function(node, checkStatus, eOpts){
            var isLeaf = node.data.leaf;
            if(!isLeaf){
                node.expand(false, function(){
                    if(eOpts["isPassive"] == null){//主动点击
                        node.eachChild(function (child) {
                            child.set('checked', checkStatus);

                            travelChildrenChecked(child, checkStatus, eOpts);
                            //child.fireEvent('checkchange',child, checked);//不知什么原因，不起作用
                        });
                    }
                });
            }
            node.set('checked', checkStatus);
        };
    }
});