您的位置: 首页  >  文章  >  利用Ext Js生成动态树

利用Ext Js生成动态树

分类: 文章 • 2023-02-23 00:29:11

利用Ext Js生成动态树

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

一. 需求

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

二. 关键类

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

  • Ext.tree.TreeNode
  • Ext.menu.Menu

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

三. 代码示例

1. 先看一下测试页面

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

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

  1. /***********************************
  2. 创建树
  3. bychb
  4. ************************************/
  5. functioncreateTree(n){
  7. Ext.QuickTips.init();
  8. varmytree=newExt.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. });
  22. //根节点
  23. varroot=newExt.tree.TreeNode({
  24. id:"root",
  25. text:"集团公司",
  26. expanded:true
  27. });
  29. for(vari=0;i<n;i++){
  30. varsub1=newExt.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=newExt.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);//设置根节点
  73. mytree.render();//不要忘记render()下,不然不显示哦
  74. }

3. 展开子节点的代码

  1. /******************************************
  2. 展开节点
  3. ******************************************/
  4. functionmyExpand(node){
  5. if(node.id=='1'){
  6. if(node.item(0)==undefined){
  7. node.appendChild(newExt.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. }
  19. node.expand();
  21. }elseif(node.id=='2'){
  22. node.appendChild(newExt.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. }
  36. }

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

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

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

利用Ext Js生成动态树

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

相关推荐