ext 树节点操作

以你之姓@ 2024-02-19 16:37 46阅读 0赞

###     ###

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();

这里说的选中是指鼠标点击一个节点后，节点那一行出现浅蓝色背景的选中，而非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）、选择子节点

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()，则只显示根节点。