extjs 树节点操作

最新推荐文章于 2017-12-07 22:46:00 发布

web学习中

最新推荐文章于 2017-12-07 22:46:00 发布

阅读量1.2k

点赞数

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.csdn.net/qq_27261867/article/details/71172383

版权

extjs 专栏收录该内容

1 篇文章 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();

项目中通常获取节点选中父节点或全部子节点(代码如下)：

tree.on('checkchange', function(node) { 
	 tree.suspendEvents(); //暂停所有监听事件的执行
     treeclick(node);
     parentclick(node);
     tree.resumeEvents();  //重新开始所有监听事件的执行   
	}, tree);
	//选中父节点
function parentclick(node){
	   var parentNode = node.parentNode;//获取父节点
              if (parentNode != null) {
                  var isNotChecked = false;
                  var someChecked = false;
                  var childCount = parentNode.childNodes.length;
                  for (var i = 0; i < childCount; i++) {
                      var child = parentNode.childNodes[i];
                      if (child.attributes.checked) {
                          someChecked = true;
                      } else {
                    	  isNotChecked = true;
                      }
                  }
                   if (someChecked) {
                      parentNode.attributes.checked = true;
                      parentNode.ui.toggleCheck(true);
                  }
                 else if (isNotChecked) {
                      parentNode.attributes.checked = false;
                      parentNode.ui.toggleCheck(false);
                  }
  
                  parentclick(parentNode);//递归选中父节点
              }
}
//选择子节点
function treeclick(node){  
	 var isChecked = node.attributes.checked;//获取选中状态
     if (node.hasChildNodes()) {                 //是否有子节点
       node.eachChild(function(child) {         //循环下一级的所有子节点
           child.ui.toggleCheck(isChecked);          //选中
           child.attributes.checked = isChecked;     //赋值
            treeclick(child);                   //递归选中子节点
        });
     }
}