利用Ext Js生成动态树

一时失言乱红尘 2022-08-27 12:55 130阅读 0赞

** 利用Ext Js生成动态树**

今天在公司帮同事写了个用Ext Js生成动态树的Demo，在这里分享一下，也好供以后自己查阅。

**一. 需求**

1.  要求生成一颗部门树，初始只列出根部门
2.  当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点
3.  部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单

**二. 关键类**

这里主要涉及Ext JS的两个类:

*  Ext.tree.TreeNode
 *  Ext.menu.Menu

相关API可以参考：[http://extjs.com/deploy/ext/docs/][http_extjs.com_deploy_ext_docs]

**三. 代码示例**

1. 先看一下测试页面

1.  <html>
2.  <head>
3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4.  <title>Reorder TreePanel</title>
5.  <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
6.  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
7.  <script type="text/javascript" src="../../ext-all.js"></script>
8.  <script type="text/javascript" src="reorder.js"></script>
9.  
10. 
11. <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
12. <link rel="stylesheet" type="text/css" href="../shared/lib.css" />
13. 
14. <script type="text/javascript">
15. /\*\*\*\*\*\*\*\*\*\*\*\*\*\*
16.     onload事件
17. \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
18. window.onload=function()\{
19.     createTree(3);
20. \}
21. </script>
22. 
23. </head>
24. <body>
25. <script type="text/javascript" src="../shared/examples.js"></script>
26. <h1>现在要生成一颗动态树</h1>
27. <div id="container">
28.     </div>
29. </body>
30. </html>
31.

2. 再看一下生成树的函数

1.  /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
2.      创建树
3.      by chb
4.  \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
5.  function createTree(n)\{
6.  
7.      Ext.QuickTips.init();
8.      var mytree=new Ext.tree.TreePanel(\{
9.        el:"container",
10.       animate:true,
11.       title:"Extjs动态树",
12.       collapsible:true,
13.       enableDD:true,
14.       enableDrag:true,
15.       rootVisible:true,
16.       autoScroll:true,
17.       autoHeight:true,
18.       width:"30%",
19.       lines:true
20.     \});
21.   
22.   //根节点 
23.   var root=new Ext.tree.TreeNode(\{
24.       id:"root",
25.       text:"集团公司",
26.       expanded:true
27.   \});
28. 
29.     for(var i=0;i<n;i++)\{
30.         var sub1=new Ext.tree.TreeNode(\{
31.         id:i+1,
32.         text:"子公司"\+(i+1),
33.         singleClickExpand:true,
34.         listeners:\{
35.             //监听单击事件 
36.             "click":function(node)\{
37.                 myExpand(node);
38.             \},
39.             //监听右键 
40.             "contextmenu":function(node,e)\{
41.                 //列出右键菜单 
42.                 menu=new Ext.menu.Menu(\[
43.                   \{
44.                     text:"打开当前节点",
45.                     icon:"list.gif",
46.                     handler:function()\{
47.                         myExpand(node);
48.                     \}
49.                 \},
50.                 \{
51.                         text:"编辑当前节点",
52.                         icon:"list.gif",
53.                         handler:function()\{
54.                             alert(node.id);
55.                         \}
56.                 \},
57.                 \{
58.                         text:"删除当前节点",
59.                         icon:"list.gif",
60.                         handler:function()\{
61.                             alert(node.id);
62.                         \}
63.                 \}\]);
64.                 //显示在当前位置 
65.                 menu.showAt(e.getPoint());
66.             \}
67.         \}
68.       \});
69.         root.appendChild(sub1);
70.     \}
71.  mytree.setRootNode(root);//设置根节点 
72. 
73.  mytree.render();//不要忘记render()下,不然不显示哦 
74. \}

3. 展开子节点的代码

1.  /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
2.               展开节点
3.  \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
4.  function myExpand(node)\{
5.      if(node.id=='1')\{
6.      if(node.item(0)==undefined)\{
7.              node.appendChild(new Ext.tree.TreeNode(\{
8.          id:node.id+'1',
9.          text:node.text+"的第一个儿子",
10.         hrefTarget:"mainFrame",
11.         listeners:\{ //监听 
12.           "click":function(node,e)\{
13.             expand2(node)
14.             \}
15.         \}
16.         \}));
17.     \}
18. 
19.     node.expand();
20. 
21.     \}else if(node.id=='2')\{
22.         node.appendChild(new Ext.tree.TreeNode(\{
23.         id:node.id+'2',
24.         text:node.text+"的第一个儿子",
25.         hrefTarget:"mainFrame",
26.         listeners:\{ //监听 
27.           "click":function(node)\{
28.             expand2(node)
29.             \}
30.         \}
31.         \}));
32.     \}else\{
33.         alert(node.id+"没有子部门了");
34.     \}
35.     
36. \}

读者可以自己运行一下如上代码，会发现如下现象：无论点击“子公司1”多少次，只会列出“子公司1的第一个儿子”一个节点，而每点击一次“子公司2”，就会多出一个“子公司2的第一个儿子”节点，这是为什么呢？

因为每次点击都会激发myExpand函数，而“子公司1”上加了node.item(0)==undefined的判断，这里明白了？

即：如果该部门下没有子部门，则载入子部门，否则只展开，不重新载入。

![截图][aaa633564234662638750.jpg]

好了，就到这里吧，困了，就不详细解释了o(∩\_∩)o...哈哈

[http_extjs.com_deploy_ext_docs]: http://extjs.com/deploy/ext/docs/
[aaa633564234662638750.jpg]: /images/20220824/3e235f3aad0644c4bc84bd347d903183.png