spring+mybatis 实现三级树形菜单 - Go语言中文社区

spring+mybatis 实现三级树形菜单


数据表的建立

  • roleinfo表->>用户表
    在这里插入图片描述
    在这里插入图片描述
  • menu表->>菜单表

在这里插入图片描述
在这里插入图片描述

  • role_menu表->>用户菜单中间表

在这里插入图片描述
在这里插入图片描述

mybatis(mysql)的实现

 <resultMap id="menuInfoMap" type="com.background.dto.MenuInfoDto">
        <id column="gid" property="id"></id>
        <result column="gname" property="name"></result>
        <result column="gpath" property="url"></result>
        <result column="gicon" property="icon"></result>
        <result column="gpid" property="pid"></result>
        <result column="checked" property="checked" ></result>
        <collection property="children" ofType="com.background.dto.MenuInfoDto">
            <id column="fid" property="id"></id>
            <result column="fname" property="name"></result>
            <result column="fpath" property="url"></result>
            <result column="ficon" property="icon"></result>
            <result column="fpid" property="pid"></result>
            <result column="checked" property="checked" ></result>
            <collection property="children" ofType="com.background.dto.MenuInfoDto">
                <id column="menuId" property="id"></id>
                <result column="menuName" property="name"></result>
                <result column="menuPath" property="url"></result>
                <result column="menuIcon" property="icon"></result>
                <result column="parentId" property="pid"></result>
                <result column="checked1" property="checked" ></result>
            </collection>
        </collection>
    </resultMap>
    <select id="getMenuInfos" resultMap="menuInfoMap" parameterType="int">
        SELECT tbl.*,rm.status checked,NULLIF(tbl.menuId and rm.status,null) checked1 from role_menu rm
        right JOIN(SELECT * from (SELECT m1.menuId gid,m1.menuname gname,m1.parentId gpid,m1.menuicon gicon,m1.menupath gpath, m2.menuId fid,m2.menuname fname,m2.parentId fpid,m2.menuicon ficon,m2.menupath fpath
        from menu m1,menu m2 where m1.parentId=0 and m2.parentId=m1.menuId)
        tal LEFT  JOIN menu m3 on tal.fid=m3.parentId) as tbl on (rm.menuid=tbl.menuid and rm.roleId=#{roleId})  or (rm.menuId=tbl.fid and tbl.menuId is null and rm.roleId=#{roleId})
    </select>

controler层

在这里插入图片描述

postman测试

  • json
    最后会生成如下的json
[
    {
        "id": 1,
        "pid": 0,
        "seqno": 0,
        "name": "系统权限管理",
        "url": null,
        "icon": null,
        "open": true,
        "checked": true,
        "children": [
            {
                "id": 2,
                "pid": 1,
                "seqno": 0,
                "name": "控制面板",
                "url": null,
                "icon": null,
                "open": true,
                "checked": true,
                "children": []
            },
            {
                "id": 3,
                "pid": 1,
                "seqno": 0,
                "name": "消息管理",
                "url": null,
                "icon": null,
                "open": true,
                "checked": true,
                "children": []
            },
            {
                "id": 4,
                "pid": 1,
                "seqno": 0,
                "name": "权限管理",
                "url": null,
                "icon": null,
                "open": true,
                "checked": true,
                "children": [
                    {
                        "id": 8,
                        "pid": 4,
                        "seqno": 0,
                        "name": "用户管理",
                        "url": null,
                        "icon": null,
                        "open": true,
                        "checked": true,
                        "children": null
                    },
                    {
                        "id": 9,
                        "pid": 4,
                        "seqno": 0,
                        "name": "角色管理",
                        "url": null,
                        "icon": null,
                        "open": true,
                        "checked": true,
                        "children": null
                    },
                    {
                        "id": 10,
                        "pid": 4,
                        "seqno": 0,
                        "name": "许可管理",
                        "url": null,
                        "icon": null,
                        "open": true,
                        "checked": true,
                        "children": null
                    }
                ]
            },
            {
                "id": 5,
                "pid": 1,
                "seqno": 0,
                "name": "资质管理",
                "url": null,
                "icon": null,
                "open": true,
                "checked": false,
                "children": [
                    {
                        "id": 11,
                        "pid": 5,
                        "seqno": 0,
                        "name": "分类管理",
                        "url": null,
                        "icon": null,
                        "open": true,
                        "checked": false,
                        "children": null
                    },
                    {
                        "id": 12,
                        "pid": 5,
                        "seqno": 0,
                        "name": "资质管理",
                        "url": null,
                        "icon": null,
                        "open": true,
                        "checked": true,
                        "children": null
                    }
                ]
            },
            {
                "id": 6,
                "pid": 1,
                "seqno": 0,
                "name": "流程管理",
                "url": null,
                "icon": null,
                "open": true,
                "checked": false,
                "children": []
            },
            {
                "id": 7,
                "pid": 1,
                "seqno": 0,
                "name": "审核管理",
                "url": null,
                "icon": null,
                "open": true,
                "checked": true,
                "children": [
                    {
                        "id": 13,
                        "pid": 7,
                        "seqno": 0,
                        "name": "实名认证人工审核",
                        "url": null,
                        "icon": null,
                        "open": true,
                        "checked": true,
                        "children": null
                    }
                ]
            }
        ]
    }
]

前端用ztree树插件实现,ajson请求json导入ztree上,生成一个树形菜单


<script src="ztree/jquery.ztree.all-3.5.min.js"></script>
        <script type="text/javascript">
            $(function () {
			    $(".list-group-item").click(function(){
				    if ( $(this).find("ul") ) {
						$(this).toggleClass("tree-closed");
						if ( $(this).hasClass("tree-closed") ) {
							$("ul", this).hide("fast");
						} else {
							$("ul", this).show("fast");
						}
					}
				});
				
				var setting = {
                    check : {
                        enable : true 
                    },
					view: {
						selectedMulti: false,
						addDiyDom: function(treeId, treeNode){
							var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
							if ( treeNode.icon ) {
								icoObj.removeClass("button ico_docu ico_open").addClass("fa fa-fw " + treeNode.icon).css("background","");
							}
						},
					},
					async: {
						enable: true,
						url:"tree.txt",
						autoParam:["id", "name=n", "level=lv"]
					},
					callback: {
						onClick : function(event, treeId, json) {

						}
					}
				};
                var search = location.search;
                var string = search.split("=")[1];
                $.ajax({
                    async: false,
                    cache: false,
                    traditional: true,
                    type: "POST",
                    url: "getMenuInfo",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        "roleId":string
                    }),
                    success:function(text){

                        $.fn.zTree.init($("#treeDemo"), setting, text);
                    },
                    error: function (text) {

                    },

                    dataType: "json"
                });
            });

        </script>

效果如下图

在这里插入图片描述

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/ppamos/article/details/89105335
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢