ExtJs之treePanel checkbox 复选框

青旅半醒 2021-09-14 10:18 401阅读 0赞

### 需求 ###

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

### 效果图 ###

![这里写图片描述][SouthEast]

### 代码 ###

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

[SouthEast]: /images/20210726/22d3f6dcdf34463fb73df92e3d1a6a56.png