ExtJs簡(jiǎn)單Tree創(chuàng)建及其異步加載

1、Ext Js簡(jiǎn)單Tree創(chuàng)建及其異步加載 對(duì)于Ext Js的樹(shù)的使用也是比較多的，本篇分享簡(jiǎn)單的Tree的創(chuàng)建及其樹(shù)的異步加載處理。1.簡(jiǎn)單TreePanel的創(chuàng)建function creatTree() /創(chuàng)建簡(jiǎn)單的樹(shù) /節(jié)點(diǎn)集合創(chuàng)建 var rootNode = new Ext.tree.TreeNode( id: 'root', text: '根節(jié)點(diǎn)', expanded: true ); /只展開(kāi)根節(jié)點(diǎn)(只展開(kāi)某節(jié)點(diǎn)) var node1 = new Ext.tree.TreeNode( id: 'node1', text: 'N

2、ode1', leaf: true ); /為葉子節(jié)點(diǎn) var node2 = new Ext.tree.TreeNode( id: 'node2', text: 'Node2' ); var node3 = new Ext.tree.TreeNode( id: 'node3', text: 'Node3', expanded: true ); var arrNodes = /節(jié)點(diǎn)集合 new Ext.tree.TreeNode( id: 'nodeOne', text: 'NodeOne'

3、 ), new Ext.tree.TreeNode( id: 'nodeTwo', text: 'NodeTwo' ), new Ext.tree.TreeNode( id: 'nodeThree', text: 'NodeThree' ) ; var arrayNodes = new Ext.tree.TreeNode( text: 'nodeOne' ), new Ext.tree.TreeNode( text: 'nodeTwo' ); node2.appendChild(arrayNodes

4、); /將集合節(jié)點(diǎn)添加到對(duì)應(yīng)的節(jié)點(diǎn) node3.appendChild(arrNodes); rootNode.appendChild(node1); /根節(jié)點(diǎn)添加對(duì)應(yīng)的節(jié)點(diǎn) rootNode.appendChild(node2); rootNode.appendChild(node3); /也可以如下添加節(jié)點(diǎn)集合 /rootNode.appendChild(node1, node2, node3); /添加節(jié)點(diǎn)集合 var treePanel = new Ext.tree.TreePanel( renderTo: Ext.getBody(), width: 150, root: rootNo

5、de, animate: true, /是否動(dòng)畫(huà) enableDD: true, /是否拖拽操作 useArrows: true, /使用Vista-style箭頭 autoScroll: true, /是否自動(dòng)滾動(dòng)條 containerScroll: true/向ScrollManager注冊(cè)此容器 );2.簡(jiǎn)單TreePanel的使用/簡(jiǎn)單的樹(shù)的練習(xí)function treeTest() var rootNode = new Ext.tree.TreeNode(/創(chuàng)建根節(jié)點(diǎn) id: 'root', text: '樹(shù)的根', nodeType: 'as

6、ync' ); rootNode.appendChild(new Ext.tree.TreeNode( id: 'node1', text: 'Node1', leaf: true ); /是葉子節(jié)點(diǎn),將不能添加子節(jié)點(diǎn) rootNode.appendChild(new Ext.tree.TreeNode( id: 'node2', text: 'Node2', leaf: true ); var node3 = new Ext.tree.TreeNode( id: 'node3', text: 'N

7、ode3' ); /創(chuàng)建節(jié)點(diǎn)3 var arrNodes = /節(jié)點(diǎn)集合 new Ext.tree.TreeNode( id: 'node30', text: 'Node30' ), new Ext.tree.TreeNode( id: 'node31', text: 'Node31' ), new Ext.tree.TreeNode( id: 'node32', text: 'Node32' ); node3.appendChild(arrNodes); /將節(jié)點(diǎn)集合添加到節(jié)點(diǎn)3中 roo

8、tNode.appendChild(node3); /將節(jié)點(diǎn)3添加到根節(jié)點(diǎn)中 var treePanel = new Ext.tree.TreePanel(/創(chuàng)建節(jié)點(diǎn)樹(shù)對(duì)象 renderTo: Ext.getBody(), root: rootNode, width: 200, animate: true, enableDD: true /animate動(dòng)畫(huà)效果,enableDD拖拽效果 ); /tree.getRootNode().expand(); /某個(gè)節(jié)點(diǎn)展開(kāi) /node.expand(true); treePanel.expandAll(); /展開(kāi)樹(shù)下的所有節(jié)點(diǎn) /該節(jié)點(diǎn)下的所有子

9、節(jié)點(diǎn)都觸發(fā) /node3.eachChild(function () alert('TT') ); /某個(gè)節(jié)點(diǎn)(節(jié)點(diǎn)3)點(diǎn)擊事件,鼠標(biāo)位置 /node3.on('click', function (node, e) Ext.Msg.alert('信息提示', '你點(diǎn)擊' + node.text + '的節(jié)點(diǎn)' + e.getXY() ); treePanel.on('click', function (node) /所有節(jié)點(diǎn)都觸發(fā)改事件 if (node.hasChildNodes() /判斷該節(jié)點(diǎn)

10、是否含有子節(jié)點(diǎn) var msg = node.text + '有子節(jié)點(diǎn)：' var childNodes = node.childNodes; /取得該節(jié)點(diǎn)下的所有子節(jié)點(diǎn) for (var i = 0; i < childNodes.length; i+) /遍歷子節(jié)點(diǎn)集合 msg += childNodesi.text + '|' /拼接節(jié)點(diǎn)集合文本信息 Ext.Msg.alert('信息提示', msg); else if (node.isLeaf() /判斷該節(jié)點(diǎn)是否為葉子節(jié)點(diǎn) Ext.Msg.alert('信息提示'

11、, '你點(diǎn)擊的是葉子節(jié)點(diǎn):' + node.text); )3.簡(jiǎn)單前臺(tái)Ext Js對(duì)樹(shù)的增刪改/前臺(tái)ExtJs操作對(duì)樹(shù)的增刪改操作function treeOperation() var root = new Ext.tree.TreeNode( text: '根節(jié)點(diǎn)' ); var treePanel = new Ext.tree.TreePanel( width: 300, height: 600, renderTo: Ext.getBody(), root: root, id: 'testTree', tbar: text: '添

12、加同級(jí)節(jié)點(diǎn)', handler: function () singleNodeInfo('addSibling', 'testTree'); , text: '添加下級(jí)節(jié)點(diǎn)', handler: function () singleNodeInfo('addChild', 'testTree'); , text: '修改節(jié)點(diǎn)', handler: function () singleNodeInfo('update', 'testTree'); , text:

13、 '刪除節(jié)點(diǎn)', handler: function () removeNode('testTree'); ); /treePanel.on('contextmenu', function (node, e) var myMenu = createMenu(); node.select(); myMenu.showAt(e.getPoint(); ); /對(duì)于節(jié)點(diǎn)內(nèi)容的操作,也可以使用Ext.Mmpt來(lái)處理，如下： /Empt('請(qǐng)輸入節(jié)點(diǎn)名稱', '節(jié)點(diǎn)名稱:', function

14、 (btn, text) if (btn = 'ok') alert(text); );function removeNode(treePanelID) /刪除節(jié)點(diǎn),參數(shù):樹(shù)ID var treePanel = Ext.getCmp(treePanelID); var selNode = treePanel.selModel.getSelectedNode(); if (selNode = null) Ext.Msg.alert('信息提示', '請(qǐng)選擇你要?jiǎng)h除的節(jié)點(diǎn)！'); return; if (!selNode.hasChildNodes(

15、) /是否包含子節(jié)點(diǎn) var removeNode = selNode.remove(); /其父節(jié)點(diǎn)移除自己 Ext.Msg.alert('信息提示', '你移除了節(jié)點(diǎn)' + removeNode.text); else Ext.Msg.confirm('信息提示', '該節(jié)點(diǎn)為父節(jié)點(diǎn),一并刪除？', function (btn) if (btn = 'yes') selNode.removeAll(); /連同下面的子節(jié)點(diǎn)一起刪除 ); function AddAndUpdateNode(type, selNo

16、de, nodeName) /添加修改節(jié)點(diǎn),參數(shù):操作類型選中節(jié)點(diǎn)節(jié)點(diǎn)名字 if (selNode != null) switch (type) case 'addChild': /添加子節(jié)點(diǎn) var addNode = new Ext.tree.TreeNode( text: nodeName ); selNode.appendChild(addNode); break; case 'addSibling': /添加同級(jí)節(jié)點(diǎn) var addNode = new Ext.tree.TreeNode( text: nodeName ); var parentNod

17、e = selNode.parentNode.appendChild(addNode); break; case 'update': /修改文本內(nèi)容 selNode.setText(nodeName); break; selNode.expand(); /選中節(jié)點(diǎn)展開(kāi) function singleNodeInfo(type, treeId) /參數(shù):操作類型,treePanel對(duì)象 var treePanel = Ext.getCmp(treeId); var selNode = treePanel.selModel.getSelectedNode(); /獲取選中的節(jié)點(diǎn) i

18、f (selNode = null) Ext.Msg.alert('信息提示', '請(qǐng)選擇一個(gè)節(jié)點(diǎn)'); return; var win = new Ext.Window(/彈出信息對(duì)話框 title: '添加修改節(jié)點(diǎn)', width: 230, height: 100, bodyStyle: "padding-top:10px", items: xtype: 'label', text: '節(jié)點(diǎn)名字:', width: 200 , xtype: 'textfield', id:

19、 'txtNodeName' , bbar: text: '保存', handler: function () var nodeName = Ext.getCmp('txtNodeName').getValue(); AddAndUpdateNode(type, selNode, nodeName); /更新數(shù)據(jù) Ext.Msg.alert('信息提示', '保存成功！'); win.close(); , '->', text: '取消', handler: function

20、() win.close(); ); if (type = "update") Ext.getCmp('txtNodeName').setValue(selNode.text); win.show(); /顯示信息/你也可以試試添加一個(gè)右鍵菜單對(duì)節(jié)點(diǎn)進(jìn)行操作function createMenu() var myMenu = new Ext.menu.Menu( xtype: 'button', text: '添加節(jié)點(diǎn)', handler: function (tree) Ext.Msg.alert('信息提示'

21、;, '添加節(jié)點(diǎn)'); , xtype: 'button', text: '下級(jí)節(jié)點(diǎn)', handler: function () Ext.Msg.alert('信息提示', '下級(jí)節(jié)點(diǎn)'); , xtype: 'button', text: '修改節(jié)點(diǎn)', handler: function () Ext.Msg.alert('信息提示', '修改節(jié)點(diǎn)'); , xtype: 'button', text: '刪除節(jié)點(diǎn)'

22、;, handler: function () Ext.Msg.alert('信息提示', '刪除節(jié)點(diǎn)'); ); return myMenu;4.簡(jiǎn)單樹(shù)的異步加載(需要?jiǎng)?chuàng)建異步節(jié)點(diǎn)Ext.tree.AsyncTreeNode并使用Ext.tree.TreeLoader加載)(注意對(duì)于葉子節(jié)點(diǎn)的指定)function treeAsyncTest() /樹(shù)的異步加載,一次加載對(duì)應(yīng)的數(shù)據(jù) var treePanel = new Ext.tree.TreePanel( el: 'divTree', /渲染divID width: 150, height

23、: 300, animate: true, enableDD: true, rootVisible: true, loader: new Ext.tree.TreeLoader( url: 'TestTreeAjx.ashx', baseParams: Option: 'GetAllData' ) ); var rootNode = new Ext.tree.AsyncTreeNode( text: '根節(jié)點(diǎn)' ); treePanel.setRootNode(rootNode); treePanel.render(); /進(jìn)行渲染 rootNo

24、de.expand(true, true); /參數(shù)1:展開(kāi)所有節(jié)點(diǎn);參數(shù)2:啟動(dòng)動(dòng)畫(huà)效果 /這樣操作完你會(huì)發(fā)現(xiàn)所有的節(jié)點(diǎn)可能會(huì)無(wú)限的延展下去， /是因?yàn)閿?shù)據(jù)引起的，在加載時(shí)，傳出的數(shù)據(jù)指定最后一級(jí)為葉子節(jié)點(diǎn)就可以了5.針對(duì)不同的節(jié)點(diǎn)異步加載不同的節(jié)點(diǎn)數(shù)據(jù)（注意對(duì)于葉子節(jié)點(diǎn)的指定）function treeNodeAsync() /根據(jù)不同的節(jié)點(diǎn)值,獲取不同的加載數(shù)據(jù)(可以是節(jié)點(diǎn)ID節(jié)點(diǎn)文本等等) var rootNode = new Ext.tree.AsyncTreeNode( text: 'rootNode' ); var treePanel = new Ext.tree

25、.TreePanel( el: 'divTree', width: 150, height: 300, animate: true, enableDD: true, rootVisible: true, listeners: 'beforeload': function (node) /按這種形式傳遞的數(shù)據(jù),不指定最后的葉子節(jié)點(diǎn)的話,會(huì)遍歷每個(gè)節(jié)點(diǎn),性能不好(如果需要,在對(duì)應(yīng)節(jié)點(diǎn)下指定葉子節(jié)點(diǎn)) node.loader = new Ext.tree.TreeLoader( url: 'TestTreeAjx.ashx', baseParams:

26、Option: 'GetNodeData', NodeText: node.text ) ); treePanel.setRootNode(rootNode); /這里可以試試對(duì)于節(jié)點(diǎn)展開(kāi)和非展開(kāi)所有節(jié)點(diǎn)的數(shù)據(jù)加載情況 /一次展開(kāi)所有節(jié)點(diǎn),會(huì)一次遍歷完畢加載數(shù)據(jù)；不展開(kāi)節(jié)點(diǎn)折疊起來(lái),會(huì)在對(duì)應(yīng)節(jié)點(diǎn)展開(kāi)需加載時(shí)加載對(duì)應(yīng)數(shù)據(jù) rootNode.expand(false, true); treePanel.render();6.其Ajax請(qǐng)求頁(yè)面TestTreeAjx.ashx代碼（簡(jiǎn)單的模擬數(shù)據(jù)）namespace WebExtJS.WebTest / <summary>

27、 / TestTreeAjx 的摘要說(shuō)明 / </summary> public class TestTreeAjx : IHttpHandler private static IDictionary<int, List<Node>> dic = null; public void ProcessRequest(HttpContext context) context.Response.ContentType = "text/plain" string strOption = context.Request"Option&quo

28、t; != null ? context.Request"Option".ToString() : string.Empty; string nodeText = context.Request"NodeText" != null ? context.Request"NodeText".ToString() : string.Empty; string strMessage = string.Empty; dic = GetData(); switch (strOption) case "GetAllData":

29、strMessage = GetAllData(dic); break; case "GetNodeData": strMessage = GetNodeData(nodeText); break; default: break; context.Response.Write(strMessage); context.Response.End(); / <summary> / 獲取全部的數(shù)據(jù) / </summary> / <returns></returns> private string GetAllData() strin

30、g data = "text:'Node1',leaf:true," + "text:'Node2',children:text:'Node20',leaf:true,text:'Node21',leaf:true," + "text:'Node3',children:text:'Node30',leaf:true,text:'Node31',leaf:true,text:'Node32',leaf:true"

31、; return data; / <summary> / 根據(jù)不同的節(jié)點(diǎn)文本獲取對(duì)應(yīng)的節(jié)點(diǎn) / </summary> / <param name="nodeText"></param> / <returns></returns> private string GetNodeData(string nodeText) string json = string.Empty; switch (nodeText) /指定葉子節(jié)點(diǎn)遍歷非葉子節(jié)點(diǎn)(如果在其父節(jié)點(diǎn)指定為葉子節(jié)點(diǎn),將不會(huì)加載對(duì)應(yīng)的節(jié)點(diǎn)數(shù)據(jù)) case

32、"rootNode": json = "text:'Node1',leaf:true,text:'Node2',text:'Node3'" break; case "Node2": json = "text:'Node20',leaf:true,text:'Node21',leaf:true" break; case "Node3": json = "text:'Node30',leaf:t

33、rue,text:'Node31',leaf:true,text:'Node32',leaf:true" break; /switch (nodeText) /不指定葉子節(jié)點(diǎn)遍歷每一個(gè)節(jié)點(diǎn) / case "rootNode": json = "text:'Node1',text:'Node2',text:'Node3'" break; / case "Node2": json = "text:'Node20',text:

34、'Node21'" break; / case "Node3": json = "text:'Node30',text:'Node31',text:'Node32'" break; / return json; / <summary> / 簡(jiǎn)單字典模擬數(shù)據(jù) / </summary> / <returns></returns> private IDictionary<int, List<Node>> GetDat

35、a() IDictionary<int, List<Node>> dic = new Dictionary<int, List<Node>>(); List<Node> nodeRoot = new List<Node>(); List<Node> Node1 = new List<Node> new Node(10, "Node10") ; List<Node> Node2 = new List<Node> new Node(20, "Node

36、20"), new Node() NodeID = 21, NodeName = "Node21" , new Node() NodeID = 22, NodeName = "Node22" ; List<Node> Node3 = new List<Node> new Node(30, "Node30"), new Node(31, "Node31"), new Node(32, "Node32"), new Node(33, "Node33") ; dic.Add(0, nodeRoot);/處理根節(jié)點(diǎn) dic.Add(1, Node1); dic.Add(2, Node2); dic.Add