這里使用layui渲染的導航

實體類

dept.java

private int id; //id  private String dept_name;  //部門名稱  private int pid;  //上級部門id  private int sort_num;  //排序值  private int create_id; //創(chuàng)建人  private String create_time; //創(chuàng)建時間  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數(shù)據(jù)  //parent為最終html拼接內(nèi)容  function showall(json, parent) {    for (var i in json) {      //有子節(jié)點 遍歷      if (json[i].deptChild.length > 0) {        //創(chuàng)建li        var li = $('<li class="layui-nav-item layui-nav-itemed"></li>');        $(li).append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" >'+json[i].dept_name+'</a>');        $(li).append('<ul class="layui-nav-child"></ul>').appendTo(parent);        //將UL選中 回調(diào)        showall(json[i].deptChild, $(li).children().eq(1));      }      //無子級      else {        $('<li></li>').append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" >'+json[i].dept_name+'</a>').appendTo(parent);      }    }  }});