转载自: http://www.cnblogs.com/KingStar/archive/2010/06/10/1755299.html
经典的checkbox树默认是不会有联动处理的。这里变量INDEX_CATEGORY_CHECKING
是为了避免各个节点事件触发后的递归调用,从而解决了过多递归的问题。
'checkchange': function(node, checked){
if (!INDEX_CATEGORY_CHECKING) {
INDEX_CATEGORY_CHECKING = true;
// true时,子同父,父也同子
if (checked == true) {
node.attributes.checked = true;
// 父变为true,所有子都跟着变化
(function(node) {
var _this = arguments.callee;
if (!node.isLeaf()) {
node.expand();
node.eachChild(function(child) {
child.ui.toggleCheck(true);
child.attributes.checked = true;
_this.call(_this, child);
});
}
})(node);
// 父变为true,父的父(如果有的话)也应该都为true
(function(node) {
var _this = arguments.callee;
if (node.parentNode && node.parentNode != t.root) {
var pnode = node.parentNode;
pnode.ui.toggleCheck(true);
pnode.attributes.checked = true;
_this.call(_this, pnode);
}
})(node);
} else { // false 时,子同父,但父不一定同子
node.attributes.checked = false;
// 父变为false,所有子跟着变化
(function(node) {
var _this = arguments.callee;
if (!node.isLeaf()) {
node.expand();
node.eachChild(function(child) {
child.ui.toggleCheck(false);
child.attributes.checked = false;
_this.call(_this, child);
});
}
})(node);
// 父变为false,但父的父(如果有的话)不一定变化
(function(node) {
var _this = arguments.callee;
if (node.parentNode && node.parentNode != t.root) {
var pnode = node.parentNode;
var chk = false;
pnode.eachChild(function(child) {
if (child.attributes.checked == true) {
chk = true;
return false;
}
});
if (chk == true) {
return;
} else {
pnode.ui.toggleCheck(false);
pnode.attributes.checked = false;
_this.call(_this, pnode);
}
}
})(node);
}
INDEX_CATEGORY_CHECKING = false;
}
}
分享到:
相关推荐
在这个特定的场景中,我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 Checkbox在TreePanel中的应用允许用户进行多选操作,这对于数据筛选、权限设置等场景非常有用。在EXT.NET中,我们可以为每...
本文将详细讲解如何实现TreePanel中的Checkbox操作以及父子节点间的联动效果,特别是针对之前存在的Bug进行修正。 首先,让我们理解TreePanel的基本概念。TreePanel是一个基于EXT.NET的组件,它继承自GridPanel,但...
Checkbox Tree是TreePanel的一种扩展,增加了复选框功能。 3. **Checkbox Tree配置**: 创建Checkbox Tree时,需要在TreePanel的配置项中指定`useCheckboxes`为`true`。此外,还可以通过`checked`属性来控制节点的...
在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...
2. **父节点与子节点的联动**:描述中提到的“选中父节点,自动选中子节点;选中子节点,自动遍历选中父节点”是复选框树的一个重要特性。这被称为“级联选中”或“全选/全不选”模式。当父节点被选中时,其所有子...
在本文中,我们将深入探讨`treePanel`和`gridPanel`技术在页面上实现数据的增删改查功能。这两个组件是Ext JS框架中的核心组件,广泛用于构建数据驱动的用户界面。`treePanel`主要用于展示层级结构的数据,如文件...
TreePanel 是一种在Web开发中常用的组件,尤其在Ext JS框架中,它被用来展示具有层级结构的数据。这个"带复选框的树"是指在TreePanel中每个节点都带有可选中的复选框,用户可以通过这些复选框来选择或操作树形结构中...
在集成TreePanel和GridPanel时,可能涉及到的概念有:将TreePanel的节点与GridPanel的数据关联,实现点击树节点时动态加载或更新GridPanel的数据,以及可能的父子数据联动操作。 在实际应用中,你可能会学习到以下...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构的数据,比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel...
在本文中,我们将深入探讨如何使用Coolite布局技术,结合数据库数据绑定到TreePanel,并利用TabPanel进行动态展示。Coolite是一种强大的前端开发框架,它提供了丰富的组件和灵活的布局方式,使得创建复杂的Web应用...
在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...
它是一个强大的工具集,提供了多种组件,包括Menu(菜单)和TreePanel(树形面板),这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单...
在EXTJS开发中,TreePanel是用于展示层级结构数据的组件,它经常被用来构建文件系统或者组织结构等。在处理TreePanel时,我们可能会遇到一个常见问题:当尝试使用MultiSelectionModel(多选模型)重置选中的节点时,...
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
在ExtJS 2中,Checkbox Tree是基于TreePanel组件的扩展,它提供了一种可视化的方式,让用户可以多选树结构中的节点。这个组件特别适用于需要对分类数据进行选择或过滤的场景,如文件系统导航、权限管理等。 要创建...
在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...
在 ExtJS 中,TreePanel 与 CheckBox 结合使用是一种常见的场景,其中的 CheckBox 可以用来控制树节点的选择状态。 在 ExtJS 中实现 TreePanel 结合 CheckBox 的全部选中以及清空选中的功能,需要理解 TreePanel 的...