创建异步树形菜单

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页面