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 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
微博营销计划书
2014/01/10 职场文书
《雾凇》教学反思
2014/02/17 职场文书
教师师德承诺书
2014/03/26 职场文书