`

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树的动态菜单生成,已及对树的增删查改该操作

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

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

    Extjs改变树节点的勾选状态点击按钮将复选框去掉

    今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态。网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来。 在Extjs3.x和4.x版本中的处理方法是不一样...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    15.由菜单树操作右边的工作区域、完成管理员管理文章功能 16.评审文章魔模块前后台、查看我的评审 17.管理评审、完成查看我的评审功能 18.邮件管理:我的邮件前台以及后台界面搭建 19.邮件管理:发件箱、阅读邮件、...

    extjs表格(表格后台数据读,分页),树(后台数据读取,复选框联动)的基本操作示例

    实现了从后台读取数据,并进行分页显示,从后台读取treepanel数据,显示,并实现了点击节点复选框的时候,出现父节点和子节点的联动,运行环境是vs2008

    轻松搞定Extjs_原创

    第二十五章:动态操作树节点 200 一、概述 200 二、基本操作 201 三、事件 203 四、小结 204 第二十六章:远程获取节点数据 205 一、 概述 205 二、异步加载解析 206 三、小结 212 第二十七章:选项卡面板——Ext....

    精通JS脚本之ExtJS框架.part2.rar

    10.11 树形节点视图——Ext.tree.TreeNodeUI 10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout...

    ExtJS 刷新后如何默认选中刷新前最后一次选中的节点

    在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到...

    精通JS脚本之ExtJS框架.part1.rar

    10.11 树形节点视图——Ext.tree.TreeNodeUI 10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout...

    对LDAP的基本操作(Spring-ldap)+Ext实现显示LDAP的树状结构

    资源没有对LDAP创建的内容。 资源主要有: rar包:一个Web工程, 主要...(需要改正的是extjs里那个节点的id要加上前面的id才行,比如ou=mail; 那它的子节点cn=wang的id应该是cn=wang,ou=mail;要不getlist会抛异常的)

    EXTJS总结.txt

    传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document...

    Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例

    代码如下://只要要在treepanel中配置一下viewConfig即可,如果是两棵树之间,两棵树都要配置 viewConfig:{ plugins :{ ptype:’treeviewdragdrop’, appendOnly:true //只能拖着带非叶节点上 }, listeners:{/...

    javascrip上百技术总集

    外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护...ExtJS js访问xml之遍历节点树 js访问xml之创建xmlDocument js访问xml之根节点操作 js访问xml之节点操作(1) js访问xml之节点...

    ext4.2 目录树

    由于项目的需要最近在...例子里面包括了对tree增、改、删、拖动、子父节点的选则取消、右键操作的基本功能。例子可能会有bug如果那位网友发现了请留言告知以便做及时修改。例子用的ext是4.2的版本需要的话就快下载吧

    EXT教程EXT用大量的实例演示Ext实例

    3.5. 这种装配树节点的形式,真是让人头大。 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷...

    EXT2.0中文教程

    3.5. 这种装配树节点的形式,真是让人头大。 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你...

    Ext Js权威指南(.zip.001

    7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...

    利用Ext Js生成动态树实例代码

    需求 要求生成一颗部门树,初始只列出根部门 当点击一个部门节点时,动态载入该部门下的直属子部门,并展开该部门节点 部门节点要求支持右键单击事件,当点击右键时,列出相关操作菜单 二. 关键类 这里主要涉及Ext ...

    Ext 开发指南 学习资料

    3.5. 这种装配树节点的形式,真是让人头大。 3.5.1. TreeLoader外传 之 JsonPlugin 3.5.2. TreeLoader外传 之 读取本地json 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2...

Global site tag (gtag.js) - Google Analytics