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


Posted in Javascript onJanuary 05, 2019

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

总结

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

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
用console.table()调试javascript
Sep 04 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
vue--vuex详解
Apr 15 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 #Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 #Javascript
JavaScript常见事件处理程序实例总结
Jan 05 #Javascript
JavaScript代码调试方法实例小结
Jan 05 #Javascript
JavaScript实现连连看连线算法
Jan 05 #Javascript
JavaScript错误处理操作实例详解
Jan 04 #Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 #Javascript
You might like
PHPExcel简单读取excel文件示例
2016/05/26 PHP
客户端静态页面玩分页
2006/06/26 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
初步讲解Python中的元组概念
2015/05/21 Python
Python中生成Epoch的方法
2017/04/26 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python数据库小程序源代码
2019/09/15 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
超级搞笑检讨书
2014/01/15 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
村干部培训方案
2014/05/02 职场文书
网络优化专员求职信
2014/05/04 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
HTTP中的Content-type详解
2022/01/18 HTML / CSS