国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JS無限級導航菜單實現(xiàn)方法

2019-11-19 12:19:26
字體:
供稿:網(wǎng)友

這里使用layui渲染的導航

實體類

dept.java

private int id; //id  private String dept_name;  //部門名稱  private int pid;  //上級部門id  private int sort_num;  //排序值  private int create_id; //創(chuàng)建人  private String create_time; //創(chuàng)建時間  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數(shù)據(jù)  //parent為最終html拼接內(nèi)容  function showall(json, parent) {    for (var i in json) {      //有子節(jié)點 遍歷      if (json[i].deptChild.length > 0) {        //創(chuàng)建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選中 回調(diào)        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);      }    }  }});

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對武林網(wǎng)的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 商洛市| 莫力| 通化市| 吉隆县| 凌海市| 河池市| 台前县| 黑山县| 闽清县| 互助| 江阴市| 大埔县| 化隆| 汤原县| 永登县| 普宁市| 资阳市| 罗定市| 明水县| 清河县| 彰武县| 无为县| 安福县| 景谷| 大理市| 南通市| 康定县| 祥云县| 手机| 珲春市| 大渡口区| 沾化县| 浠水县| 祁阳县| 汨罗市| 天镇县| 邵东县| 阿勒泰市| 闽侯县| 武陟县| 都匀市|