SpringBoot + layui生成tree数据

项目笔记一：

使用BootSpring 获取数据库菜单信息并组装成layui tree组件可识别的方式动态加载数据

1. 根据layui格式创建实体类：

public class LayuiTree implements Serializable {
    private long id;//树节点id,也是菜单id

    private String title;//树节点名称

    private long parent_id;

    private List<LayuiTree> children;//该节点的子节点集合

    public LayuiTree(long id, String title, long parent_id, List<LayuiTree> children) {
        this.id = id;
        this.title = title;
        this.parent_id = parent_id;
        this.children = children;
    }

    public LayuiTree() {
    }

    public long getId() {
        return id;
    }

    public String getTitle() {
        return title;
    }

    public List<LayuiTree> getChildren() {
        return children;
    }
    
 	 public long getParent_id() {
        return parent_id;
    }
    
    public void setId(long id) {
        this.id = id;
    }

  

    public void setParent_id(long parent_id) {
        this.parent_id = parent_id;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public void setChildren(List<LayuiTree> children) {
        this.children = children;
    }
}

2. 编写mapper.xml文件，这一步直接将数据以layui tree组件所需格式组装起来

<mapper namespace="com.power.system.mapper.IMenuMapper">
	<resultMap type="LayuiTree" id="menuTreeMap">
        <id column="MENU_ID" property="id"/>
        <result column="PARENT_ID" property="parent_id"/>
        <result column="MENU_NAME" property="title"/>
        <collection property="children" ofType="LayuiTree" column="MENU_ID" select="getMenuChildren"/>
    </resultMap>

<!-- 先查询菜单根级目录 -->
    <!-- 这里的返回结果必须为resultMap，并且值为上面构建的resultMap的id的值 -->
    <select id="findAllRecursion" resultMap="menuTreeMap">
        SELECT MENU_ID,PARENT_ID,MENU_NAME FROM t_menu  WHERE  parent_id=0
    </select>
    <!-- 再利用上次查询结果colliection中column的值cid做递归查询，查出所有子菜单 -->
    <!-- 这里的返回结果必须为resultMap，并且值为上面构建的resultMap的id的值 -->
    <select id="getMenuChildren" resultMap="menuTreeMap">
        SELECT
            *
        FROM
            t_menu
        WHERE
            parent_id= #{id}
    </select>
</mapper>

此处参考博客：

https://blog.csdn.net/frankcheng5143/article/details/72723958

此时

 public List<LayuiTree> findAllRecursion();

返回的已经是layui tree组件可识别的数据了

3.前台页面获取给tree组件赋值：

function treeData(tree, edit, layer) {
        $.ajax({
            method: 'get',
            url: 'system/menu',
            success: (data) => {
                if (data != null) {
                    console.log('树形框数据：',data)
                    tree.render({
                        elem: '#test1' //绑定元素
                        , showCheckbox: true
                        , id: 'demoId1'
                        , showLine: true
                        , data: data
                        , edit: edit //操作节点的图标
                    });
                }
            },
            dataType: 'json'
        })
    }

效果图：

layui tree动态数据加载完成，下一篇是解决tree组件不同权限的角色如何显示自己的功能