利用Ext Js生成動態(tài)樹
今天在公司幫同事寫了個用Ext Js生成動態(tài)樹的Demo，在這里分享一下，也好供以后自己查閱。
一. 需求
- 要求生成一顆部門樹，初始只列出根部門
- 當點擊一個部門節(jié)點時，動態(tài)載入該部門下的直屬子部門，并展開該部門節(jié)點
- 部門節(jié)點要求支持右鍵單擊事件，當點擊右鍵時，列出相關(guān)操作菜單
二. 關(guān)鍵類
這里主要涉及Ext JS的兩個類:
- Ext.tree.TreeNode
- Ext.menu.Menu
相關(guān)API可以參考： http://extjs.com/deploy/ext/docs/
三. 代碼示例
1. 先看一下測試頁面
- < html >
- < head >
- < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" >
- < title > ReorderTreePanel </ title >
- < link rel = "stylesheet" type = "text/css" href = "../../resources/css/ext-all.css" />
- < script type = "text/javascript" src = "../../adapter/ext/ext-base.js" > </ script >
- < script type = "text/javascript" src = "../../ext-all.js" > </ script >
- < script type = "text/javascript" src = "reorder.js" > </ script >
- <!--CommonStylesfortheexamples-->
- < link rel = "stylesheet" type = "text/css" href = "../shared/examples.css" />
- < link rel = "stylesheet" type = "text/css" href = "../shared/lib.css" />
- < script type = "text/javascript" >
- /**************
- onload事件
- ***************/
- window.onload = function (){
- createTree(3);
- }
- </ script >
- </ head >
- < body >
- < script type = "text/javascript" src = "../shared/examples.js" > </ script >
- < h1 > 現(xiàn)在要生成一顆動態(tài)樹 </ h1 >
- < div id = "container" >
- </ div >
- </ body >
- </ html >
2. 再看一下生成樹的函數(shù)
- /***********************************
- 創(chuàng)建樹
- bychb
- ************************************/
- function createTree(n){
- Ext.QuickTips.init();
- var mytree= new Ext.tree.TreePanel({
- el: "container" ,
- animate: true ,
- title: "Extjs動態(tài)樹" ,
- collapsible: true ,
- enableDD: true ,
- enableDrag: true ,
- rootVisible: true ,
- autoScroll: true ,
- autoHeight: true ,
- width: "30%" ,
- lines: true
- });
- //根節(jié)點
- var root= new Ext.tree.TreeNode({
- id: "root" ,
- text: "集團公司" ,
- expanded: true
- });
- for ( var i=0;i<n;i++){
- var sub1= new Ext.tree.TreeNode({
- id:i+1,
- text: "子公司" +(i+1),
- singleClickExpand: true ,
- listeners:{
- //監(jiān)聽單擊事件
- "click" : function (node){
- myExpand(node);
- },
- //監(jiān)聽右鍵
- "contextmenu" : function (node,e){
- //列出右鍵菜單
- menu= new Ext.menu.Menu([
- {
- text: "打開當前節(jié)點" ,
- icon: "list.gif" ,
- handler: function (){
- myExpand(node);
- }
- },
- {
- text: "編輯當前節(jié)點" ,
- icon: "list.gif" ,
- handler: function (){
- alert(node.id);
- }
- },
- {
- text: "刪除當前節(jié)點" ,
- icon: "list.gif" ,
- handler: function (){
- alert(node.id);
- }
- }]);
- //顯示在當前位置
- menu.showAt(e.getPoint());
- }
- }
- });
- root.appendChild(sub1);
- }
- mytree.setRootNode(root); //設置根節(jié)點
- mytree.render(); //不要忘記render()下,不然不顯示哦
- }
3. 展開子節(jié)點的代碼
- /******************************************
- 展開節(jié)點
- ******************************************/
- function myExpand(node){
- if (node.id== '1' ){
- if (node.item(0)==undefined){
- node.appendChild( new Ext.tree.TreeNode({
- id:node.id+ '1' ,
- text:node.text+ "的第一個兒子" ,
- hrefTarget: "mainFrame" ,
- listeners:{ //監(jiān)聽
- "click" : function (node,e){
- expand2(node)
- }
- }
- }));
- }
- node.expand();
- } else if (node.id== '2' ){
- node.appendChild( new Ext.tree.TreeNode({
- id:node.id+ '2' ,
- text:node.text+ "的第一個兒子" ,
- hrefTarget: "mainFrame" ,
- listeners:{ //監(jiān)聽
- "click" : function (node){
- expand2(node)
- }
- }
- }));
- } else {
- alert(node.id+ "沒有子部門了" );
- }
- }
讀者可以自己運行一下如上代碼，會發(fā)現(xiàn)如下現(xiàn)象：無論點擊“子公司1”多少次，只會列出“子公司1的第一個兒子”一個節(jié)點，而每點擊一次“子公司2”，就會多出一個“子公司2的第一個兒子”節(jié)點，這是為什么呢？
因為每次點擊都會激發(fā)myExpand函數(shù)，而“子公司1”上加了node.item(0)==undefined的判斷，這里明白了？
即：如果該部門下沒有子部門，則載入子部門，否則只展開，不重新載入。
好了，就到這里吧，困了，就不詳細解釋了o(∩_∩)o...哈哈
更多文章、技術(shù)交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
