layui+ztree+springboot动态构建树

效果图：

js文件

layui.use(['form', 'ztree', 'admin', 'ax','layer'], function () {
    var form = layui.form;
    var $ZTree = layui.ztree;
    var $ax = layui.ax;
    var layer=layui.layer;
    var admin=layui.admin;
    var MgrProject = {
        condition: {
            projectId: "",
            projectCode:""
        }
    };

    //添加属性
    $("#btnAttrAdd").bind('click',function(){
        var div = $($("#field-template").html());
        $("#field-content").append(div);
    });

    //添加子项目
    $("#btnSonAdd").click(function () {
        layer.open({
            type: 2,
            title: '添加子项目',
            area: ['500px', '500px'],
            content: Utils.ctxPath + '/project/project_add?parentId='+MgrProject.condition.projectId 
            +'&parentCode='+MgrProject.condition.projectCode
        });
    });


    //删除属性
    $("#btnAttrDel").click(function(){
        $(t).parent("div.project-attr").remove();
    });

    //删除项目
    $("#btnProjectDel").click(function(){
        var operation = function () {
            var ajax = new $ax(Utils.ctxPath + "/project/delete", function () {
                Utils.success("删除成功！");
                window.location.href=Utils.ctxPath + "/project";
            }, function (data) {
                Utils.error("删除失败！");
            });
            ajax.set("projectId", MgrProject.condition.projectId);
            ajax.start();
        };
        Utils.confirm("是否删除项目?", operation);
    });

    /**
     * 选择项目
     */
    MgrProject.onClickProject = function (e, treeId, treeNode) {
        var pid = treeNode.id;
        MgrProject.condition.projectId = pid;
        $(":hidden[name='projectId']").val(pid);
        var ajax = new $ax(Utils.ctxPath + "/project/detail", function (data) {
            var fieldContent = $("#field-content");
            fieldContent.find("div").remove();
            //回显项目信息
            MgrProject.condition.projectCode=data.projectCode;
            $(":text[name='projectCode']").val(data.projectCode);
            $(":text[name='projectName']").val(data.projectName);
            var attrs = data.projectAttrs;
            for(var i=0;i<attrs.length;i++){//回显项目属性
                var div = $($("#field-template").html());
                div.find(":text[name='attrName[]']").val(attrs[i].attrName);
                div.find(":text[name='attrValue[]']").val(attrs[i].attrValue);
                fieldContent.append(div);
            }
            $("#btnSonAdd,#btnBrother,#btnProjectDel").show();
        }, function (data) {
            Utils.error("获取项目失败，请重试！")
        });
        ajax.set("projectId",pid);
        ajax.start();
        return false;
    };

    //初始化左侧项目树
    var ztree = new $ZTree("projectTree", "/project/tree");
    ztree.bindOnClick(MgrProject.onClickProject);//为树绑定点击事件
    ztree.init();

    // 表单提交
    form.on('submit(btnSubmit)', function (data) {
        var ajax = new $ax(Utils.ctxPath + "/project/add", function (data) {
            Utils.success("添加成功！");
            window.location.href = Utils.ctxPath + "/project";

        }, function (data) {
            Utils.error("添加失败！" + data.responseJSON.message)
        });
        ajax.set(data.field);
        ajax.start();
        return false;
    });
});

HTML文件

@layout("/common/_container.html",{plugins:["ztree"],js:["/assets/project/project.js"]}){

<div class="layui-body-header">
    <span class="layui-body-header-title"></span>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md3 layui-col-lg2">
            <div class="layui-card">
                <div class="layui-card-body mini-bar">
                    <div class="ztree" id="projectTree"></div>
                </div>
            </div>
        </div> 
</div>
</div>
@}

树节点实体类

/**
 * Copyright 2018-2020 stylefeng & fengshuonan (https://gitee.com/stylefeng)
 * <p>
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * <p>
 * http://www.apache.org/licenses/LICENSE-2.0
 * <p>
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package cn.stylefeng.guns.base.pojo.node;

import lombok.Data;

import java.io.Serializable;

/**
 * jquery ztree 插件的节点
 *
 * @author fengshuonan
 * @date 2017年2月17日 下午8:25:14
 */
@Data
public class ZTreeNode implements Serializable {

    /**
     * 节点id
     */
    private String id;

    /**
     * 父节点id
     */
    private String pId;

    /**
     * 节点名称
     */
    private String name;

    /**
     * 是否打开节点
     */
    private Boolean open = true;

    /**
     * 是否被选中
     */
    private Boolean checked;

    /**
     * 节点图标  single or group
     */
    private String iconSkin;

    //默认图标
    private String icon;
    //开始时图标
    private String iconOpen;
    //关闭时图标
    private String iconClose;

    public String getIcon() {
        return type != null ? "/assets/common/module/zTree/css/zTreeStyle/img/myDiy/" + type + ".png" : "";
    }

    public void setIcon(String icon) {
        this.icon = icon;
    }
    /**
     * 是否父节点，异步加载时使用
     */
    private Boolean isParent;

    //子节点数
    private Integer count = 0;

    //类型：0-5各显示什么图标
    private Integer type;


    public ZTreeNode(String id, String pId, String name, Boolean open,
                     Boolean checked, Boolean isParent, Integer type) {
        this.id = id;
        this.pId = pId;
        this.name = name;
        this.open = open;
        this.checked = checked;
        this.isParent = isParent;
        this.type = type;
    }

    public ZTreeNode() {

    }

    /**
     * 创建ztree的父级节点
     *
     * @author fengshuonan
     * @Date 2018/12/23 4:51 PM
     */
    public static ZTreeNode createParent() {
        ZTreeNode zTreeNode = new ZTreeNode();
        zTreeNode.setChecked(true);
        zTreeNode.setId("0");
        zTreeNode.setName("顶级");
        zTreeNode.setOpen(true);
        zTreeNode.setPId("0");
        return zTreeNode;
    }
}

controller控制层：

 @RequestMapping(value = "/tree")
    @ResponseBody
    public List<ZTreeNode> tree() {
        ShiroUser user = ShiroKit.getUserNotNull();
        List<Long> roleList = user.getRoleList();
        if(roleList==null || roleList.size()==0)
            return null;
        List<ZTreeNode> tree = this.projectService.listProjectTree();
        return tree;
    }

 

mybatis的XML文件：

<select id="listProjectTree" resultType="cn.stylefeng.guns.base.pojo.node.ZTreeNode">
    SELECT project_id AS id, o.project_name AS name,o.parent_id AS pId
    ,(SELECT TOP 1 'true' FROM project po WHERE po.project_id = o.project_id ) AS "isParent"
    FROM project o
</select>

注意：sql语句查出来的字段名要与树节点实体类对应