`
zhangdaiping
  • 浏览: 129141 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

EXT 
阅读更多
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 zhangdaipign@vip.qq.com
 * @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属性,异步加载时,级联选中下级子节点
6
0
分享到:
评论
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;
        }
        */
    },

相关推荐

    el-tree-selected-tree

    `el-tree-selected-tree` 描述的就是这样一个功能,它实现了在主`el-tree`之外,单独拉出一个展示已选中节点的树,并支持在该树上删除选中节点。 首先,我们需要理解`el-tree`的基本用法。`el-tree`通过`data`属性...

    纯JS+HTML写的checkBox Tree 级联选中 好用无BUG

    - 级联选中/取消选中:在事件处理函数中,根据当前选中状态,递归遍历子节点或父节点,改变他们的选中状态。 3. **级联逻辑**: - 当父节点被选中时,所有子节点自动被选中。这可以通过遍历子节点并设置它们的`...

    2020-06 iview级联选择器-省市区三级联动

    2020-06 iview级联选择器-省市区三级联动js文件下载 2020-06 iview级联选择器-省市区三级联动js文件下载

    STM32单片机通过LTC6804-1读取级联电池电压软件程序工程源码.zip

    STM32单片机通过LTC6804-1读取级联电池电压软件程序工程源码 int main(void) { RCC_Configuration(); GPIO_Configuration(); //NVIC_PriorityGroupConfig(NVIC_PriorityGroup_2); NVIC_Config() ; ...

    纯JS---省份城市级联选择,

    纯JS---省份城市级联选择, (this);" style="width: 49%; float: left;"> ; float: right;"></select>

    rs_cnv_RS卷积码_RS-卷积码级联_RS级联码_rs码_级联码matlab

    本文将深入探讨这两种编码方式及其级联应用,并结合MATLAB环境进行解析。 首先,Reed-Solomon码是一种非线性分组码,基于伽罗华域上的多项式运算。它能够在数据序列中检测并纠正一定数量的错误位,特别适合在有大量...

    存储过程-游标-级联删除

    在数据库管理中,级联删除是一种常见的操作,它涉及到一个表中的记录被删除时,与之关联的其他表中的记录也会自动被删除。在大型数据库系统中,这种功能通常通过外键约束来实现,但在某些情况下,如需要自定义删除...

    android读取xml资源实现省-市-区的级联选择

    android读取xml资源实现省-市-区的级联选择 具体参考我的博客: http://blog.csdn.net/jiguangcanhen/article/details/41074703 改资源为ant架构,gradle架构,请下载之后自己用Eclipse导吧。

    casForest-master_级联森林_

    级联森林(Cascade Forest)是一种集成学习方法,它在机器学习和深度学习领域具有广泛应用。级联森林结合了决策树的高效性和随机森林的多样性,旨在优化预测性能和计算效率。下面将详细介绍级联森林算法及其相关知识...

    两个平行的分裂 - 重整 - 合并的级联单元组成的层流静态混合仿真

    本例模拟两个平行的分裂 - 重整 - 合并的级联单元组成的层流静态混合器。每一个混合单元使流层数翻倍,加快了混合过程。

    hibernate many-to-many级联保存,级联更新,级联删除

    本文将深入探讨如何在Hibernate中处理Many-to-Many关系的级联保存、级联更新和级联删除。 一、Many-to-Many关系基础 在数据库设计中,Many-to-Many关系意味着两个实体之间存在多对多的关系。例如,学生可以选修多门...

    行业分类-设备装置-一种级联式储能变流器检测平台及其控制方法.zip

    本文将围绕“行业分类-设备装置-一种级联式储能变流器检测平台及其控制方法”这一主题进行深入探讨。 储能变流器是连接储能设备与电力系统的桥梁,其主要功能是将电能与化学能或机械能之间进行转换,以实现电能的...

    电信设备-一种级联式存储介质信息消除系统.zip

    "电信设备-一种级联式存储介质信息消除系统"的主题涉及到的是如何确保在存储设备不再使用或需要更换时,能够有效地消除其中的信息,防止敏感数据泄露。这种级联式信息消除系统的设计和实施是为了满足电信设备对数据...

    JQuery实例-年月日级联菜单.rar )

    【标题】"JQuery实例-年月日级联菜单.rar" 涉及的知识点主要集中在JavaScript库JQuery上,具体实现的是一个交互式的年、月、日选择器,这种级联菜单在网页表单中常见,用于日期输入。下面将详细解释相关技术及其应用...

    threeH.rar_MATLAB H桥_cascade H-bridge_级联_级联H_级联H 桥

    "cascade H-bridge"或“级联H桥”则表示这是一个由多个H桥串联组成的电路结构,这样的设计可以提供更高的电压输出或增强系统性能。 在描述中,“三相级联H桥的研究和应用”意味着这个压缩包可能包含了关于三相电源...

    Ext TreePanelrcheckbox级联选择的实现

    在实际应用中,我们经常需要处理树形结构的复选框,实现级联选择功能,即当父节点被选中时,其所有子节点自动被选中,反之亦然。这篇博客“Ext TreePanelrcheckbox级联选择的实现”就专注于探讨这个主题。 首先,...

    Excel表格+Word文档各类各行业模板-建立复杂级联菜单.zip

    在Excel和Word中,复杂级联菜单是一种高级的数据录入和管理工具,它允许用户通过下拉列表中的选项来选择或输入数据,这些选项可以是相互关联的,即一个列表的选择会影响到另一个列表的内容。这种功能在处理多级分类...

    开发技术-硬件-级联型高压变频器核心控制芯片的研制.zip

    级联型高压变频器是一种广泛应用在电力传动、能源节约及电力系统中的设备,它能够通过改变交流电源的频率来调整电动机的速度和功率。在级联型高压变频器中,核心控制芯片起着至关重要的作用,它负责处理各种控制算法...

    CPS-SPWM在级联型有源电力滤波器中的应用

    ### CPS-SPWM在级联型有源电力滤波器中的应用 #### 一、引言 随着电力电子技术的发展,对于大功率场合的应用需求日益增长。多电平变流器由于可以直接输出高压且无需变压器连接的特点,在这些场合中越来越受到重视...

Global site tag (gtag.js) - Google Analytics