160418、ztree权限菜单

1、页面中引用ztree的css和js(大家自行下载ztree)

<link rel="stylesheet" href="${ctx}/resources/js/plugins/ztree/zTreeStyle/demo.css" type="text/css">
<link rel="stylesheet" href="${ctx}/resources/js/plugins/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/resources/js/plugins/ztree/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/plugins/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/plugins/ztree/jquery.ztree.excheck-3.5.js"></script>

2、javascript

<script type="text/javascript">
var setting = {
/* check: {
enable: true
}, */
data: {
simpleData: {
enable : true,
idKey : "id",
pIdKey : "pId",
rootPId : "0"
}
},
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
if (treeNode.murl) {
var url = "${appctx}" + treeNode.murl;
document.getElementById("mainFrame").src = url;
}
}
}
};

var zNodes;

$(document).ready(function(){
$.ajax({
url : "${appctx}/menu/getMenuData.action",
type : "post",
dataType : "json",
async : false,
success : function(datas){
zNodes = datas;
}
});
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>

3、body中添加div

<div id="treeDemo" class="ztree"></div>

 

注：后台返回的json数据

[{id:1, pId:0, name:"系统设置",open:true},{id:11, pId:1, name:"菜单管理"},{id:12, pId:1, name:"角色管理"},{id:13, pId:1, name:"人员管理"}];