目录：
1.最简单的树
2.有孙子节点的树
3.事件处理
4.带链接的树
5.动态加载树
6.动态节点和静态节点混用，及树的属性和节点属性设置
7.TreeSelectionModel选择模型
8.可编辑的树
9.按指定属性进行排序
10.替换Tree中图片
一：最简单的树
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
})
//添加子节点
root.appendChild(new Ext.tree.TreeNode({
id:"child1",
text:"子节点1"
}))
var treePanel = new Ext.tree.TreePanel({
renderTo:"TestTree",
width:100,
height:100,
root:root //根节点，
})
})
二：有孙子节点的树
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
})
//子节点
var childNode1 = new Ext.tree.TreeNode({
id:"chileNode1",
text:"子节点1"
})
//孙子节点
var gChildNode1 = new Ext.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1"
})
//孙子节点
var gChildNode2 = new Ext.tree.TreeNode({
id:"gChildNode2",
text:"孙子节点2"
})
//孙子节点
var gChildNode3 = new Ext.tree.TreeNode({
id:"gChildNode3",
text:"孙子节点3"
})
childNode1.appendChild(gChildNode1);
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
var childNode2 = new Ext.tree.TreeNode({
id:"chileNode2",
text:"子节点2"
})
//子节点
var childNode3 = new Ext.tree.TreeNode({
id:"chileNode3",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
var treePanel = new Ext.tree.TreePanel({
renderTo:"TestTree",
width:300,
height:400,
root:root
})
})
三：事件处理
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
})
//添加子节点
root.appendChild(new Ext.tree.TreeNode({
id:"child1",
text:"子节点1"
}))
var treePanel = new Ext.tree.TreePanel({
renderTo:"TestTree",
width:400,
height:300,
root:root
});
//事件处理
treePanel.on("click",function(node,event){//根节点事件
alert("点击了" + node.text);
})
root.on("click",function(node,event){//子节点事件
alert("点击了" + node.text);
})
})
四：带链接的树
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"网"
})
//添加子节点
root.appendChild(new Ext.tree.TreeNode({
id:"child1",
text:"首页",
href:"#", //存在连接及打开方式
hrefTarget:"_blank"
}))
//添加子节点
root.appendChild(new Ext.tree.TreeNode({
id:"child2",
text:"论坛首页",
href:"#",
hrefTarget:"_blank"
}))
var treePanel = new Ext.tree.TreePanel({
renderTo:"TestTree",
width:400,
height:300,
root:root
});
})
五：动态加载树
Ext.onReady(function(){
var loader=new Ext.tree.TreeLoader({//用于加载子节点数据
url:"treedata.js"
});
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"根节点",
loader:loader
});
var tree=new Ext.tree.TreePanel({
renderTo:"TestTree",
root:root,
width:400,
height:400
});
})
treedata.js
[
{
id:"childnode1",
text:"子节点1",
leaf:true //是否是叶子节点，部位叶节点就要写出其子节点
},
{
id:"childnode2",
text:"子节点2",
leaf:true
},
{
id:"childnode3",
text:"子节点3",
leaf:true
}
]
treedata.js
[
{
id:"childnode1",
text:"子节点1",
leaf:true
},
{
id:"childnode2",
text:"子节点2",
leaf:false,//是否是叶子节点，部位叶节点就要写出其子节点
children:[
{
id:"gchildnode1",
text:"孙子节点1",
leaf:true
},
{
id:"gchildnode2",
text:"孙子节点2",
leaf:true
}
]
},
{
id:"childnode3",
text:"子节点3",
leaf:true
}
]
六：动态节点和静态节点混用
Ext.onReady(function(){
var loader=new Ext.tree.TreeLoader({
url:"treedata.js"
});
var root=new Ext.tree.TreeNode({
id:"root",
text:"根节点"
});
root.appendChild(new Ext.tree.TreeNode({
id:"child1",
text:"子节点1"
}))
root.appendChild(new Ext.tree.AsyncTreeNode({
id:"child2",
text:"子节点2",
loader:loader
}))
var tree=new Ext.tree.TreePanel({
renderTo:"TestTree",
root:root,
width:400,
height:400
});
})
树的一些常用配置属性。
Ext.onReady(function(){
var loader=new Ext.tree.TreeLoader({
url:"treedata3.js"
});
var root=new Ext.tree.TreeNode({
id:"root",
text:"根节点"
});
root.appendChild(new Ext.tree.TreeNode({
id:"child1",
text:"子节点1"
}))
root.appendChild(new Ext.tree.AsyncTreeNode({
id:"child2",
text:"子节点2",
loader:loader
}))
var tree=new Ext.tree.TreePanel({
renderTo:"TestTree",
root:root,
width:400,
height:400,
animate:false,//收缩动画
autoHeight:true, //自动高度
enableDrag:true, //是否可以拖动
//enableDD:true, //drap和drop
enableDrop:true, //放置节点
lines:false,//节点间虚线
rootVisible:true,//是否显示根节点
trackMouseOver:true,//是否显示经过时效果
useArrows:true//是否使用小箭头
});
})
节点的一些常用配置属性。
Ext.onReady(function(){
Ext.QuickTips.init();
var loader=new Ext.tree.TreeLoader({
url:"treedata3.js"
});
var root=new Ext.tree.TreeNode({
id:"root",
text:"根节点",
checked:true, //true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
expanded:true, //是否展开，默认不展开
qtip:"根节点", //提示信息
singleClickExpand:true //单击文本展开默认双击展开
});
root.appendChild(new Ext.tree.TreeNode({
id:"child1",
text:"子节点1"
}))
root.appendChild(new Ext.tree.AsyncTreeNode({
id:"child2",
text:"子节点2",
loader:loader
}))
var tree=new Ext.tree.TreePanel({
renderTo:"TestTree",
root:root,
width:400,
height:400
});
})
从JSP中获得数据并构造动态树。
Ext.onReady(function(){
//根节点
var root = new Ext.tree.AsyncTreeNode({
id:"root",
text:"根节点",
loader:new Ext.tree.TreeLoader({
url:"AsyncServer2.jsp"
})
})
var treePanel = new Ext.tree.TreePanel({
renderTo:"AsyncTree",
width:300,
height:400,
root:root
})
})
AsyncServer2.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String tree = "[{id:'childnode1',text:'子节点',leaf:false}]";
response.getWriter().write(tree);
%>
AsyncServer2.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
StringBuffer tree = new StringBuffer();
tree.append("[");
tree.append("{text:'子节点1',id:'son1',leaf:true},");
tree.append("{text:'子节点2',id:'son2',leaf:true},");
tree.append("{text:'子节点3',id:'son3',leaf:true}");
tree.append("]");
response.getWriter().write(tree.toString());
%>
七：TreeSelectionModel选择模型
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
})
//子节点
var childNode1 = new Ext.tree.TreeNode({
id:"chileNode1",
text:"子节点1"
})
//孙子节点
var gChildNode1 = new Ext.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1"
})
//孙子节点
var gChildNode2 = new Ext.tree.TreeNode({
id:"gChildNode2",
text:"孙子节点2"
})
//孙子节点
var gChildNode3 = new Ext.tree.TreeNode({
id:"gChildNode3",
text:"孙子节点3"
})
childNode1.appendChild(gChildNode1);
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
var childNode2 = new Ext.tree.TreeNode({
id:"chileNode2",
text:"子节点2"
})
//子节点
var childNode3 = new Ext.tree.TreeNode({
id:"chileNode3",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
var treePanel = new Ext.tree.TreePanel({
renderTo:"TestTree11",
width:300,
height:400,
root:root,
bbar:[
{
text:"获得选择的节点",
handler:function(){
var sm = treePanel.getSelectionModel();//获取对象，
var sn = sm.getSelectedNode();//通过对象获取单个节点
if(sn != null) {
alert(sn.text);//获取节点内容
}else {
alert("没有选择任何节点");
}
}
}
]
})
})
选择多个节点。
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
})
//子节点
var childNode1 = new Ext.tree.TreeNode({
id:"chileNode1",
text:"子节点1"
})
//孙子节点
var gChildNode1 = new Ext.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1"
})
//孙子节点
var gChildNode2 = new Ext.tree.TreeNode({
id:"gChildNode2",
text:"孙子节点2"
})
//孙子节点
var gChildNode3 = new Ext.tree.TreeNode({
id:"gChildNode3",
text:"孙子节点3"
})
childNode1.appendChild(gChildNode1);
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
var childNode2 = new Ext.tree.TreeNode({
id:"chileNode2",
text:"子节点2"
})
//子节点
var childNode3 = new Ext.tree.TreeNode({
id:"chileNode3",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
var treePanel = new Ext.tree.TreePanel({
renderTo:"TestTree11",
width:300,
height:400,
root:root,
selModel : new Ext.tree.MultiSelectionModel(),
bbar:[
{
text:"获得选择的节点",
handler:function(){
var sm = treePanel.getSelectionModel();
var sn = sm.getSelectedNodes();//获取多个选择节点
var length = sn.length;//获取选择节点个数
if(length != 0) {
alert(length);
}else {
alert("没有选择任何节点");
}
}
}
]
})
})
八：可编辑的树
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
})
//子节点
var childNode1 = new Ext.tree.TreeNode({
id:"chileNode1",
text:"子节点1"
})
//孙子节点
var gChildNode1 = new Ext.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1"
})
//孙子节点
var gChildNode2 = new Ext.tree.TreeNode({
id:"gChildNode2",
text:"孙子节点2"
})
//孙子节点
var gChildNode3 = new Ext.tree.TreeNode({
id:"gChildNode3",
text:"孙子节点3"
})
childNode1.appendChild(gChildNode1);
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
var childNode2 = new Ext.tree.TreeNode({
id:"chileNode2",
text:"子节点2"
})
//子节点
var childNode3 = new Ext.tree.TreeNode({
id:"chileNode3",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
var treePanel = new Ext.tree.TreePanel({
renderTo:"hello",
width:300,
height:400,
root:root,
selModel : new Ext.tree.MultiSelectionModel(),
bbar:[
{
text:"获得选择的节点",
handler:function(){
var sm = treePanel.getSelectionModel();
var sn = sm.getSelectedNodes();
var length = sn.length;
if(length != 0) {
alert(length);
}else {
alert("没有选择任何节点");
}
}
}
]
})
new Ext.tree.TreeEditor(treePanel);//可编辑树，将创建数放入即可
})
九：按指定属性进行排序
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
})
//子节点
var childNode1 = new Ext.tree.TreeNode({
id:"chileNode1",
text:"子节点1"
})
//孙子节点
var gChildNode1 = new Ext.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1"
})
//孙子节点
var gChildNode2 = new Ext.tree.TreeNode({
id:"gChildNode4",
text:"孙子节点2"
})
//孙子节点
var gChildNode3 = new Ext.tree.TreeNode({
id:"gChildNode3",
text:"孙子节点3"
})
childNode1.appendChild(gChildNode1);
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
var childNode2 = new Ext.tree.TreeNode({
id:"chileNode2",
text:"子节点2"
})
//子节点
var childNode3 = new Ext.tree.TreeNode({
id:"chileNode3",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
var treePanel = new Ext.tree.TreePanel({
renderTo:"hello",
width:300,
height:400,
root:root,
selModel : new Ext.tree.MultiSelectionModel(),
bbar:[
{
text:"获得选择的节点",
handler:function(){
var sm = treePanel.getSelectionModel();
var sn = sm.getSelectedNodes();
var length = sn.length;
if(length != 0) {
alert(length);
}else {
alert("没有选择任何节点");
}
}
}
]
})
new Ext.tree.TreeEditor(treePanel);
new Ext.tree.TreeSorter(treePanel,{//排序
property:"id"//根据id属性排序
})
})
十：替换Tree中图片
Ext.onReady(function(){
//根节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点",
icon:"folder.jpg" //节点图片
})
root.on("click",function(){
root.getUI().getIconEl().src="folder2.jpg" //当点击时展开时节点图片
});
//子节点
var childNode1 = new Ext.tree.TreeNode({
id:"chileNode1",
text:"子节点1",
icon:"folder.jpg"
})
//孙子节点
var gChildNode1 = new Ext.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1",
icon:"folder.jpg"
})
//孙子节点
var gChildNode2 = new Ext.tree.TreeNode({
id:"gChildNode2",
text:"孙子节点2",
icon:"folder.jpg"
})
//孙子节点
var gChildNode3 = new Ext.tree.TreeNode({
id:"gChildNode3",
text:"孙子节点3",
icon:"folder.jpg"
})
childNode1.appendChild(gChildNode1);
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
var childNode2 = new Ext.tree.TreeNode({
id:"chileNode3",
text:"子节点2"
})
//子节点
var childNode3 = new Ext.tree.TreeNode({
id:"chileNode2",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
var treePanel = new Ext.tree.TreePanel({
renderTo:"TestTree11",
width:300,
height:400,
root:root,
selModel : new Ext.tree.MultiSelectionModel(),
bbar:[
{
text:"获得选择的节点",
handler:function(){
var sm = treePanel.getSelectionModel();
var sn = sm.getSelectedNodes();
var length = sn.length;
if(length != 0) {
alert(length);
}else {
alert("没有选择任何节点");
}
}
}
]
});
new Ext.tree.TreeSorter(treePanel,{
property:"id"
})
})