TreeNodeChecked v1.2.1 - Ext Tree级联选中插件

TreeNodeChecked是一个Ext Tree级联选中插件，默认的Ext Tree的Checkbox是不带级联选中功能的，加载TreeNodeChecked插件实现Tree Checkbox的级联选中功能。

演示代码：

new Ext.tree.TreePanel({
    ...省略部分代码...
    
    plugins: [new Ext.plugin.tree.TreeNodeChecked({
        // 级联选中
        cascadeCheck: true,
    
        // 级联父节点
        cascadeParent: true,
    
        // 级联子节点
        cascadeChild: true

        // 连续选中
        linkedCheck: false,

        // 异步加载时，级联选中下级子节点
        asyncCheck: false,
    
        // 显示所有树节点checkbox
        displayAllCheckbox: false
    })]
});

TreeNodeChecked还扩展了两个功能函数：

    选中节点
    checkNode: function(node, checked)
        @param {Object} node  节点ID/TreeNode/Array
        @param {Boolean} checked  选中状态
        @return void

    获取被选中的树叶节点
    getLeafChecked : function(p, startNode)
        @param {String} p  属性类别
        @return Array/String

源代码：

/**
 * @author [e-mail]
 * @version 1.2.1 (1/4/2010)
 */
Ext.ns('Ext.plugin.tree');

Ext.plugin.tree.TreeNodeChecked = Ext.extend(Object, {
    // 级联选中
    cascadeCheck: true,
    
    // 级联父节点
    cascadeParent: true,
    
    // 级联子节点
    cascadeChild: true,
    
    // 连续选中
    linkedCheck: false,
    
    // 异步加载时，级联选中下级子节点
    asyncCheck: false,
    
    // 显示所有树节点checkbox，设置displayAllCheckbox==true，加载树时，如果node.checked属性为undefined，那么显示一个未选中的checkbox
    displayAllCheckbox: false,
    
    constructor: function(config) {
        config = config ||
        {};
        Ext.apply(this, config);
    },
    
    init: function(tree) {
        if (tree.cascadeCheck === false) {
            this.cascadeCheck = this.cascadeParent = this.cascadeChild = this.linkedCheck = this.asyncCheck = false;
        }
        
        Ext.apply(tree, {
            cascadeCheck: this.cascadeCheck,
            cascadeParent: this.cascadeParent,
            cascadeChild: this.cascadeChild,
            linkedCheck: this.linkedCheck,
            asyncCheck: this.asyncCheck,
            checkNode: this.checkNode,
            getLeafChecked: this.getLeafChecked
        });
        
        if (this.cascadeCheck) {
            tree.on('checkchange', this.onCheckChange);
        }
        
        if (this.cascadeCheck && this.cascadeChild && this.asyncCheck) {
            tree.on('expandnode', this.onExpandNode);
        }
        
        if (this.displayAllCheckbox) {
            var loader = tree.getLoader();
            loader.baseAttrs = loader.baseAttrs ||
            {};
            loader.baseAttrs['checked'] = false;
        }
    },
    
    // private
    onCheckChange: function(node, checked) {
        if (!this.cascadeCheck) {
            return;
        }
        
        var checkChange = function(ui) {
            ui.checkbox.checked = checked;
            // fix for IE6
            ui.checkbox.defaultChecked = checked;
            ui.node.attributes.checked = checked;
        };
        
        if (this.cascadeParent) {
            var loopParentChecked = function(parentNode) {
                var pui = parentNode.getUI();
                if (!Ext.isDefined(pui.checkbox)) {
                    return;
                }
                if (checked) {
                    checkChange.call(this, pui);
                } else {
                    var c = false;
                    Ext.each(parentNode.childNodes, function(n) {
                        if (c || n.id === node.id) {
                            return;
                        }
                        if (n.getUI().checkbox) {
                            c = n.getUI().checkbox.checked;
                        }
                    }, this);
                    if (!c) {
                        checkChange.call(this, pui);
                    }
                }
                if (Ext.isDefined(parentNode.parentNode)) {
                    loopParentChecked.call(this, parentNode.parentNode);
                }
            };
            loopParentChecked.call(this, node.parentNode);
        }
        
        if (this.cascadeChild) {
            var loopChildChecked = function(childNodes) {
                if (childNodes.length === 0) {
                    return;
                }
                Ext.each(childNodes, function(n) {
                    var nui = n.getUI();
                    if (Ext.isDefined(nui.checkbox)) {
                        checkChange(nui);
                        loopChildChecked.call(this, n.childNodes);
                    } else {
                        if (this.linkedCheck) {
                            loopChildChecked.call(this, n.childNodes);
                        }
                    }
                }, this);
            };
            loopChildChecked.call(this, node.childNodes);
        }
    },
    
    // private 
    onExpandNode: function(node) {
        if (node.asyncChecked !== true) {
            node.asyncChecked = true;
            var ui = node.getUI();
            if (Ext.isDefined(ui.checkbox)) {
                if (ui.checkbox.checked) {
                    Ext.each(node.childNodes, function(n) {
                        this.checkNode(n, true);
                    }, this);
                }
            }
        }
    },
    
    /**
     * 选中节点
     * @param {Object} node  节点ID/TreeNode/Array
     * @param {Boolean} checked  选中状态
     * @return void
     */
    checkNode: function(node, checked) {
        if (Ext.isArray(node)) {
            Ext.each(node, function(n) {
                if (Ext.isString(n)) {
                    n = this.getNodeById(n);
                }
                n.getUI().toggleCheck(checked);
            }, this);
        } else {
            if (Ext.isString(node)) {
                node = this.getNodeById(node);
            }
            node.getUI().toggleCheck(checked);
        }
    },
    
    /**
     * 获取被选中的树叶节点
     * @param {String} p  属性类别
     * @return Array/String
     */
    getLeafChecked: function(p, startNode) {
        var leafNodes = [], selNodes = this.getChecked(undefined, startNode);
        Ext.each(selNodes, function(node) {
            if (node.isLeaf()) {
                leafNodes.push(node);
            }
        });
        if (!Ext.isDefined(p)) {
            return leafNodes;
        }
        var ret = '';
        Ext.each(leafNodes, function(node) {
            if (ret.length > 0) {
                ret += ',';
            }
            ret += (p == 'id' ? node.id : node.attributes[p]);
        });
        return ret;
    }
});

更新日志：
v1.2.1  1/4/2010
    1. 修正checkNode方法bug
    2. 新增displayAllCheckbox属性，显示所有树节点checkbox

v1.2  10/3/2010
    1. 新增asyncCheck属性，异步加载时，级联选中下级子节点

评论

5 楼 babydeed 2010-07-14  

用你的插件 tree设置rootVisible: true, 然后把一个节点取消选中 就报‘null’为空或不是对象 报的行数是 onCheckChange函数里的var pui = parentNode.getUI();   这行  如果设置rootVisible: false, 就没错 为什么呢？？

4 楼 eredlab 2010-05-14  

知道了 你的级联子节点和级联父节点是互斥的  我需要同时支持这两个级联模式啊 请问要怎么处理啊

3 楼 eredlab 2010-05-14  

你好，下载了你的的CheckNodeTree插件，但在使用过程中有点问题。特向您求教一下：
我怎么选择一个分支节点，起子节点不能被选中啊，只能选中其父节点。还有就是取消一个树枝几点时候，她的子节点不能被取消掉啊！

请赐教 谢谢！

你的邮箱怎么发送不了啊！提示不存在！

2 楼 chemzqm 2010-04-01  

checkNode函数有bug啊

Ext.each(node, function(n) {   
                if (Ext.isString(n)) {   
                    n = this.getNodeById(n);   
                }   
                n.getUI().toggleCheck(checked);   
            }); 

这个函数应该添加参数scope，否则里面this的引用是n！
改成

Ext.each(node, function(n) {   
                if (Ext.isString(n)) {   
                    n = this.getNodeById(n);   
                }   
                n.getUI().toggleCheck(checked);   
            },this); 

1 楼 chemzqm 2010-04-01  

稍微改了一点，添加了一个enableAllCheck属性，该属性设置为true时树上所有结点都会显示未选中的cheeckbox而不用考虑在加载时为node设置checked属性。当然，如果为node设置了checked属性，node的属性决定cheeckbox是否为选中状态。

    //设置所有结点都有选择框
    /*我添加的代码
    enableAllCheck: true,
    */
    constructor: function(config){
        config = config || {};
        Ext.apply(this, config);
    },
    
    init: function(tree){
        if (tree.cascadeCheck === false) {
            this.cascadeCheck = this.cascadeParent = this.cascadeChild = this.linkedCheck = this.asyncCheck = false;
        }
        
        Ext.apply(tree, {
            cascadeCheck: this.cascadeCheck,
            cascadeParent: this.cascadeParent,
            cascadeChild: this.cascadeChild,
            linkedCheck: this.linkedCheck,
            asyncCheck: this.asyncCheck,
            checkNode: this.checkNode,
            getLeafChecked: this.getLeafChecked
        });
        
        if (this.cascadeCheck) {
            tree.on('checkchange', this.onCheckChange);
        }
        
        if (this.cascadeCheck && this.cascadeChild && this.asyncCheck) {
            tree.on('expandnode', this.onExpandNode);
        }
        /*我添加的代码
        if (this.enableAllCheck) {
            var loader=tree.getLoader();
			if(!Ext.isDefined(loader.baseAttrs))
				loader.baseAttrs={};          
            loader.baseAttrs['checked'] = false;
        }
        */
    },