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

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接