ext TreePanel树节点操作
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(),则只显示根节点。
ext TreePanel树节点操作的更多相关文章
- ext 树节点操作
ext 树节点操作 tree :树 node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parent ...
- ExtJS6 TreePanel树节点合上展开显示不同图标
TreePanel的节点如包含子节点,可在展开/合上时显示不同的图标,增强客户端效果,提高用户体验.非常简单,使用TreePanel的两个事件:beforeitemexpand和beforeitemc ...
- Extjs 树节点操作常用属性
tree: 树 node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parentNode 4. ...
- ExtJs 4.2 treePanel 点击树节点 传送参数到后台(多个参数)
//***********************************************左边树开始********************************************** ...
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
- Extjs 4.2 右键菜单树节点(,选择逆,废除)
写自己的最新版本号extjs4.2树节点的操作,记录它,可能在将来被用于. var tree = new Ext.tree.TreePanel({ flex: 1, animate: true, au ...
- Extjs Ext.TreePanel
TreePanel 简单实例. <link rel="stylesheet" href="Js/ext-4.2/resources/css/ext-all-nept ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- JPA,EclipseLink 缓存机制学习(一) 树节点搜索问题引发的思考
最近在项目在使用JPA+EclipseLink 的方式进行开发,其中EclipseLink使用版本为2.5.1.遇到一些缓存方面使用不当造成的问题,从本篇开始逐步学习EclipseLink的缓存机制. ...
随机推荐
- openresty开发系列27--openresty中封装redis操作
openresty开发系列27--openresty中封装redis操作 在关于web+lua+openresty开发中,项目中会大量操作redis, 重复创建连接-->数据操作-->关闭 ...
- PHP IE9 AJAX success 返回 undefined 问题解决
jquery的AJAX返回结果为undefined,并且有“由于出现错误c00ce56e”的错误提示.这个问题是由于IE9不能解析其他编码而产生的.解决这个问题之需要按照W3C规范,声明一下编码为ut ...
- Nginx配置自定义的403页面
1.开启nginx的状态码,虚拟主机配置中加入下边一段 location /nginx_status{ stub_status on; access_log off; } 或着在nginx的http模 ...
- 关于PF_INET和AF_INET的区别
在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0);然后在绑定本地地址或连接远程地址时需要初始化sockaddr_in结构 ...
- HTML布局排版5 测试某段html页面1
除了div,常见的还有用table布局,这里直接用前面博文的页头页尾,如下面的页面的部分,是个简单的table.该页面样式,如果拖动浏览器,可以看到table和文本框总是居中,但是文本框下方那两个按钮 ...
- 【Leetcode_easy】897. Increasing Order Search Tree
problem 897. Increasing Order Search Tree 参考 1. Leetcode_easy_897. Increasing Order Search Tree; 完
- CRC校验的问题(c语言实现CRC校验和)
1. 前面的数 7A 01 00,计算的结果是0X4920 2. 那么把数据CRC加上 3. 测试代码,计算出来的结果对不上,什么情况?可是我把参考模型的全部都选了一遍,也对不上其中一个!!! 4. ...
- 自组织特征映射神经网络(SOFM)
1981年芬兰 Helsink 大学的 T·Kohonen 教授提出一种自组织特征映射网 (Self-Organizing Feature Map , SOFM ), 又称 Kohonen 网 . K ...
- package ‘RPMM’ is not available (for R version 3.6.0)
当我们用启动R安装一些R包的时候 提示: Warning: unable to access index for repository https://mirrors.eliteu.cn/CRAN/s ...
- lnmp二级域名配置相关
阿里云那域名解析那有误读 我在偏远的电信网选择中国联通解析死活解析不出来 以上这么配置就对了....选择默认.瞬间解析出来.... 出于对nginx 配置不够熟悉 后来一点点理出来. 不带www 也正 ...