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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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删除数组元素示例分享
2014/02/17 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python assert语句的简单使用示例
2019/07/28 Python
python如何查看网页代码
2020/06/07 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
华为C++笔试题
2014/08/05 面试题
公司业务主管岗位职责
2013/12/07 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL