JS无限级导航/菜单

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36476972/article/details/80506384

这里使用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);
            }
        }
    }

});