ext 树节点操作

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

时间: 2024-08-10 01:59:44

ext 树节点操作的相关文章

Ext 4.2树节点搜索功能

注,如果拿到的节点Type是treeNode这样的类型,你的Ext版本和笔者的Ext版本并不相同,据网上说treeNode是比较老的Ext版本.笔者使用的类型是Ext.data.NodeInterface. 来看正文,因为工作需要,公司使用的是Ext这个比较完善的前端Js框架,最近写到树的节点查询时,发现网上的资料全部都是手动迭代,更有甚者搬出了Jquery,这让我很纳闷,前面说了Ext这么完善的框架会蠢到连个树的搜索功能都没有?翻阅API后,不断尝试,给出以下一行代码即可做到Ext树查找节点功

Ext树控件第一次勾选父节点子节点没选中

项目中同事提出了这样一个bug,为了解决这个问题,牛逼闪闪的码农登场了,该码农专制各种公交抢上抢下抢座位,专制各种偷鸡摸狗,专制各种广场舞大妈扰民,专制各种不服,总之哪里有不平哪里就有撒哥的身影 扯淡结束,进入今天的正题 问题: 第一次勾选父节点子节点竟然没选中,逆天了啊 初步分析: 可能是之前代码的逻辑错误造成的,随进入调试阶段... 调试中发现该参数为空(原来写代码的也太没素质了), 没有内容然后想到没有内容导致下面的子节点不能便利出来,所以出来后没有选中,嘿嘿 然后加上该参数,接着查看然后

Extjs 4.2 右键菜单树节点(,选择逆,废除)

写自己的最新版本号extjs4.2树节点的操作,记录它,可能在将来被用于. var tree = new Ext.tree.TreePanel({ flex: 1, animate: true, autoScroll: true, anchor: '100% 93%', store: new Ext.data.TreeStore({ root:{ expanded: true, text:'A', children:[{ expanded: true, text:'1', children:[{

树节点

private void zimulu(TreeNode node)//在点开节点的一瞬间,解析当前目录的第三级目录 { try//对错误或者权限不作处理 { //根据获得的完整目录得到该目录下的子目录 foreach (var dirinfor in new DirectoryInfo(node.Tag.ToString()).GetDirectories()) { //依据目录的完整目录获取其子目录,否则找不到文件 //以子目录的文件名为名称创建树节点 var n = new TreeNod

(转载)html dom节点操作(获取/修改/添加或删除)

DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节

Trie 字典树 删除操作

字典树的删除操作: 1 没找到直接返回 2 找到叶子节点的时候,叶子节点的count标志清零,代表不是叶子节点了 3 如果当前节点没有其他孩子节点的时候,可以删除这个节点 判断是否需是叶子节点,就检查叶子节点的count标志就可以了. 判断是否有其他孩子节点就需要循环26个节点了,如果都为空,那么就没有其他孩子节点了. #include <stdio.h> #include <stdlib.h> #include <iostream> #include <vect

JPA,EclipseLink 缓存机制学习(一) 树节点搜索问题引发的思考

最近在项目在使用JPA+EclipseLink 的方式进行开发,其中EclipseLink使用版本为2.5.1.遇到一些缓存方面使用不当造成的问题,从本篇开始逐步学习EclipseLink的缓存机制. 一.树节点搜索问题出现 故事是这样的:项目中有一个对树节点搜索的需求,如下图中所示,按照前缀匹配查询节点名称中包含OK的节点,将返回下图中的数据结构.基本实现就是:1.先查找出OK节点,然后根据该节点的父节点id获得父节点,也就是PERSON2结点,同样按照PERSON2的父结点id找到节点ROO

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &

原生JS的DOM节点操作

DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节点. 操作DOM节点的方式无非就是:创建.添加(插入).移除.替换.查找(获取).克隆DOM节点. 创建文本节点:var newText = document.createTextNode('文本节点');创建标签节点:var newNode = document.createElement('di