EasyUI创建异步树形菜单和动态添加tab页面

Posted 2020-08-08 美丽的梭罗河

创建异步树形菜单

1. 创建树形菜单的ul标签
   

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

   View Code
2. 写js代码，对菜单的ul标签元素使用tree函数
   

   $(function(){
       $(\'#treeMenu\').tree({
           url:\'tree_data.json\'  //url的值是异步获取数据的页面地址 
       });
   });

   View Code
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);

   View Code

   说明：
   节点的属性：
   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> 

   View Code
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
           });
       }
   }

   View Code
3. 在树形菜单的点击事件函数中调用addTab函数
   

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

   View Code

 

最后，如图显示