http://blog.sina.com.cn/s/blog_656a17cc0101f6w7.html
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(),则只显示根节点。
Ext TreePanel实现单选等功能
在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
扩展的功能点有:
一、支持只对树的叶子进行选择
只有当返回的树结点属性leaf = true 时,结点才有checkbox可选
使用时,只需在声明树时,加上属性 onlyLeafCheckable: true 既可,默认是false
二、支持对树的单选
只允许选择一个结点
使用时,只需在声明树时,加上属性 checkModel: "single" 既可
三、支持对树的级联多选
当选择结点时,自动选择该结点下的所有子结点,或该结点的所有父结点(根结点除外),特别是支持异步,当子结点还没显示时,会从后台取得子结点,然后将其选中/取消选中
使用时,只需在声明树时,加上属性 checkModel: "cascade" 或"parentCascade"或"childCascade"既可
cascade :级联选中所有父结点和子结点
parentCascade :级联选中所有父结点
childCascade :级联选中所有子结点
四、添加"check"事件
该事件会在树结点的checkbox发生改变时触发
使用时,只需给树注册事件,如:
tree.on("check",function(node,checked){...});
默认情况下,checkModel为 'multiple',也就是多选;onlyLeafCheckable为false,所有结点都可选
使用方法:在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 既可.
例如:
Js代码
- var tree = new Ext.tree.TreePanel({
- el:'tree-ct',
- width:568,
- height:300,
- checkModel: 'cascade', // 对树的级联多选
- onlyLeafCheckable: false,//对树所有结点都可选
- animate: false,
- rootVisible: false,
- autoScroll:true,
- dwrCall:Tmplt.getTmpltTree,
- baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性
- }),
- root: new Ext.tree.AsyncTreeNode({ id:'0' })
- });
- tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
- tree.render();
- var tree = new Ext.tree.TreePanel({
- el:'tree-ct',
- width:568,
- height:300,
- checkModel: 'cascade', //对树的级联多选
- onlyLeafCheckable: false,//对树所有结点都可选
- animate: false,
- rootVisible: false,
- autoScroll:true,
- loader: new Ext.tree.DWRTreeLoader({
- dwrCall:Tmplt.getTmpltTree,
- baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性
- }),
- root: new Ext.tree.AsyncTreeNode({ id:'0' })
- });
- tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
- tree.render();
需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,
如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } 就行了
- 实现单选功能:
- this.on('checkchange',this.check,this);
- getNodes:function(treePanel){
- var startNode = treePanel.getRootNode();
- var r = [];
- var f = function(){
- r.push(this);
- };
- startNode.cascade(f);
- return r;
- },
- check : function(node,bool) {
- if(!bool){
- return;
- }
- if(this.checkModel=='single'){
- var nodes =this.getNodes(this);
- if(nodes && nodes.length>0){
- for(var i=0,len=nodes.length;i
- if(nodes[i].id!=node.id){
- if(nodes[i].getUI().checkbox){
- nodes[i].getUI().checkbox.checked = false;
- nodes[i].attributes.checked=false;
- }
- }
- }
- }
- }
- }
相关推荐
Ext2.0不仅仅实现了复选框的树形菜单,而且使得在选中某个节点时,如果有子节点,那么就能够将所有的字节点全部选中,当然你也可以直接选择你希望的节点。但是,当你第一次选中某个有子节点但是子节点并没有展开的...
ext 关于树目录的函数,关键对象,方法的操作说明,和相关ECLIPSE上的插件安装。
由于项目的需要最近在...例子里面包括了对tree增、改、删、拖动、子父节点的选则取消、右键操作的基本功能。例子可能会有bug如果那位网友发现了请留言告知以便做及时修改。例子用的ext是4.2的版本需要的话就快下载吧
一个基于Ext4.2可增删树的例子,解决了Ext不能动态改变leaf属性的问题。该树可自动判断当增删操作后,重新更新自我状态以便显示为叶节点或者非叶节点。
ext的树的实例.通过右键菜单操作树节点对数据库进行增删改查.
3.5. 这种装配树节点的形式,真是让人头大。 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你...
3.5. 这种装配树节点的形式,真是让人头大。 3.5.1. TreeLoader外传 之 JsonPlugin 3.5.2. TreeLoader外传 之 读取本地json 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2...
3.5. 这种装配树节点的形式,真是让人头大。 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷...
实现的树的增删改操作,并且添加了权重,及树节点的排列顺序, 备以后使用,同时希望能为用的的兄弟姐妹提供以下帮助,不足之处希望多多指点
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
10.11 树形节点视图——Ext.tree.TreeNodeUI 10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout...
今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态。网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来。 在Extjs3.x和4.x版本中的处理方法是不一样...
需求 要求生成一颗部门树,初始只列出根部门 当点击一个部门节点时,动态载入该部门下的直属子部门,并展开该部门节点 部门节点要求支持右键单击事件,当点击右键时,列出相关操作菜单 二. 关键类 这里主要涉及Ext ...
rar包:一个Web工程, 主要有,利用Spring-ldap对LDAP的基本操作(查询,增删改);Extjs实现的对Ldap的树状结构的显示,结构有点类似Softerra LDAP;一个测试类。 pdf:spring-ldap-reference.pdf Extjs.pdf ...
-增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...
传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document...
的内容,正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象 )仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐 藏或显示某一...
10.11 树形节点视图——Ext.tree.TreeNodeUI 10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout...
目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件,不需要复杂的操作即可生产,同时支持动态从数据库引入数据。 dTree可以不用添加任何页面而直接用代码实现多个栏目,并可以实现无限分级,下面是...