使用ztree展示树形菜单结构

简介:

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

一、功能简介

在权限系统中,实现给角色指定菜单权限的功能。主要包括以下几点:

读取全部菜单项,并以树形结构展现;

勾选角色拥有的菜单权限,保存入库;

重新编辑角色权限时,默认选中角色已有的菜单权限。

二、界面

Image

三、实现过程

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

,如需转载请自行联系原作者


相关文章
|
1月前
|
JSON JavaScript 前端开发
js树形菜单 如何用递归制作一个简单的树形菜单
js树形菜单 如何用递归制作一个简单的树形菜单
61 0
|
1月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
61 1
|
7月前
|
JavaScript
原生js树形菜单
原生js树形菜单
28 0
|
8月前
58EasyUI 树形菜单- 树形网格动态加载
58EasyUI 树形菜单- 树形网格动态加载
25 0
|
8月前
|
JavaScript 前端开发
52EasyUI 树形菜单- 树形菜单添加节点
52EasyUI 树形菜单- 树形菜单添加节点
34 0
|
8月前
57EasyUI 树形菜单- 创建复杂树形网格
57EasyUI 树形菜单- 创建复杂树形网格
39 0
|
8月前
56EasyUI 树形菜单- 创建基础树形网格
56EasyUI 树形菜单- 创建基础树形网格
29 0
|
9月前
|
前端开发 JavaScript 数据安全/隐私保护
Layui之动态树(树形菜单)详解1
Layui之动态树(树形菜单)详解1
194 0
|
1月前
|
JSON JavaScript 数据格式
jQuery 树型菜单完整代码
jQuery 树型菜单完整代码
|
1月前
Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?
Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?
43 0

热门文章

最新文章