利用Ext Js生成动态树

利用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>
  9. <!--CommonStylesfortheexamples-->
  10. <linkrel="stylesheet"type="text/css"href="../shared/examples.css"/>
  11. <linkrel="stylesheet"type="text/css"href="../shared/lib.css"/>
  12. <scripttype="text/javascript">
  13. /**************
  14. onload事件
  15. ***************/
  16. window.onload=function(){
  17. createTree(3);
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <scripttype="text/javascript"src="../shared/examples.js"></script>
  23. <h1>现在要生成一颗动态树</h1>
  24. <divid="container">
  25. </div>
  26. </body>
  27. </html>

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

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

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. }
  18. node.expand();
  19. }elseif(node.id=='2'){
  20. node.appendChild(newExt.tree.TreeNode({
  21. id:node.id+'2',
  22. text:node.text+"的第一个儿子",
  23. hrefTarget:"mainFrame",
  24. listeners:{//监听
  25. "click":function(node){
  26. expand2(node)
  27. }
  28. }
  29. }));
  30. }else{
  31. alert(node.id+"没有子部门了");
  32. }
  33. }

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

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

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

截图

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

你可能感兴趣的:(ext)