JS无限级导航菜单实现方法

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<>(); //部门迭代

List<Dept> selectDeptForJsonMenu();

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

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

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

<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:;" rel="external nofollow" rel="external nofollow" >'+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:;" rel="external nofollow" rel="external nofollow" >'+json[i].dept_name+'</a>').appendTo(parent);      }    }  }});