`
issac0216
  • 浏览: 15648 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
文章分类
社区版块
存档分类
最新评论

Ext中TREE的扩展 ,三种状态

阅读更多
最近在一个项目中用到了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
分享到:
评论
1 楼 lanwuying 2012-04-25  
这个也是有问题的哦
都不支持级联全选
就是点父节点的复选框 子节点不能选中

相关推荐

    EXT TREE 扩展CHECKBOX JS

    EXT TREE扩展CHECKBOX JS是一种在EXT JS框架下对树形组件(Tree Panel)进行增强,实现复选框功能的技术。EXT JS是一个强大的JavaScript GUI库,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。在EXT JS中,...

    ext4 四种常见的tree

    下面将详细介绍标题中提到的四种常见的tree实现: 1. **一次性加载所有节点**:这种tree实现适用于节点数量较少的情况,所有的父节点和子节点在页面加载时一次性加载完成。这种方式的优点是操作流畅,无需等待额外...

    Ext TreePanel Checked Ext复选框树

    在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...

    Ext 中的Tree实现不同节点不同的右键菜单

    总结来说,实现`Ext JS` Tree组件中不同节点的个性化右键菜单,关键在于监听`itemcontextmenu`事件,创建自定义的菜单并根据节点的属性或状态进行适配。通过结合`Ext.menu.Menu`和`Ext.data.TreeStore`,我们可以...

    Ext checktree

    1. **基本结构**:Ext checktree是Ext JS中的TreePanel的一个变体,它扩展了基本的树形视图,添加了复选框功能。每个节点都可以有一个复选框,用户可以通过勾选或取消勾选来选择或取消选择节点。 2. **配置选项**:...

    Ext_Tree属性方法

    `Ext.tree.TreeNode`是用于表示树形结构中的每个节点的对象,它扩展了`Ext.data.Node`。 - **text**:节点的文本内容。 - **qtip**:节点的提示信息。 - **icon**:节点的图标路径。 - **iconCls**:节点的图标样式...

    ext复选框的ColumnTree扩展包

    这可能涉及到设置`checkboxModel`属性,以及配置复选框的行为,例如`checkOnly`(只允许选中父节点才能选中子节点)或者`threeState`(支持三种状态:选中、未选中、半选中)。 此外,你需要处理与后端的数据交互,...

    Ext用户扩展控件-------支持树上多个节点和叶子的拖动

    在树控件中实现拖放功能,需要对`Ext.tree.TreeViewDragDrop`或`Ext.tree.TreeDragZone`类进行扩展。这个特定的用户扩展控件,即"UxMutiDragDropTree",则是在原有基础上增加了多选和多节点拖放的能力。 多选功能...

    EXT TreeFilter 插件

    EXT TreeFilter插件是EXT库中的一个强大工具,主要用于增强EXT的Tree组件的功能,特别是针对树形结构数据的快速搜索和过滤。EXT Tree是EXT框架中用于展示层次结构数据的组件,它通常用于构建具有多级目录结构的应用...

    ext 级联选择的树形控件

    在EXT中,Tree Panel是一种展示层次结构数据的组件,通常用于显示文件系统、组织结构或者任何有层级关系的数据。级联选择是指在一个选择项被选中时,与其相关的其他选择项也会自动被选中或禁用,这种功能在数据关联...

    EXT 中文帮助手册

    在EXT 中,"手风琴"是一个常见的布局方式,它允许用户在一个有限的空间内展示多个扩展面板(EXT panels),每次只有一个面板可见。手风琴布局通常用于显示大量分类信息,用户可以轻松地展开或折叠面板以查看具体内容...

    4.0Ext 树型结构

    在ExtJS 4.0中,树型结构(Trees)是一种强大的组件,它特别适合用于显示具有层次结构的数据。树型结构与表格组件共享相同的基类,因此它们之间有许多相似的功能,例如多列显示、尺寸调整、拖放操作、渲染和筛选等。...

    ext培训文档doc

    7. **EXT Tree**:EXT的树形视图组件适用于层次结构数据的展示,可以进行展开、折叠、拖放操作,常用于导航菜单或文件系统。 8. **EXT Theme**:EXT提供了多种主题样式,可以自定义皮肤,满足不同设计需求。同时,...

    Ext 树的级联选择扩展插件使用说明

    在Ext JS中,树形控件(Tree)是一种常见的数据展示形式,它允许用户以层级结构查看和操作数据。级联选择(Cascading Selection)则是指当用户选中一个节点时,其所有子节点都会自动被选中,反之,如果取消选中父...

    Extjs的tree

    通过扩展`Ext.tree.Panel`和`Ext.data.NodeInterface`,可以创建自定义节点类型,添加更多的功能。 8. **节点状态持久化** 如果需要在页面刷新后保持用户的展开/折叠状态,可以使用`stateful`配置,并配合`stateId...

    checkbox tree extjs2

    在ExtJS 2中,Checkbox Tree是基于TreePanel组件的扩展,它提供了一种可视化的方式,让用户可以多选树结构中的节点。这个组件特别适用于需要对分类数据进行选择或过滤的场景,如文件系统导航、权限管理等。 要创建...

    ext-js3.2 中文API,例子,包全都有

    API文档详细介绍了EXT-JS3.2中的每一个组件、函数和配置选项,如Grid面板、Form表单、Window对话框、Tree视图等,还有事件处理机制和数据绑定概念。 `ext-3.4.0.zip`是EXT-JS3.2的核心库文件,包含了所有EXT-JS的...

    EXT实现动态树的功能

    为了实现动态功能,我们需要扩展EXT的树节点行为。这包括编辑节点、添加新节点、删除节点和批量操作。这些功能通常通过监听事件和调用相应的方法来实现。例如,添加节点可以监听`contextmenu`事件,然后在右键菜单上...

    Ext组件描述,各个组件含义

    **2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,可以用来展示层次结构的数据。 - **主要用途**:适用于展示目录结构或组织架构图。 **...

    EXT 中文手册

    #### 十三、EXT中的继承 - **继承** 是面向对象编程的一个重要特性,EXT 支持通过继承来扩展现有组件的功能,使得代码更加灵活和可维护。 #### 十四、EXT2概述 - **EXT2** 是 EXT 的一个版本,相比之前的版本,它...

Global site tag (gtag.js) - Google Analytics