使用ztree展示樹形菜單結構
官網：http://www.treejs.cn/v3/main.php#_zTreeInfo
一、功能簡介
在權限系統中，實現給角色指定菜單權限的功能。主要包括以下幾點：
讀取全部菜單項，並以樹形結構展現；
勾選角色擁有的菜單權限，保存入庫；
重新編輯角色權限時，默認選中角色已有的菜單權限。
二、界面
三、實現過程
1.在服務端獲取全部菜單資源，並轉換為json字符串。
@RequestMapping("/edit")
public String edit(Integer roleId, Model model) {
……
//樹形菜單資源
List<Map<String, Object>> allResources = resourceService.getTreeMap();
//當前角色已有資源，設置checked和open屬性
if (roleId != null) {
Set<CmsResource> roleResources = resourceService.findByRoleId(roleId);
if (roleResources != null && !roleResources.isEmpty()) {
for (Map<String, Object> resource : allResources) {
Integer id =(Integer)resource.get("id");
for (CmsResource roleResource : roleResources) {
if (roleResource.getResourceId().equals(id)) {
resource.put("checked", true);
resource.put("open", true);
break;
}
}
}
}
}
//轉換為json字符串
String resourceJson = new Gson().toJson(allResources);
model.addAttribute("resourceJson", resourceJson);
return "/role/edit";
}
其中resourceService.getTreeMap()方法用來獲取全部菜單資源，主要包括這幾個字段：id,name,pId,open。
2.在view頁面引入tree控件，並初始化設置。
<link rel="stylesheet" th:href="@{/static/zTree_v3/css/zTreeStyle/zTreeStyle.css}”>
<script th:src="@{/static/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/zTree_v3/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/static/zTree_v3/js/jquery.ztree.excheck.js}"></script>
3.在view頁面中讀取服務端傳過來的resourceJson字符串，並使用ztree控件加載樹形結構。
<script th:inline="javascript">
/*<![CDATA[*/
var zTreeObj;
var setting = {
data: {
simpleData: {
enable: true
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {"Y": "ps", "N": "ps"}
}
};
//加載菜單
$().ready(function () {
var zNodes = eval(/*[[${resourceJson}]]*/);
zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
});
//保存之前調用該方法，獲取菜單當前選中項
function fillResourceIds(){
var resourceIds=new Array();
var treeObj = $.fn.zTree.getZTreeObj("ztree");
var nodes = treeObj.getCheckedNodes(true);
if(nodes){
for(var i in nodes){
resourceIds.push(nodes[i].id);
}
}
return resourceIds;
}
/*]]>*/
</script>
使用ztree展示樹形菜單結構