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 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP 基本语法格式
2009/12/15 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python绘制七段数码管实例代码
2017/12/20 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python里dict变成list实例方法
2019/06/26 Python
python判断自身是否正在运行的方法
2019/08/08 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
经典c++面试题三
2015/07/08 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
后勤工作职责
2013/12/22 职场文书
家电创业计划书
2019/08/05 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技