<div style="height: 100px;" data-options="region:'north'">北部区域</div>
<div style="width: 200px;" data-options="region:'west'">
<div class="easyui-accordion" data-options="fit:true">
<div data-options="iconCls:'icon-save'" title="系统菜单">
<a id="btn" class="easyui-linkbutton">按钮</a>
</div>
<div data-options="iconCls:'icon-remove'" title="业务菜单">
<ul id="ztree1" class="ztree"></ul>
</div>
<div data-options="iconCls:'icon-remove'" title="功能菜单">内容3</div>
<div data-options="iconCls:'icon-remove'" title="非功能菜单">内容4</div>
</div>
</div>
<div style="" data-options="region:'center'">
<div id="et" class="easyui-tabs" data-options="fit:true">
<div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>
<div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
</div>
</div>
<div style="width: 100px;" data-options="region:'east'">东部区域</div>
<div style="height: 50px;" data-options="region:'south'">南部区域</div>
</body>
</html>
使用简单json数据构造ztree
<div data-options="iconCls:'icon-remove'" title="功能菜单">
<ul id="ztree2" class="ztree"></ul>
</div> <!-- 使用简单json数据构造ztree -->
<script type="text/javascript">
$(function() {
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
{"id":2, "pId":0, "name":"test2"},
{"id":3, "pId":0, "name":"test3"},
{"id":31, "pId":2, "name":"test31"}
];
$.fn.zTree.init($("#ztree2"), setting, zNodes);
});
</script>
发送ajax请求获取动态json数据构造ztree
json内容
[
{ "id":"11", "pId":"0", "name":"菜单1"},
{ "id":"111", "pId":"11", "name":"菜单11", "page":"xx.action"},
{ "id":"112", "pId":"11", "name":"菜单12","page":"xx.action"},
{ "id":"113", "pId":"11", "name":"菜单13", "page":"xx.action"},
{ "id":"114", "pId":"11", "name":"菜单14","page":"xx.action"},
{ "id":"12", "pId":"0", "name":"菜单2"},
{ "id":"121", "pId":"12", "name":"菜单21" ,"page":"xx.action"},
{ "id":"122", "pId":"12", "name":"菜单22" ,"page":"xx.action"},
{ "id":"123", "pId":"12", "name":"菜单23" ,"page":"xx.action"},
