博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
33. Extjs中的tree节点的操作
阅读量:6084 次
发布时间:2019-06-20

本文共 2386 字,大约阅读时间需要 7 分钟。

 
转自:https://blog.csdn.net/masterShaw/article/details/51354351?utm_source=blogkpcl9
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()改变其父节点未被选中的状态,而一旦改变了父节点未被选中状态为选中状态,就会激发树中的事件,每次激发,传入的节点值node一直在改变,陷入一个死循环。因此要加入suspendEvents()停止监听事件,执行完后再恢复监听

22  如果使用Ext.QuickTips.init()替换tree.expandAll(),则只显示根节点。

参考url:http://blog.sina.com.cn/s/blog_656a17cc0101f6w7.html

转载于:https://www.cnblogs.com/sharpest/p/7623082.html

你可能感兴趣的文章
简单说一下UWP中的JumpList
查看>>
unity将object[]或者string对象转换成枚举enum
查看>>
PostgreSQL 10.1 手册_部分 II. SQL 语言_第 9 章 函数和操作符_9.19. 范围函数和操作符...
查看>>
以太坊系列之六: p2p模块--以太坊源码学习
查看>>
使用scikit-learn解决文本多分类问题(附python演练)
查看>>
2018 年最值得关注的 JavaScript 趋势
查看>>
什么是区块链?超级账本 Brian Behlendorf 从五个方面教你认识
查看>>
Linux中的帮助功能
查看>>
针对Android的Pegasus恶意软件版本和针对iOS的有什么不同?
查看>>
全局探色器
查看>>
Hive Export和Import介绍及操作示例
查看>>
http://mongoexplorer.com/ 一个不错的 mongodb 客户端工具。。。
查看>>
Xcode 4.3 使用xcodebuild命令编译项目环境设置
查看>>
上传jar包到nexus私服
查看>>
Why Namespace? - 每天5分钟玩转 OpenStack(102)
查看>>
Project:如何分析项目中的资源分配情况
查看>>
HDU 4803 Poor Warehouse Keeper (贪心+避开精度)
查看>>
小错误汇总
查看>>
AVX2整数向量运算
查看>>
POJ2559 HDU1506 ZOJ1985 Largest Rectangle in a Histogram【堆栈】
查看>>