ExtJs之结构树 Ext.tree.panel详细用法

1.简单的树

效果图

代码

[javascript]

view plain

copy

print

?

2.使用TreeLoader获得后台数据

[plain]

view plain

copy

print

?

每个节点最后一级必须是叶子节点,否则会出现无限循环 TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果

每个节点最后一级必须是叶子节点,否则会出现无限循环

TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果

list.txt

[plain]

view plain

copy

print

?

[{ text : '01', children : [ { text : '01-01' , leaf : true }, { text : '01-02' , leaf : true } ] },{ text :'02', children : [ { text : '02-01' , leaf : true }, { text : '02-02' , leaf : true } ] }]

[{

text : '01',

children : [

{ text : '01-01' , leaf : true },

{ text : '01-02' , leaf : true }

]

},{

text :'02',

children : [

{ text : '02-01' , leaf : true },

{ text : '02-02' , leaf : true }

]

}]index.jsp

[javascript]

view plain

copy

print

?

3.读取本地JSON数据

[javascript]

view plain

copy

print

?

因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算, 如果退回到每个节点都使用new来生成,又实在太麻烦, 那么能不能让TreeLoader读取本地的JavaScript中的JSON数据,然后生成需要的树节点呢

因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,

如果退回到每个节点都使用new来生成,又实在太麻烦,

那么能不能让TreeLoader读取本地的JavaScript中的JSON数据,然后生成需要的树节点呢

[javascript]

view plain

copy

print

?

4.使用JSP提供后台数据

[plain]

view plain

copy

print

?

树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据, 而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数, 就知道是哪个节点正在执行展开, 如果返回的子节点数据包含leaf:true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子

树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,

而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,

就知道是哪个节点正在执行展开,

如果返回的子节点数据包含leaf:true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子

list.jsp

[javascript]

view plain

copy

print

?

<%@ page language="java" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); //获取node参数,对应的是正在展开的节点id String node = request.getParameter("node"); System.out.println("node="+node); String json = "["+ "{id:1,text:'01',"+ "children:["+ "{id:11,text:'01-01',leaf:true},"+ "{id:12,text:'01-02',leaf:true}"+ "]}"+ ",{id:2,text:'02',"+ "children:["+ "{id:21,text:'02-01',leaf:true},"+ "{id:22,text:'02-02',leaf:true}"+ "]}"+ "]"; response.getWriter().write(json); %>

<%@ page language="java" pageEncoding="UTF-8"%>

<%

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

//获取node参数,对应的是正在展开的节点id

String node = request.getParameter("node");

System.out.println("node="+node);

String json =

"["+

"{id:1,text:'01',"+

"children:["+

"{id:11,text:'01-01',leaf:true},"+

"{id:12,text:'01-02',leaf:true}"+

"]}"+

",{id:2,text:'02',"+

"children:["+

"{id:21,text:'02-01',leaf:true},"+

"{id:22,text:'02-02',leaf:true}"+

"]}"+

"]";

response.getWriter().write(json);

%>

index.jsp

[javascript]

view plain

copy

print

?

5.树的事件

[javascript]

view plain

copy

print

?

listeners: { click: function(node) { Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text); }, dblclick:function(node){ alert('你双击了'+node); }, expandnode:function(node){ alert(node+'展开了'+node.attributes.text); }, collapsenode:function(node){ alert(node+'折叠了'+node.attributes.text); } }

listeners: {

click: function(node) {

Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text);

},

dblclick:function(node){

alert('你双击了'+node);

},

expandnode:function(node){

alert(node+'展开了'+node.attributes.text);

},

collapsenode:function(node){

alert(node+'折叠了'+node.attributes.text);

}

}

6.右边菜单

效果图

list.txt

[plain]

view plain

copy

print

?

[{ text : '01', children : [ { text : '01-01' , leaf : true }, { text : '01-02' , leaf : true } ] },{ text :'02', children : [ { text : '02-01' , leaf : true }, { text : '02-02' , leaf : true } ] }]

[{

text : '01',

children : [

{ text : '01-01' , leaf : true },

{ text : '01-02' , leaf : true }

]

},{

text :'02',

children : [

{ text : '02-01' , leaf : true },

{ text : '02-02' , leaf : true }

]

}]index.jsp

[javascript]

view plain

copy

print

?

7.给树节点设置图片和超链接

list.txt

[plain]

view plain

copy

print

?

[{ text : '01', children : [ { text : '01-01' , leaf : true , icon : 'image/qq.jpg' }, { text : '01-02' , leaf : true , href : 'http://www.baidu.com' } ] },{ text :'02', children : [ { text : '02-01' , leaf : true }, { text : '02-02' , leaf : true } ] }]

[{

text : '01',

children : [

{ text : '01-01' , leaf : true , icon : 'image/qq.jpg' },

{ text : '01-02' , leaf : true , href : 'http://www.baidu.com' }

]

},{

text :'02',

children : [

{ text : '02-01' , leaf : true },

{ text : '02-02' , leaf : true }

]

}]

8.修改树节点的标题

list.txt

[plain]

view plain

copy

print

?

[{ text : '01', children : [ { text : '01-01' , leaf : true }, { text : '01-02' , leaf : true } ] },{ text :'02', children : [ { text : '02-01' , leaf : true }, { text : '02-02' , leaf : true } ] }]

[{

text : '01',

children : [

{ text : '01-01' , leaf : true },

{ text : '01-02' , leaf : true }

]

},{

text :'02',

children : [

{ text : '02-01' , leaf : true },

{ text : '02-02' , leaf : true }

]

}]index.jsp

[javascript]

view plain

copy

print

?

9.树的拖放

[plain]

view plain

copy

print

?

如果让树节点可以自由拖放,创建TreePanel时设置enableDD:true即可 不过直接设置只能实现叶子与枝干和根之间的拖放,叶子不能拖放到叶子下

如果让树节点可以自由拖放,创建TreePanel时设置enableDD:true即可

不过直接设置只能实现叶子与枝干和根之间的拖放,叶子不能拖放到叶子下

list.txt

[plain]

view plain

copy

print

?

[{ text : '01', children : [ { text : '01-01' , leaf : true }, { text : '01-02' , leaf : true } ] },{ text :'02', children : [ { text : '02-01' , leaf : true }, { text : '02-02' , leaf : true } ] }]

[{

text : '01',

children : [

{ text : '01-01' , leaf : true },

{ text : '01-02' , leaf : true }

]

},{

text :'02',

children : [

{ text : '02-01' , leaf : true },

{ text : '02-02' , leaf : true }

]

}]inde.jsp

[javascript]

view plain

copy

print

?

9.1 节点拖放的三种形式

[plain]

view plain

copy

print

?

append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志 above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线 below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头

append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志

above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线

below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头

9.2叶子不能append

[javascript]

view plain

copy

print

?

tree.on('nodedragover',function(e){ //获取事件的对象 var node = e.target;//当鼠标指针经过的节点 if(node.leaf){ n.leaf = false; } return true; });

tree.on('nodedragover',function(e){

//获取事件的对象

var node = e.target;//当鼠标指针经过的节点

if(node.leaf){

n.leaf = false;

}

return true;

});

9.3 判断拖放的目标

[javascript]

view plain

copy

print

?

tree.on('nodedrop',function(e){ Ext.Msg.alert('消息','我们的节点 '+e.dropNode+' 掉到了 '+e.target+' 上,掉落方式是 '+ e.point); });

tree.on('nodedrop',function(e){

Ext.Msg.alert('消息','我们的节点 '+e.dropNode+' 掉到了 '+e.target+' 上,掉落方式是 '+ e.point);

});

10.树的过滤器Ext.tree.TreeFilter

list.txt

[javascript]

view plain

copy

print

?

[{ text : '01', children : [ { text : '01-01' , leaf : true }, { text : '01-02' , leaf : true } ] },{ text :'02', children : [ { text : '02-01' , leaf : true }, { text : '02-02' , leaf : true } ] }]

[{

text : '01',

children : [

{ text : '01-01' , leaf : true },

{ text : '01-02' , leaf : true }

]

},{

text :'02',

children : [

{ text : '02-01' , leaf : true },

{ text : '02-02' , leaf : true }

]

}]index.jsp

[javascript]

view plain

copy

print

?

11.利用TreeSorter对树进行排序

[plain]

view plain

copy

print

?

TreeSorter是一个专门用来对树节点进行排序的工具 caseSensitive 区分大小写,默认为false不区分大小写 dir 排列方式 folderSort 将叶子节点排列到非叶子节点后面 默认为false leafAttr 判断叶子节点的标志,默认为leaf,如果node中存在leaf:true参数,就认为是叶子节点 property 根据节点属性排序,默认为text

TreeSorter是一个专门用来对树节点进行排序的工具

caseSensitive 区分大小写,默认为false不区分大小写

dir 排列方式

folderSort 将叶子节点排列到非叶子节点后面 默认为false

leafAttr 判断叶子节点的标志,默认为leaf,如果node中存在leaf:true参数,就认为是叶子节点

property 根据节点属性排序,默认为text

代码

[javascript]

view plain

copy

print

?

new Ext.tree.TreeSorter(tree,{ folderSort : true });

new Ext.tree.TreeSorter(tree,{

folderSort : true

});

12.树形节点视图 Ext.tree.TreeNodeUI

[plain]

view plain

copy

print

?

Ext.treeTreeNodeUI是生成Ext.tree.TreeNode实例时默认使用的视图组件. 在生成每一个Ext.tree.TreeNode实例时,它会先查找this.attributes.uiProvider和this.defaultUI. 如果有任何一个属性存在,它就会使用这个属性创建自己的视图. 如果这两个属性都不存在就会适应Ext.tree.TreeNodeUI创建视图. 因此,在属性结构中通常都使用Ext.tree.TreeNodeUI作为树形节点的视图. 可以通过node.ui的方式获得某个Ext.tree.TreeNode实例对应的Ext.tree.TreeNodeUI

Ext.treeTreeNodeUI是生成Ext.tree.TreeNode实例时默认使用的视图组件.

在生成每一个Ext.tree.TreeNode实例时,它会先查找this.attributes.uiProvider和this.defaultUI.

如果有任何一个属性存在,它就会使用这个属性创建自己的视图.

如果这两个属性都不存在就会适应Ext.tree.TreeNodeUI创建视图.

因此,在属性结构中通常都使用Ext.tree.TreeNodeUI作为树形节点的视图.

可以通过node.ui的方式获得某个Ext.tree.TreeNode实例对应的Ext.tree.TreeNodeUI

效果图 list.txt

[plain]

view plain

copy

print

?

[{ text : '01', children : [ { text : '01-01' , leaf : true , checked : false }, { text : '01-02' , leaf : true , checked : false } ] },{ text :'02', children : [ { text : '02-01' , leaf : true , checked : false }, { text : '02-02' , leaf : true , checked : false } ] }]

[{

text : '01',

children : [

{ text : '01-01' , leaf : true , checked : false },

{ text : '01-02' , leaf : true , checked : false }

]

},{

text :'02',

children : [

{ text : '02-01' , leaf : true , checked : false },

{ text : '02-02' , leaf : true , checked : false }

]

}]index.jsp

[javascript]

view plain

copy

print

?

[plain]

view plain

copy

print

?

treeNodeUI的方法 getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的 标签,包含图标的标签,包含文字的标签部分 hide()和show()函数可以控制树形节点是否隐藏 isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回false

treeNodeUI的方法

getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的

标签,包含图标的标签,包含文字的标签部分

hide()和show()函数可以控制树形节点是否隐藏

isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回false

13.表格与树的结合 Ext.ux.tree.ColumnTree()

[plain]

view plain

copy

print

?

Ext.ux.tree.ColumnTree属于EXT的扩展件,为了使用Ext.ux.tree.ColumnTree, 我们首先需要引用Ext发布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三个文件 需要注意的是:我们要给每一个节点设置uiProvider:'col',这样在生成树时TreeLoader会预先定义的uiProviders参数中取得'col'对应的Ext.ux.tree.ColumnNodeUI,用它来作为显示树形节点的视图

Ext.ux.tree.ColumnTree属于EXT的扩展件,为了使用Ext.ux.tree.ColumnTree,

我们首先需要引用Ext发布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三个文件

需要注意的是:我们要给每一个节点设置uiProvider:'col',这样在生成树时TreeLoader会预先定义的uiProviders参数中取得'col'对应的Ext.ux.tree.ColumnNodeUI,用它来作为显示树形节点的视图效果图

list.jsp

[javascript]

view plain

copy

print

?

<%@ page language="java" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); //获取node参数,对应的是正在展开的节点id String node = request.getParameter("node"); System.out.println("node="+node); String json = "["+ "{km:'深入浅出ExtJs',ks:'12month',js:'',uiProvider:'col',"+ "children:["+ "{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+ "{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+ "]}"+ ",{km:'深入浅出Java',ks:'10month',js:'',uiProvider:'col',"+ "children:["+ "{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+ "{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+ "]}"+ "]"; response.getWriter().write(json); %>

<%@ page language="java" pageEncoding="UTF-8"%>

<%

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

//获取node参数,对应的是正在展开的节点id

String node = request.getParameter("node");

System.out.println("node="+node);

String json =

"["+

"{km:'深入浅出ExtJs',ks:'12month',js:'',uiProvider:'col',"+

"children:["+

"{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+

"{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+

"]}"+

",{km:'深入浅出Java',ks:'10month',js:'',uiProvider:'col',"+

"children:["+

"{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+

"{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+

"]}"+

"]";

response.getWriter().write(json);

%>

index.jsp

[javascript]

view plain

copy

print

?