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

标签：

创建异步树形菜单

1. 添加树形菜单的ul标签
   

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

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

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

   View Code
3. 写用来异步获取数据的页面(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：以数组的形式包含子节点

到这，异步树形菜单就完成了。

动态添加tab页面

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

标签：

原文地址：http://www.cnblogs.com/shenxinpeter/p/5865770.html