关闭

ext 树节点的一些常用操作

404人阅读 评论(0) 收藏 举报
分类:

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=newExt.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)
   {
       varparent=node.parentNode;  //获取父节点
       varflag=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()改变其父节点未被选中的状态,而一旦改变了父节点未被选中状态为选中状态,就会激发树中的<CheckChangeHandler="check(node)"/>事件,每次激发,传入的节点值node一直在改变,陷入一个死循环。因此要加入suspendEvents()停止监听事件,执行完后再恢复监听

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:164919次
    • 积分:2793
    • 等级:
    • 排名:第13294名
    • 原创:90篇
    • 转载:83篇
    • 译文:0篇
    • 评论:16条
    博客专栏
    最新评论