`
endual
  • 浏览: 3560885 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs4 tree操作

 
阅读更多

Extjs tree 如何获得选中的节点

 (2011-04-27 17:35:51)
标签: 

it

分类: extjs

这里说的选中是指鼠标点击一个节点后,节点那一行出现浅蓝色背景的选中,而非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()返回的是单个节点对象。




extJS 树节点操作

    博客分类: 
  • 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(),则只显示根节点。
分享到:
评论

相关推荐

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    ExtJs_TreeDemo

    树形菜单(Tree)是ExtJs中的一个重要组件,它允许用户以层级结构展示数据,广泛应用于文件系统、组织结构或者导航菜单等场景。"ExtJs_TreeDemo"是一个示例,展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中,...

    Extjs tree实例【源代码】

    本例旨在说明extjs的tree操作,后台操作很简陋。给入门同学一个简单指导。 本例,存在几个明显的bug,但不影响本意,见谅。 需要C#无bug版的同学,请留下邮箱。 最后:祝自己在13年,顺利完成所有计划!

    extjs ajax tree(js动态树,无需递归)

    ExtJS AJAX Tree是一种基于JavaScript的动态树形结构,它利用AJAX技术来异步加载节点数据,无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度,尤其是在处理大量数据时。ExtJS是一个功能丰富的...

    ExtJS4.2 tree 级联选择

    在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有子节点也会被自动选中,反之亦然,如果取消选中父节点,其所有子节点也将被取消选中。...

    Extjs的tree

    4. **节点操作** - **展开/折叠**:用户可以点击节点来展开或折叠其子节点,也可以通过API实现。 - **选择**:TreePanel支持单选或多选模式,用户可以选择节点,也可以通过代码选择或取消选择。 - **拖放**:通过...

    Extjs4 tree report

    标题“Extjs4 tree report”涉及的技术点主要集中在ExtJS 4框架的树形报表功能。ExtJS是一个用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件模型和强大的数据绑定机制。在ExtJS 4中,树形控件...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...

    extjs-tree.zip_extjs tree

    ExtJS Tree是一个强大的JavaScript库,专门用于创建交互式的树形结构。这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的...

    extjs tree

    ExtJS Tree是基于ExtJS框架实现的一种数据结构展示方式,它主要用于展示层级关系的数据,例如组织结构、文件系统等。ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,提供了丰富的组件化功能和...

    extjs4 treeGrid实例

    在ExtJS4中,TreeGrid主要由`Ext.tree.Panel`类定义,它扩展了`Ext.grid.Panel`,因此具备了表格的所有功能,同时也包含了树结构的特性。 创建一个TreeGrid的第一步是定义模型(Model)。模型定义了数据的字段及其...

    extjs tree示例

    总的来说,ExtJS Tree 示例展示了如何将动态数据与用户界面相结合,提供一个直观且功能丰富的树状导航系统,同时通过Access数据库支持对树结构的增删操作。通过深入理解和实践,你可以创建出适应各种业务需求的高效...

    动态加载extjs tree

    4. **expand事件**: 当用户展开一个节点时,Tree会触发`expand`事件。在事件监听器中,可以调用TreeStore的`load`方法,传入需要加载的节点ID,向服务器发送请求获取子节点数据。 5. **load事件**: TreeStore的`...

    ExtJs Tree

    通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...

    extjs tree 异步加载树型

    ExtJS Tree 是一个基于 ExtJS 框架的组件,用于构建可交互的、层级结构的树形控件。在 Web 开发中,它经常被用来展示目录结构、组织架构或者复杂的分类数据。异步加载树型是 ExtJS Tree 的一个重要特性,允许只在...

    Extjs chekboxtree PagingTreeLoader 多选、分页

    "Chekboxtree"是ExtJS中的一种特殊树形组件,它允许用户通过复选框选择树节点,这在需要对树结构数据进行批量操作或选择时非常实用。CheckboxTree.js文件可能包含了实现这种功能的核心代码,包括复选框的渲染、选中...

    extjs开发tree效果

    ExtJS是一种基于JavaScript的富客户端应用框架,由Sencha公司开发。它提供了丰富的组件库,用于构建复杂...通过阅读和学习这个示例,开发者可以掌握如何创建、操作和扩展自定义的树形组件,提升在Web应用开发中的能力。

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    总结来说,这个实例展示了如何将前端的ExtJS4框架,特别是其Accordion布局和Ext.tree.Panel组件,与Servlet和Struts2后端框架集成,利用JSON进行数据交换,来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...

Global site tag (gtag.js) - Google Analytics