layui 树形 Ztree

最新推荐文章于 2024-06-28 03:45:22 发布

左--右

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量1.5k

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41080067/article/details/115460996

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Layui的tree组件展示后台权限管理的树形菜单。通过Ajax从后台获取数据，结合Mybatis一对多查询，实现了根据角色ID动态设置菜单项的展开状态和选中状态。在Controller中，根据角色ID判断子菜单的权限，并设置相应的属性。整个过程展示了前端与后端的交互以及权限控制的实现。

摘要由CSDN通过智能技术生成

 layui.use(['tree', 'util'], function() {
        var tree = layui.tree
            , layer = layui.layer
            , util = layui.util,
            $ = layui.$,
            //模拟数据
           data = [
                {
                    title:"系统设置",
                    id:6,
                    href:"",
                    checked: true,
                    spread: true,
                    children:[
                        {
                            id:7,
                            href:"systemuser/user/page",
                            title:"用户管理"
                        },
                        {
                            href:"role/page",
                            title:"角色管理",
                            id:16,
                            children:null
                        }
                    ]
                },
                {
                    title:"企业板块",
                    id:10,
                    href:"",
                    spread: true,
                    children:[
                        {
                           title:"企业信息",
                           id:4,
                           href:"enterprise/page"
                        },
                        {
                             title:"人才数据库",
                             id:11,
                             href:"talents/page"
                        },
                        {
                             title:"人才补助申请",
                             id:12,
                             href:"talentSubsidy/viewList"
                        }
                    ]
                },
                {
                    title:"固定资产",
                    id:1,
                    href:"",
                    children:[
                        {
                            title:"收入利润利税",
                            id:2,
                            href:"fixed/assets/view/list",
                            fixed:true
                        },
                        {
                            title:"产值销售",
                            id:3,
                            href:"market/view/list"
                        },
                        {
                            title:"评价指标",
                            id:5,
                            href:"evaluation/page"
                        }
                    ]
                },
                {
                    title:"信息发布",
                    id:8,
                    href:"",
                    children:[
                        {
                            title:"新闻发布",
                            id:9,
                            href:"pressconference/page"
                        }
                    ]
                },
                {
                     title:"企业认证模块",
                     id:13,
                     href:"",
                    children:[
                        {
                            title:"企业认证",
                            id:14,
                            href:"enterpriseRZ/page",
                            children:null
                        },
                        {
                            title:"人才认证",
                            id:15,
                            href:"talentsRZ/page",
                            children:null
                        }
                    ]
                }
            ]
            ;
            layer.ready(function(){
            $.ajax({
                url: "/role/menuList",
                data: {roldid:'[[${bean.roldid}]]'}, //请求的附加参数，用json对象
                dataType: "JSON",
                method: 'POST',
                async: false,
                success: function (data) {
                    if(data.code==200){
                        // 获得frame索引
                        data2= JSON.stringify(data.data);
                        console.log(JSON.stringify(data2))
                        //树形 加载数据
                        tree.render({
                            elem: '#test12'
                            ,data: data.data
                            ,showCheckbox: true  //是否显示复选框
                            ,id: 'demoId1'
                            ,isJump: false //是否允许点击节点时弹出新窗口跳转
                            // ,click: function(obj){
                            //     var data = obj.data;  //获取当前点击的节点数据
                            //     layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                            // }
                        });
                    }else {
                        layer.msg(data.msg, { icon: 5, time: 500 }, function () {

                        })
                    }

                },
                error:function () {
                    layer.msg("失败!", { icon: 5, time: 500 }, function () {

                    })}
            });
        });

后台传集合：
bean:

public class Menu {
	private String id;
	private String title;
	private String href;
    private boolean checked;
    private boolean spread;
	private List<Menu> children;
}

Controller:

@RequestMapping("/role/menuList")
    @ResponseBody
    public ResponseObject menuList (HttpServletRequest request){
        List<Menu>  listMenu= null;
        try {
                listMenu = service.selectShouquan();
            request.setAttribute("value",listMenu);
            String roldid = request.getParameter("roldid");
        for (Menu menu : listMenu) {
           // menu.getId() roldid
            Boolean is1= service.isChild(roldid,menu.getId());
            if (is1) {
//                menu.setChecked(true);
                menu.setSpread(true);
            }else {
                menu.setChecked(false);
                menu.setSpread(false);
            }
            List<Menu> children = menu.getChildren();
            for (Menu child : children) {
                Boolean is2= service.isChild(roldid,child.getId());
                if (is2) {
                    child.setChecked(true);
                    child.setSpread(true);
                }else {
                    child.setChecked(false);
                    child.setSpread(false);
                }
            }
        }
            code=200;
            msg="成功!";
        } catch (Exception e) {
            e.printStackTrace();
            code=500;
            msg="失败！";
        }
        return new ResponseObject(code,msg,listMenu);
    }

mapper:
mybatis一对多查询

	<resultMap id="sqMap" type="com.langran.mingshuidata.model.Menu">
		<id column="id" property="id"></id>
		<result column="title" property="title"></result>
		<result column="href" property="href"></result>
		<collection property="children" ofType="com.langran.mingshuidata.model.Menu">
			<id column="mid" property="id"></id>
			<result column="mtitle" property="title"></result>
			<result column="mhref" property="href"></result>
		</collection>
	</resultMap>
	<select id="selectShouquan" resultMap="sqMap">
 	select u.*,m.id mid,m.title mtitle,m.href mhref,m.icon micon,m.parentId mparentId,m.status mstatus
	from data_menu m ,  data_menu u where m.parentId=u.id
	</select>