{ "id":"13", "pId":"0", "name":"菜单3"},
{ "id":"131", "pId":"13", "name":"菜单31","page":"xx.action"},
{ "id":"132", "pId":"13", "name":"菜单32","page":"xx.action"}
]
html片段
<div data-options="iconCls:'icon-remove'" title="非功能菜单">
<ul id="ztree3" class="ztree"></ul>
</div> <!-- 发送ajax请求获取动态json数据构造ztree -->
<script type="text/javascript">
$(function() {
var setting = {
data: {
simpleData: {
enable: true
}
}
};
$.ajax({
url:'${pageContext.request.contextPath}/json/menu.json',
type:'get',
data:'',
dataType:'json',
success:function (data) {
$.fn.zTree.init($("#ztree3"), setting, data);
}
});
});
</script>
为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"},
{ "id":"13", "pId":"0", "name":"菜单3"},
{ "id":"131", "pId":"13", "name":"菜单31","page":"xx.action"},
{ "id":"132", "pId":"13", "name":"菜单32","page":"xx.action"}
]html文件
<div data-options="iconCls:'icon-save'" title="ztree事件">
<ul id="ztree4" class="ztree"></ul>
</div> <!-- 为ztree节点绑定事件动态添加选项卡 -->
<script type="text/javascript">
$(function() {
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: function(event, treeId, treeNode) {
if(treeNode.page != undefined) {
var isExists = $("#et").tabs("exists", treeNode.name);
if(isExists) {
$("#et").tabs("select", treeNode.name);
} else {
$("#et").tabs("add", {
title:treeNode.name,
closable:true,
iconCls:"icon-edit",
content:"<iframe frameborder='no' height='100%' width='100%' src='"+ treeNode.page +"'></iframe>"
});
}
}
}
}
};
$.ajax({
url:'${pageContext.request.contextPath}/json/menu.json',
