亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

利用Ext Js生成動態樹

系統 2063 0

利用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. < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" >
  4. < title > ReorderTreePanel </ 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 >
  10. <!--CommonStylesfortheexamples-->
  11. < link rel = "stylesheet" type = "text/css" href = "../shared/examples.css" />
  12. < link rel = "stylesheet" type = "text/css" href = "../shared/lib.css" />
  14. < script type = "text/javascript" >
  15. /**************
  16. onload事件
  17. ***************/
  18. window.onload = function (){
  19. createTree(3);
  20. }
  21. </ script >
  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 >

2. 再看一下生成樹的函數

  1. /***********************************
  2. 創建樹
  3. bychb
  4. ************************************/
  5. function createTree(n){
  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. });
  22. //根節點
  23. var root= new Ext.tree.TreeNode({
  24. id: "root" ,
  25. text: "集團公司" ,
  26. expanded: true
  27. });
  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); //設置根節點
  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. }
  19. node.expand();
  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. }
  36. }

讀者可以自己運行一下如上代碼，會發現如下現象：無論點擊“子公司1”多少次，只會列出“子公司1的第一個兒子”一個節點，而每點擊一次“子公司2”，就會多出一個“子公司2的第一個兒子”節點，這是為什么呢？

因為每次點擊都會激發myExpand函數，而“子公司1”上加了node.item(0)==undefined的判斷，這里明白了？

即：如果該部門下沒有子部門，則載入子部門，否則只展開，不重新載入。

截圖

好了，就到這里吧，困了，就不詳細解釋了o(∩_∩)o...哈哈

利用Ext Js生成動態樹


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧，站長會非常 感謝您的哦！！！

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板： 草草第一页 | 国产99视频精品免费视频免里 | 九九99久久精品国产 | 亚洲免费视频网址 | 欧美做爱毛片 | 亚洲精品久久久久影院 | 国产亚洲男人的天堂在线观看 | 色花堂国产精品第二页 | 伊人久久精品 | 国内精品自在自线视频香蕉 | 黄色毛片免费在线观看 | 日本一区二区三区四区公司 | 国产最新精品 | 亚洲高清在线观看视频 | 欧美大片一区 | 欧美精品久久久亚洲 | 福利影院第一页 | 亚洲精品一区二区三区福利 | 99热爱久久99热爱九九热爱 | 最新国产三级久久 | 久久91精品综合国产首页 | 97av视频在线播放 | 成人国产精品一级毛片视频 | 亚洲精品一区二区三区福利 | 色黄啪啪网18以下免费进 | 国产福利精品在线 | 久久厕所精品国产精品亚洲 | 日本不卡在线 | 久久视频这里只有精品 | 不卡视频免费在线观看 | 国内一区亚洲综合图区欧美 | 欧美精品在欧美一区二区 | 草草第一页| 久久亚洲精品人成综合网 | 天天爽天天操 | 国产亚洲精品久久久久久 | 九九免费视频 | 草草操 | 日本a∨在线 | 99热最新网站 | 亚洲欧美日韩一区二区在线观看 |