<div data-options="iconCls:'icon-remove'" title="非功能菜单"> <ul></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></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' src='"+ treeNode.page +"'></iframe>" }); } } } } }; $.ajax({ url:'${pageContext.request.contextPath}/json/menu.json', type:'get', data:'', dataType:'json', success:function (data) { $.fn.zTree.init($("#ztree4"), setting, data); } }); }); </script>