EasyUI創建異步樹形菜單和動態添加標簽頁tab

創建異步樹形菜單

1. 創建樹形菜單的ul標簽

   <ul class="easyui-tree" id="treeMenu">
   </ul>

2. 寫js代碼，對菜單的ul標簽元素使用tree函數

   $(function(){
       $('#treeMenu').tree({
           url:'tree_data.json'  //url的值是異步獲取數據的頁面地址 
       });
   });

3. 寫用來異步獲取數據的php頁面(tree_data.json頁面)。
   返回的需是Json值(此處用數組代替從數據庫獲取的數據，以省略連接數據庫過程)

   $result = [];
   
   //節點一
   $prodArr = [
       "id" => 1,
       "text" => "商品管理",
       "state" => "open",
       "children" => [
           [
               "id" => 2,
               "text" => "添加商品",
               "state" => "open",
               "attributes" => [
                   "url" => "http://abc.com/test.php"
               ]
           ],
           [
               "id" => 3,
               "text" => "修改商品",
               "state" => "open",
               "attributes" => [
                   "url" => "http://abc.com/test2.php"
               ]
           ]
       ]
   ];
   
   //節點二
   $newsArr = [
       "id" => 10,
       "text" => "新聞管理",
       "state" => "open",
       "children" => [
           [
               "id" => 12,
               "text" => "添加新聞",
               "state" => "open"
           ],
           [
               "id" => 13,
               "text" => "修改新聞",
               "state" => "open"
           ]
       ]
   ];
   
   //節點三
   $userArr = [
       "id" => 20,
       "text" => "用戶管理",
       "state" => "open",
       "children" => [
           [
               "id" => 22,
               "text" => "添加用戶",
               "state" => "open"
           ],
           [
               "id" => 23,
               "text" => "修改用戶",
               "state" => "open"
           ]
       ]
   ];
   
   Array_push($result, $prodArr, $newsArr, $userArr);
   echo json_encode($result);

   說明：
   節點的屬性：
   id：節點ID,可以作為參數來異步向頁面地址獲取子節點數據
   text：節點文本
   state：節點狀態。取值為open(缺省默認值)或close。當設置為close時,會自動異步獲取子節點的數據
   checked：指明節點是否被選中。
   attributes：自定義屬性
   children：以數組的形式包含子節點       (更多細節知識可查看easyui官網中tree知識點)

 到這，異步樹形菜單就完成了。

 

動態添加標簽頁tab

1.  創建用來包裹標簽頁tab的外層標簽

   <div id="contentTabs" class="easyui-tabs" style="width:100%;height:100%;">
   </div> 

2. 在js中定義addTab函數

   function addTab(title, url){
       if ($('#contentTabs').tabs('exists', title)){
           $('#contentTabs').tabs('select', title);
       } else {
           var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
           $('#contentTabs').tabs('add',{
               title:title,
               content:content,
               closable:true
           });
       }
   }

3. 在樹形菜單的點擊事件函數中調用addTab函數

   $(function(){
       $("#treeMenu").tree({
           onClick:function(node){
               if (node.attributes !== undefined && node.attributes.url !== undefined) {
                   addTab(node.text,node.attributes.url);    
               }                                                                
           }
       });
   });

 

最后，如圖顯示