layui树形结构

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

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

后台获取数据源 JSON 方法

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

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

    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，js

 

   /***************************** 分配权限 ***********************************/
    layui.use('tree', function(){
        var tree = layui.tree;
        const datas = [[${treeData}]];
        //渲染
        var inst1 = tree.render({
            id:'menuTreeId'
            ,elem: '#tree'  //绑定元素
            ,data:datas
            //,edit:['add','update', 'del']
            ,spread: true //是否初始展开，默认false
            ,accordion: false //是否开启手风琴模式,默认 false
            ,showLine:true //是否开启连接线，默认为true,为false 文件夹左边出现三角符号
            ,text: {
                defaultNodeName: '未命名' //节点默认名称
                ,none: '无数据' //数据为空时的提示文本
            }
            ,checked: true //是否初始为选中状态，默认false
            ,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); //得到当前节点元素

            }
        });
    });
        function showTright(){
        layui.use('layer', function(){
            layer = layui.layer;
        });
        layer.open({
            type: 1,
            area: ['500px', '800px'],
            content: $('#dialog-tright') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }
    function save() {
        var tree = layui.tree;
        //获得选中的节点
        var checkData = tree.getChecked('menuTreeId');
        console.log("进入save()方法"+JSON.stringify(eachJsonTree(checkData)));//测试已转换为一维数组
    }
    //深度遍历，多维数组转变为一维数组
    function eachJsonTree(data) {
        var result = [];    // 存放结果
        (function traverse(node) {
            node.forEach(i => {
                result.push({
                    id: i.id, title: i.title,
                });
                // 有子数据的先遍历子数据
                i.children && traverse(i.children)
            })
        })(data);
        return result;
    }
    //广度遍历，多维数组转换为一维数组
    function gothrough(data) {
        const queue = [...data];
        const result = [];
        while (true) {
            const next = queue.shift();
            if (!next) {
                break;
            }
            result.push({
                id: next.id,
                title: next.title
            });
            if (Array.isArray(next.children)) {
                queue.push(...next.children);
            }
        }
        return result;

    }

 

 

 

参考链接：http://www.imooc.com/wenda/detail/511049