這裡使用layui渲染的導航

實體類

dept.java

private int id; //id
    private String dept_name;   //部門名稱
    private int pid;    //上級部門id
    private int sort_num;   //排序值
    private int create_id;  //建立人
    private String create_time; //建立時間
    private int modify_id;  //修改人
    private String modify_time; //最後修改時間
    private
 
 int is_del; // 是否刪除 0 未刪除  1 已刪除
    private int status; //status
    private String remark;  //remark

    private List<Dept> deptChild = new ArrayList<>(); //部門迭代

DeptMapper.java

List<Dept> selectDeptForJsonMenu();

DeptMapper.xml

<resultMap type="com.ys.entity.Dept" id="deptFirst"
 
>
        <result column="id" property="id" javaType="java.lang.Integer" />
        <result column="dept_name" property="dept_name" javaType="java.lang.String" />
        <result column="sort_num" property="sort_num" javaType="java.lang.Integer" />
        <result column="create_time"
 
 property="create_time" javaType="java.lang.String" />
        <result column="modify_id" property="modify_id" javaType="java.lang.Integer" />
        <result column="modify_time" property="modify_time" javaType="java.lang.String" />
        <result column="is_del" property="is_del" javaType="java.lang.Integer" />
        <result column="status" property="status" javaType="java.lang.Integer" />
        <result column="remark" property="remark" javaType="java.lang.String" />
        <collection column="id" property="deptChild" javaType="java.util.ArrayList" select="selectDeptForJsonMenuChild"/>
    </resultMap>

    <!-- 查詢部門選單樹 -->
    <select id="selectDeptForJsonMenu" resultMap="deptFirst">
        SELECT * FROM sys_dept WHERE pid = 0 AND is_del = 0 ORDER BY sort_num
    </select>

    <select id="selectDeptForJsonMenuChild" resultMap="deptFirst" parameterType="java.lang.Integer">
        select * FROM sys_dept where pid = #{id} AND is_del = 0 ORDER BY sort_num
    </select>

DeptService.java

public List<Dept> selectDeptForJsonMenu(){
        return mapper.selectDeptForJsonMenu();
    }

DeptController.java

@RequestMapping(value = "selectDeptForJsonMenu",method={RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public List<Dept> selectDeptForJsonMenu(){
        return service.selectDeptForJsonMenu();
    }

html 引入layui.js,layui.css 並載入element模組.

<div id="leftMenu">

</div>

$(function(){
    $.ajax({
        method:'post',
        url:getPath+"dept/selectDeptForJsonMenu",
        dataType:'json',
        success:function(data){
            if(data.length > 0){
                var showlist = $('<ul class="layui-nav layui-nav-tree"></ul>');
                showall(data, showlist);
                $("#leftMenu").html(showlist);
            }else{ 
                $('#leftMenu').html('<span class="layui-btn layui-btn-primary" id="add">新增</span>') ; 
            }
        }
    });


    //json為json資料
    //parent為最終html拼接內容
    function showall(json, parent) {
        for (var i in json) {
            //有子節點 遍歷
            if (json[i].deptChild.length > 0) {
                //建立li
                var li = $('<li class="layui-nav-item layui-nav-itemed"></li>');
                $(li).append('<a href="javascript:;">'+json[i].dept_name+'</a>');
                $(li).append('<ul  class="layui-nav-child"></ul>').appendTo(parent);
                //將UL選中 回撥
                showall(json[i].deptChild, $(li).children().eq(1));
            }
            //無子級
            else {
               $('<li></li>').append('<a href="javascript:;">'+json[i].dept_name+'</a>').appendTo(parent);
            }
        }
    }

});