Extjs-树 Ext.tree.TreePanel
1.简单的树
效果图
代码
2.使用TreeLoader获得后台数据
每个节点最后一级必须是叶子节点,否则会出现无限循环
TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果list.txt
[{
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 }
]
}]因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,
如果退回到每个节点都使用new来生成,又实在太麻烦,
那么能不能让TreeLoader读取本地的JavaScript中的JSON数据,然后生成需要的树节点呢树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,
而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,
就知道是哪个节点正在执行展开,
如果返回的子节点数据包含leaf:true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子list.jsp
<%@ 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
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
[{
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 }
]
}]list.txt
[{
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 }
]
}]list.txt
[{
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 }
]
}]如果让树节点可以自由拖放,创建TreePanel时设置enableDD:true即可
不过直接设置只能实现叶子与枝干和根之间的拖放,叶子不能拖放到叶子下list.txt
[{
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 }
]
}]append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志
above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线
below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头9.2叶子不能append
tree.on('nodedragover',function(e){
//获取事件的对象
var node = e.target;//当鼠标指针经过的节点
if(node.leaf){
n.leaf = false;
}
return true;
});9.3 判断拖放的目标
tree.on('nodedrop',function(e){
Ext.Msg.alert('消息','我们的节点 '+e.dropNode+' 掉到了 '+e.target+' 上,掉落方式是 '+ e.point);
});10.树的过滤器Ext.tree.TreeFilter
list.txt
[{
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 }
]
}]TreeSorter是一个专门用来对树节点进行排序的工具
caseSensitive 区分大小写,默认为false不区分大小写
dir 排列方式
folderSort 将叶子节点排列到非叶子节点后面 默认为false
leafAttr 判断叶子节点的标志,默认为leaf,如果node中存在leaf:true参数,就认为是叶子节点
property 根据节点属性排序,默认为text代码
new Ext.tree.TreeSorter(tree,{
folderSort : true
});12.树形节点视图 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
[{
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 }
]
}]
treeNodeUI的方法
getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的
标签,包含图标的![]()
标签,包含文字的标签部分
hide()和show()函数可以控制树形节点是否隐藏
isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回falseExt.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
<%@ 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