`

extJS 树节点操作

阅读更多
ext 树节点操作
tree :树    node:节点
1、全部展开 tree.expandAll();
2、全部收缩 tree.collapseAll();
3、得到父节点 node.parentNode
4、判断是否有父节点 node.parentNode==null
5、判断是否有子节点 node.hasChildNodes()
6、获取下一级所有子节点 node.eachChild(function(child) { })
7、获取选择的节点 tree.getSelectionModel().getSelectedNode()
8、设置选中节点  node.select()
9、上移节点 node.selectPrevious();
10、下移节点 node.selectNext();
11、获取节点ID  node.id
12、获取节点值  node.text
13、获取节点提示  node.attributes.qtip
带选择框
14、获取选中的的节点
var check= tree.getChecked();
Ext.each(check ,function(node){})
15、获取是否选择  node.getUI().checkbox.checked;
16、设置节点选择   node.ui.toggleCheck(true);  //显示选中    node.attributes.checked = true; //赋值


17、设置一个新的节点
var newNode=new Ext.tree.TreeNode({id:'id',text:'text',iconCls:'icon-group',qtip:'tip'});      iconCls 导入的是CSS设置的背景图片(节点图标)
css写法: .x-tree-node-leaf .icon-group{  background-image:url(group.png);} 前.x-tree-node-leaf必写
18、插入新的节点  node.appendChild(newNode);
19、删除节点 node.remove(); 
20
这里说的选中是指鼠标点击一个节点后,节点那一行出现浅蓝色背景的选中,而非checkbox的勾选
方法

Ext.tree.TreePanel.getSelectionModel().getSelectedNode();
Ext.tree.TreePanel.getSelectionModel()获得的是一个TreeSelectionModel对象,
这个TreeSelectionModel目前在Ext中有两个Ext.tree.DefaultSelectionModel和Ext.tree.MultiSelectionModel

Ext.tree.MultiSelectionModel的获取选中节点的方法是getSelectedNodes (),这个返回的是节点数组,Ext.tree.DefaultSelectionModel.getSelectedNode()返回的是单个节点对象
21 选中节点和父节点
1)、父节点选择
function parentclick(node)
    {
        var parent=node.parentNode;   //获取父节点
        var flag=node.getUI().checkbox.checked;   //判断是否选中
        if(parent!=null )  //父节点不为空
        {
            parent.ui.toggleCheck(flag);  //选中
            parent.attributes.checked = flag;   //给值
            parentclick(parent);  //递归调用选中父节点
        }
    }
2)、选择子节点
function treeclick(node)
    { 
        var flag=node.getUI().checkbox.checked;  //获取选中状态
        if (node.hasChildNodes()) {                 //是否有子节点
           node.eachChild(function(child) {         //循环下一级的所有子节点
               child.ui.toggleCheck(flag);          //选中
               child.attributes.checked = flag;     //赋值
                treeclick(child);                   //递归选中子节点
            });
         }
    }

3)、2个函数合并执行
function check(node)
{
    tree.suspendEvents(); //暂停所有监听事件的执行
      treeclick(node);
     parentclick(node);
     tree.resumeEvents();  //重新开始所有监听事件的执行  
}

注:
选中事件发生在子节点,但要通过toggleCheck()改变其父节点未被选中的状态,而一旦改变了父节点未被选中状态为选中状态,就会激发树中的<CheckChange Handler="check(node)" />事件,每次激发,传入的节点值node一直在改变,陷入一个死循环。因此要加入suspendEvents()停止监听事件,执行完后再恢复监听
22  如果使用Ext.QuickTips.init()替换tree.expandAll(),则只显示根节点。
分享到:
评论

相关推荐

    Extjs动态树的实现以及节点拖拽

    总的来说,ExtJS动态树的实现和节点拖拽涉及前端和后端的多个技术层面,包括JavaScript库的使用、事件监听、数据模型的处理、与服务器的通信以及数据库操作。掌握这些技能,开发者可以创建出功能强大且用户体验优秀...

    ExtJs树例子

    总结来说,"ExtJs树例子"涵盖了ExtJS的TreePanel组件的使用,包括数据源配置、节点模型、用户交互、扩展功能等方面的知识。通过学习和实践这个例子,开发者能够熟练掌握在Web应用中创建和管理树形结构的方法。

    Extjs 动态菜单、树节点的增删查改

    提供Extjs树的动态菜单生成,已及对树的增删查改该操作

    Extjs树Demo

    在给定的“Extjs树Demo”中,我们将探讨如何使用ExtJS实现树形结构,这是一种常见的数据可视化方式,用于表示层次结构的数据。 首先,理解ExtJS中的树(Tree)组件是非常重要的。这个组件允许开发者创建可交互、多...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    ExtJS 自定义树组件 节点的操作 搜索 右键菜单

    功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.

    extjs实现动态树

    三、节点操作 1. 添加节点:可以通过`insertChild`方法向现有节点下添加新节点。 2. 删除节点:使用`removeChild`方法移除节点,若需同步更新服务器,需处理`beforeremove`事件。 3. 更新节点:调用`update`方法更新...

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    EXTJS动态树支持checkbox 全选

    2. **数据模型**:定义树节点的数据模型(TreeModel或TreeNode),包含节点的属性,如文本、ID、子节点等。在动态加载场景下,数据模型通常包含加载子节点的方法或URL。 3. **复选框配置**:在树节点上添加复选框,...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    创建一个可编辑的EXTJS树需要以下步骤: 1. **配置TreePanel**:首先,我们需要创建一个TreePanel实例,并为其配置必要的属性,如`rootVisible`(控制是否显示根节点)、`lines`(控制是否显示连接线)和`...

    Extjs树分页组件扩展

    TreeLoader是ExtJS中负责异步加载树节点的类。在原生的TreeLoader中,所有的节点通常是一次性加载或者按需加载(lazy loading)。而在分页场景下,我们希望只加载当前视图所需的节点,而不是全部。通过扩展...

    extjs目录树编辑

    目录树编辑功能是指EXTJS中允许用户对树形结构进行动态操作,包括添加、删除、修改和查询节点。这个功能在许多业务场景中非常实用,例如文件管理系统、权限管理界面等。EXTJS提供了一套完整的API和事件机制,使得...

    EXTJS 树的实例

    `TreeStore`是EXTJS树的数据源,负责管理树节点的数据。你需要定义数据模型(Model),并配置好数据源(如JSON数据)。例如: ```javascript var treeStore = Ext.create('Ext.data.TreeStore', { model: '...

    extjs实现动态树加载菜单

    动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作时,只加载当前所需的树节点数据,而不是一次性加载所有数据。这种技术在处理大量数据或层级结构时尤其有效,因为它避免了前端一次性...

    ExtJS树形结构.docx

    在EXTJS中,树形结构(Tree)是一种用于展示层级数据的组件,它允许用户以图形化的方式浏览和操作层次关系。以下是对标题和描述中所述EXTJS实现简单树状结构的知识点的详细说明: 1. **Ext.onReady**:这是EXTJS...

    完成Ext 拖拽树后对新的树节点顺序进行保存

    本项目主要关注如何在完成拖拽操作后,更新并保存树节点的新顺序。ExtJS是一个强大的JavaScript库,它提供了丰富的组件和功能,用于构建富客户端应用。在ExtJS的树组件中,拖放功能允许用户直观地调整节点的层次结构...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    - `extjs复选框树.js`:这是实现上述功能的JavaScript代码,包括工具类和针对树节点的操作方法。 - `样式文件.css`:可能包含了一些自定义的样式,用于美化复选框和树的显示效果。 - `示例HTML文件.html`:演示如何...

    Extjs4 多选下拉树

    3. **CheckboxModel**: 这个模型允许在树节点上显示复选框,用户可以通过点击复选框来选择或取消选择节点。我们需要配置`checkGroupField`(如果需要分组选择)和`mode`(设置为'SIMPLE'或'MULTI'以支持多选)。 4....

    ExtJs树形结构 ext的简单应用

    综上所述,ExtJs树形结构提供了一种直观且灵活的方式来展示和操作层次化数据,通过理解和掌握其基本用法和扩展功能,开发者可以构建出满足各种需求的树形界面。在项目中,可以结合具体业务需求,进行个性化定制,...

Global site tag (gtag.js) - Google Analytics