欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-29 08:51:19
这里使用layui渲染的导航 实体类 dept.java private int id; //id private string dept_name;...

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

总结

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