使用ztree展現樹形菜單結構

官網：http://www.treejs.cn/v3/main.php#_zTreeInfo

1、功能簡介

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

讀取所有菜單項，並以樹形結構展示；

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

從新編輯角色權限時，默認選中角色已有的菜單權限。

2、界面

3、實現過程

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>