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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 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 array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
Python ljust rjust center输出
2008/09/06 Python
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
让python在hadoop上跑起来
2016/01/27 Python
Python人脸识别初探
2017/12/21 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
一套Delphi的笔试题二
2013/05/11 面试题
阿德的梦教学反思
2014/02/06 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
青年文明号口号
2014/06/17 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2015年共青团工作总结
2015/05/15 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript