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实现可输入搜索文字的下拉框
Oct 23 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
微信小程序实现简单表格
Feb 14 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
使用 JavaScript 制作页面效果
Apr 21 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
php 数组的一个悲剧?
2011/05/11 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
微信营销策划方案
2014/02/24 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
简单租房协议书范本
2014/08/20 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫