最近在一个项目中用到了EXT中TREE,但是它本身不提供自己想要的功能,在一番搜索之后,找到了《 Ext.tree.TreeNodeUI 进行checkbox功能的扩展》这个文章,在看过以后,发现了几个问题
1、只有两种状态
2、当选中子节点的时候,它又把自己的父节点给循环了一边
于是自己就做了如下修改,这里只贴修改后的,如果有人想比较,可以找找那篇文章
// private
childCheck : function(node,checked){
var a = node.attributes;
if(!a.leaf) {
// debugger;
var cs = node.childNodes;
var csui;
for(var i = 0; i < cs.length; i++) {
csui = cs[i].getUI();
csui.checkbox.checked=checked;
this.childCheck(cs[i],checked);
}
}
},
// private
parentCheck : function(node ,checked){
var checkbox = node.getUI().checkbox;
if(typeof checkbox == 'undefined')return ;
//debugger;
var state=this.childHasChecked(node,checked);
//if(!(checked ^ checkbox.checked))return;
//if(!checked && childhaschecked) return;
if (state==0)//全否
{
checkbox.checked=false;
checkbox.indeterminate=false;
} else
if (state==1) //半选中
{
checkbox.checked=true;
checkbox.indeterminate=true;
} else
{
checkbox.checked=true;
checkbox.indeterminate=false;
}
// checkbox.checked = checked;
node.attributes.checked = checkbox.checked;
node.getOwnerTree().fireEvent('check', node, checked);
var parentNode = node.parentNode;
if( parentNode !== null){
this.parentCheck(parentNode,checked);
}
},
// private
childHasChecked : function(node,checked){//检查是否存在被勾选的 并且状态不为灰化的
var childNodes = node.childNodes;
var retValue=0;
if(childNodes || childNodes.length>0){
for(var i=0;i<childNodes.length;i++){
var checkbox=childNodes[i].getUI().checkbox;
//本身是全选中状态 即 checked=true, indeterminate=false , 并且此次进来取消选中状态(参数checked=false) 则只需要找出子节点是否存在被选中 如果存在某个子节点为半选中状态,则为半选中,否则不选中
if(!checked) {
if (checkbox.checked ) //存在选中 则直接退出
{
return 1;//半选中状态
}
} else {
retValue=2;
if (!checkbox.checked || (checkbox.checked && checkbox.indeterminate))
{
return 1;
}
}
}
}
return retValue;
},
本文来自CSDN博客:http://blog.csdn.net/taogou/archive/2009/03/17/3999115.aspx
分享到:
相关推荐
EXT TREE扩展CHECKBOX JS是一种在EXT JS框架下对树形组件(Tree Panel)进行增强,实现复选框功能的技术。EXT JS是一个强大的JavaScript GUI库,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。在EXT JS中,...
下面将详细介绍标题中提到的四种常见的tree实现: 1. **一次性加载所有节点**:这种tree实现适用于节点数量较少的情况,所有的父节点和子节点在页面加载时一次性加载完成。这种方式的优点是操作流畅,无需等待额外...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...
总结来说,实现`Ext JS` Tree组件中不同节点的个性化右键菜单,关键在于监听`itemcontextmenu`事件,创建自定义的菜单并根据节点的属性或状态进行适配。通过结合`Ext.menu.Menu`和`Ext.data.TreeStore`,我们可以...
1. **基本结构**:Ext checktree是Ext JS中的TreePanel的一个变体,它扩展了基本的树形视图,添加了复选框功能。每个节点都可以有一个复选框,用户可以通过勾选或取消勾选来选择或取消选择节点。 2. **配置选项**:...
`Ext.tree.TreeNode`是用于表示树形结构中的每个节点的对象,它扩展了`Ext.data.Node`。 - **text**:节点的文本内容。 - **qtip**:节点的提示信息。 - **icon**:节点的图标路径。 - **iconCls**:节点的图标样式...
这可能涉及到设置`checkboxModel`属性,以及配置复选框的行为,例如`checkOnly`(只允许选中父节点才能选中子节点)或者`threeState`(支持三种状态:选中、未选中、半选中)。 此外,你需要处理与后端的数据交互,...
在树控件中实现拖放功能,需要对`Ext.tree.TreeViewDragDrop`或`Ext.tree.TreeDragZone`类进行扩展。这个特定的用户扩展控件,即"UxMutiDragDropTree",则是在原有基础上增加了多选和多节点拖放的能力。 多选功能...
EXT TreeFilter插件是EXT库中的一个强大工具,主要用于增强EXT的Tree组件的功能,特别是针对树形结构数据的快速搜索和过滤。EXT Tree是EXT框架中用于展示层次结构数据的组件,它通常用于构建具有多级目录结构的应用...
在EXT中,Tree Panel是一种展示层次结构数据的组件,通常用于显示文件系统、组织结构或者任何有层级关系的数据。级联选择是指在一个选择项被选中时,与其相关的其他选择项也会自动被选中或禁用,这种功能在数据关联...
在EXT 中,"手风琴"是一个常见的布局方式,它允许用户在一个有限的空间内展示多个扩展面板(EXT panels),每次只有一个面板可见。手风琴布局通常用于显示大量分类信息,用户可以轻松地展开或折叠面板以查看具体内容...
在ExtJS 4.0中,树型结构(Trees)是一种强大的组件,它特别适合用于显示具有层次结构的数据。树型结构与表格组件共享相同的基类,因此它们之间有许多相似的功能,例如多列显示、尺寸调整、拖放操作、渲染和筛选等。...
7. **EXT Tree**:EXT的树形视图组件适用于层次结构数据的展示,可以进行展开、折叠、拖放操作,常用于导航菜单或文件系统。 8. **EXT Theme**:EXT提供了多种主题样式,可以自定义皮肤,满足不同设计需求。同时,...
在Ext JS中,树形控件(Tree)是一种常见的数据展示形式,它允许用户以层级结构查看和操作数据。级联选择(Cascading Selection)则是指当用户选中一个节点时,其所有子节点都会自动被选中,反之,如果取消选中父...
通过扩展`Ext.tree.Panel`和`Ext.data.NodeInterface`,可以创建自定义节点类型,添加更多的功能。 8. **节点状态持久化** 如果需要在页面刷新后保持用户的展开/折叠状态,可以使用`stateful`配置,并配合`stateId...
在ExtJS 2中,Checkbox Tree是基于TreePanel组件的扩展,它提供了一种可视化的方式,让用户可以多选树结构中的节点。这个组件特别适用于需要对分类数据进行选择或过滤的场景,如文件系统导航、权限管理等。 要创建...
API文档详细介绍了EXT-JS3.2中的每一个组件、函数和配置选项,如Grid面板、Form表单、Window对话框、Tree视图等,还有事件处理机制和数据绑定概念。 `ext-3.4.0.zip`是EXT-JS3.2的核心库文件,包含了所有EXT-JS的...
为了实现动态功能,我们需要扩展EXT的树节点行为。这包括编辑节点、添加新节点、删除节点和批量操作。这些功能通常通过监听事件和调用相应的方法来实现。例如,添加节点可以监听`contextmenu`事件,然后在右键菜单上...
**2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,可以用来展示层次结构的数据。 - **主要用途**:适用于展示目录结构或组织架构图。 **...
#### 十三、EXT中的继承 - **继承** 是面向对象编程的一个重要特性,EXT 支持通过继承来扩展现有组件的功能,使得代码更加灵活和可维护。 #### 十四、EXT2概述 - **EXT2** 是 EXT 的一个版本,相比之前的版本,它...