8.TreePanel
目录：
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" }) })
