第十二讲：ExtJS组件之TreePanel(下)

落日映苍穹つ 2022-04-14 06:56 207阅读 0赞

示例一：树的一些常用配置属性。

示例二：节点的一些常用配置属性。

示例三：从JSP中获得数据并构造动态树。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;% StringBuffer tree = new&nbsp;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()); %&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例四：TreeSelectionModel选择模型。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ //根节点 var&nbsp;root = new&nbsp;Ext.tree.TreeNode({ id:"root", text:"根节点" }) &nbsp; //子节点 var&nbsp;childNode1 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode1", text:"子节点1" }) &nbsp; //孙子节点 var&nbsp;gChildNode1 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode1", text:"孙子节点1" }) &nbsp; //孙子节点 var&nbsp;gChildNode2 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode2", text:"孙子节点2" }) &nbsp; //孙子节点 var&nbsp;gChildNode3 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode3", text:"孙子节点3" }) &nbsp; childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3); &nbsp; //子节点 var&nbsp;childNode2 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode2", text:"子节点2" }) &nbsp; //子节点 var&nbsp;childNode3 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode3", text:"子节点3" }) &nbsp; root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3); &nbsp; var&nbsp;treePanel = new&nbsp;Ext.tree.TreePanel({ renderTo:"TestTree11", width:300, height:400, root:root, bbar:[ { text:"获得选择的节点", handler:function(){ var&nbsp;sm = treePanel.getSelectionModel(); var&nbsp;sn = sm.getSelectedNode(); if(sn != null) { alert(sn.text); }else&nbsp;{ alert("没有选择任何节点"); } } } ] }) }) </td> 
 </tr> 
 </tbody> 
</table>

示例五：选择多个节点。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ //根节点 var&nbsp;root = new&nbsp;Ext.tree.TreeNode({ id:"root", text:"根节点" }) &nbsp; //子节点 var&nbsp;childNode1 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode1", text:"子节点1" }) &nbsp; //孙子节点 var&nbsp;gChildNode1 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode1", text:"孙子节点1" }) &nbsp; //孙子节点 var&nbsp;gChildNode2 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode2", text:"孙子节点2" }) &nbsp; //孙子节点 var&nbsp;gChildNode3 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode3", text:"孙子节点3" }) &nbsp; childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3); &nbsp; //子节点 var&nbsp;childNode2 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode2", text:"子节点2" }) &nbsp; //子节点 var&nbsp;childNode3 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode3", text:"子节点3" }) &nbsp; root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3); &nbsp; var&nbsp;treePanel = new&nbsp;Ext.tree.TreePanel({ renderTo:"TestTree11", width:300, height:400, root:root, selModel : new&nbsp;Ext.tree.MultiSelectionModel(), bbar:[ { text:"获得选择的节点", handler:function(){ var&nbsp;sm = treePanel.getSelectionModel(); var&nbsp;sn = sm.getSelectedNodes(); var&nbsp;length = sn.length; if(length != 0) { alert(length); }else&nbsp;{ alert("没有选择任何节点"); } } } ] }) }) </td> 
 </tr> 
 </tbody> 
</table>

示例六：可编辑的树。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> new Ext.tree.TreeEditor(treePanel); </td> 
 </tr> 
 </tbody> 
</table>

示例七：按指定属性进行排序。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> new&nbsp;Ext.tree.TreeSorter(treePanel,{ property:"id" }) </td> 
 </tr> 
 </tbody> 
</table>

示例八：替换Tree中图片。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ //根节点 var&nbsp;root = new&nbsp;Ext.tree.TreeNode({ id:"root", text:"根节点", icon:"folder.jpg" }) &nbsp; root.on("click",function(){ root.getUI().getIconEl().src="folder2.jpg" }); &nbsp; //子节点 var&nbsp;childNode1 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode1", text:"子节点1", icon:"folder.jpg" }) &nbsp; //孙子节点 var&nbsp;gChildNode1 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode1", text:"孙子节点1", icon:"folder.jpg" }) &nbsp; //孙子节点 var&nbsp;gChildNode2 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode2", text:"孙子节点2", icon:"folder.jpg" }) &nbsp; //孙子节点 var&nbsp;gChildNode3 = new&nbsp;Ext.tree.TreeNode({ id:"gChildNode3", text:"孙子节点3", icon:"folder.jpg" }) &nbsp; childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3); &nbsp; //子节点 var&nbsp;childNode2 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode3", text:"子节点2" }) &nbsp; //子节点 var&nbsp;childNode3 = new&nbsp;Ext.tree.TreeNode({ id:"chileNode2", text:"子节点3" }) &nbsp; root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3); &nbsp; var&nbsp;treePanel = new&nbsp;Ext.tree.TreePanel({ renderTo:"TestTree11", width:300, height:400, root:root, selModel : new&nbsp;Ext.tree.MultiSelectionModel(), bbar:[ { text:"获得选择的节点", handler:function(){ var&nbsp;sm = treePanel.getSelectionModel(); var&nbsp;sn = sm.getSelectedNodes(); var&nbsp;length = sn.length; if(length != 0) { alert(length); }else&nbsp;{ alert("没有选择任何节点"); } } } ] }); &nbsp; new&nbsp;Ext.tree.TreeSorter(treePanel,{ property:"id" }) }) </td> 
 </tr> 
 </tbody> 
</table>