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

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

2、ode1', leaf: true ); /為葉子節(jié)點 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é)點集合 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é)點添加到對應(yīng)的節(jié)點 node3.appendChild(arrNodes); rootNode.appendChild(node1); /根節(jié)點添加對應(yīng)的節(jié)點 rootNode.appendChild(node2); rootNode.appendChild(node3); /也可以如下添加節(jié)點集合 /rootNode.appendChild(node1, node2, node3); /添加節(jié)點集合 var treePanel = new Ext.tree.TreePanel( renderTo: Ext.getBody(), width: 150, root: rootNo

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

6、ync' ); rootNode.appendChild(new Ext.tree.TreeNode( id: 'node1', text: 'Node1', leaf: true ); /是葉子節(jié)點,將不能添加子節(jié)點 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é)點3 var arrNodes = /節(jié)點集合 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é)點集合添加到節(jié)點3中 roo

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

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

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

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

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

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

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

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

16、de, nodeName) /添加修改節(jié)點,參數(shù):操作類型選中節(jié)點節(jié)點名字 if (selNode != null) switch (type) case 'addChild': /添加子節(jié)點 var addNode = new Ext.tree.TreeNode( text: nodeName ); selNode.appendChild(addNode); break; case 'addSibling': /添加同級節(jié)點 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é)點展開 function singleNodeInfo(type, treeId) /參數(shù):操作類型,treePanel對象 var treePanel = Ext.getCmp(treeId); var selNode = treePanel.selModel.getSelectedNode(); /獲取選中的節(jié)點 i

18、f (selNode = null) Ext.Msg.alert('信息提示', '請選擇一個節(jié)點'); return; var win = new Ext.Window(/彈出信息對話框 title: '添加修改節(jié)點', width: 230, height: 100, bodyStyle: "padding-top:10px", items: xtype: 'label', text: '節(jié)點名字:', 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(); /顯示信息/你也可以試試添加一個右鍵菜單對節(jié)點進(jìn)行操作function createMenu() var myMenu = new Ext.menu.Menu( xtype: 'button', text: '添加節(jié)點', handler: function (tree) Ext.Msg.alert('信息提示'

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

22、;, handler: function () Ext.Msg.alert('信息提示', '刪除節(jié)點'); ); return myMenu;4.簡單樹的異步加載(需要創(chuàng)建異步節(jié)點Ext.tree.AsyncTreeNode并使用Ext.tree.TreeLoader加載)(注意對于葉子節(jié)點的指定)function treeAsyncTest() /樹的異步加載,一次加載對應(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é)點' ); treePanel.setRootNode(rootNode); treePanel.render(); /進(jìn)行渲染 rootNo

24、de.expand(true, true); /參數(shù)1:展開所有節(jié)點;參數(shù)2:啟動動畫效果 /這樣操作完你會發(fā)現(xiàn)所有的節(jié)點可能會無限的延展下去， /是因為數(shù)據(jù)引起的，在加載時，傳出的數(shù)據(jù)指定最后一級為葉子節(jié)點就可以了5.針對不同的節(jié)點異步加載不同的節(jié)點數(shù)據(jù)（注意對于葉子節(jié)點的指定）function treeNodeAsync() /根據(jù)不同的節(jié)點值,獲取不同的加載數(shù)據(jù)(可以是節(jié)點ID節(jié)點文本等等) 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é)點的話,會遍歷每個節(jié)點,性能不好(如果需要,在對應(yīng)節(jié)點下指定葉子節(jié)點) node.loader = new Ext.tree.TreeLoader( url: 'TestTreeAjx.ashx', baseParams:

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

27、 / TestTreeAjx 的摘要說明 / </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é)點文本獲取對應(yīng)的節(jié)點 / </summary> / <param name="nodeText"></param> / <returns></returns> private string GetNodeData(string nodeText) string json = string.Empty; switch (nodeText) /指定葉子節(jié)點遍歷非葉子節(jié)點(如果在其父節(jié)點指定為葉子節(jié)點,將不會加載對應(yīng)的節(jié)點數(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é)點遍歷每一個節(jié)點 / 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> / 簡單字典模擬數(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é)點 dic.Add(1, Node1); dic.Add(2, Node2); dic.Add