使用ztree展示樹形菜單結構

一、功能簡介

在權限系統中，實作給角色指定菜單權限的功能。主要包括以下幾點：

讀取全部菜單項，并以樹形結構展現；

勾選角色擁有的菜單權限，儲存入庫；

重新編輯角色權限時，預設選中角色已有的菜單權限。

二、界面

三、實作過程

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>     本文轉自 陳敬（Cathy） 部落格園部落格，原文連結： http://www.cnblogs.com/janes/p/7567300.html ，如需轉載請自行聯系原作者