layui树形结构

主要有基础参数和 数据源属性

layui 官方文档：https://www.layui.com/doc/modules/tree.html

后台获取数据源，方法

调用获取tree需要的数据源：

        //查询所有的最顶级菜单
        List<Menu> childrenMenus = menuServiceImpl.list(new QueryWrapper<Menu>().isNull("parent_id"));
        List<JSONObject> jsonObjects = menuServiceImpl.menuData(childrenMenus);

前段layui，js

    public List<JSONObject> menuData(List<Menu> rootMenus) {
        JSONObject jsonObject = new JSONObject();
        List<JSONObject> l1 = new ArrayList<>();
        for (Menu menu : rootMenus) {
            jsonObject = new JSONObject();
            Integer menuId = menu.getId();
            jsonObject.put("id", menuId);
            jsonObject.put("spread",true);//是否展开。
            //jsonObject.put("checked",true);//是否初始为选中状态，默认false
            jsonObject.put("title", menu.getName());
            List<Menu> childrenMenus = list(new QueryWrapper<Menu>().eq("parent_id", menuId));
            //jsonObject.put("href", menu.getAttributes().get("href"));//rr.getAttributes()
            if (!CollectionUtils.isEmpty(childrenMenus)) {
                List<JSONObject> lss = menuData(childrenMenus);
                jsonObject.put("children", lss);
            }
            l1.add(jsonObject);
        }
        return l1;
    }

 

    /***************************** 分配权限 ***********************************/
    layui.use('tree', function(){
        var tree = layui.tree;
        const datas = [[${treeData}]];//这里使用的前端模板是thymeleaf
        //渲染
        var inst1 = tree.render({
            elem: '#tree'  //绑定元素
            ,data:datas
            //,edit:['add','update', 'del']
            ,accordion: false //是否开启手风琴模式,默认 false
            ,showLine:true //是否开启连接线，默认为true,为false 文件夹左边出现三角符号
            ,text: {
                defaultNodeName: '未命名' //节点默认名称
                ,none: '无数据' //数据为空时的提示文本
            }

            ,showCheckbox: true    //是否显示复选框
            ,click: function(obj){
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素

                console.log(obj.data.children); //当前节点下是否有子节点
            }
            ,oncheck: function(obj){//复选框点击的回调
                console.log(obj.data); //得到当前点击的节点数据
                console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
                console.log(obj.elem); //得到当前节点元素
            }
        });
    });