layui树形菜单动态遍历的例子


Posted in Javascript onSeptember 23, 2019

1、前端jsp页面

<%@ page language="java" pageEncoding="UTF-8"
contentType="text/html; charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/scd/src/css/iconfont.css" rel="external nofollow" />
<script type="text/javascript">
 layui.use(['layer','tree'],function(){
 var layer = layui.layer
   ,$ = layui.jquery; 
 layui.tree({
 elem: '#demo1' //指定元素
 ,click: function(item){ //点击节点回调
  if(item.preview!=null){
   var index = layer.open({
   type: 2,
   title: item.name,
   content:"/varietySystem/"+item.preview
  });
  layer.full(index);
  $(window).on("resize",function(){
   layer.full(index);
  });
  }
 },
 nodes: [ //节点
  {
  name: '申请文件'
  ,id: 1
  ,alias: 'shenqingwenjian'
  ,spread: true //默认展开
  ,children:function(){
  var arr = [];
   <c:forEach items="${applyRequestList}" var="applyRequest">
    <c:if test="${applyRequest.state == null }">
     arr.push({
       name:"请求书"
       ,preview: 'firstReceiveTree/toApplyRequestInfo/${applyRequest.idpk}'
     });
     </c:if>
     <c:if test="${applyRequest.state != null}">
      arr.push({
       name:"请求书 <fmt:formatDate value="${applyRequest.correcttime}" pattern="yyyyMMdd" />"
       ,preview: 'firstReceiveTree/toApplyRequestInfo/${applyRequest.idpk}'
     });
    </c:if>
    </c:forEach>
   return arr;
  }()
  },
  {
  name: '中间文件'
  ,id: 1
  ,alias: 'zhongjianwenjian'
  ,children:function(){
    var arr = [];
    <c:forEach items="${StatementAndCorrection}" var="StatementAndCorrection">
     <c:if test="${StatementAndCorrection.type==0}">
      arr.push({
       name:"意见陈述书 <fmt:formatDate value="${StatementAndCorrection.submittime}" pattern="yyyyMMdd" />"
       ,preview: 'statementOpinion/preview?idpk=${StatementAndCorrection.typeid}'
     });
    </c:if>
    </c:forEach>
    return arr;
    }()
  },
  {
  name: '通知书'
  ,id: 1
  ,alias: 'tongzhishu'
  ,children:function(){
   var arr = [];
   <c:if test="${not empty formalityNoticeList}">
    <c:forEach items="${formalityNoticeList}" var="formalityNotice">
      arr.push({
      name:"手续合格通知书 <fmt:formatDate value="${formalityNotice.datewriting}" pattern="yyyyMMdd" />"
      ,preview: 'formalityNotice/noticeInfo/${formalityNotice.idpk}'
     });
    </c:forEach>
   </c:if>
   return arr;
  }()
  }
  ]
 });
});
</script>
<table class="layui-table free_tree" >
 <tbody>
  <tr>
   <td style="background: #fff;padding:0px;">
    <div style="width:240px;position:relative; max-height:545px; overflow:auto;" >
     <ul id="demo1"></ul>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<style>
 #demo1>li{
  background: #f2f2f2;
 padding: 4px 0 0 5px;
 border-bottom: 1px solid #e6e6e6;
 line-height:25px;
 }
 #demo1>li:last-child{
  border-bottom:none;
 }
 #demo1>li>a{
 padding-bottom: 4px;
 }
 #demo1>li ul{
  background: #fff;
  margin-left:-5px;
 }
 #demo1>li ul>li{
 border-bottom: 1px solid #e6e6e6;
 /*padding: 4px 0px 3px 27px;*/
 padding: 4px 0px 3px 6px;
 }
 #demo1>li ul li:first-child{
  border-top:1px solid #e6e6e6;
 }
 #demo1>li ul>li:last-child{
  border-bottom:none;
 }
 .layui-tree li i {
 padding-left: 3px;
 }
 .layui-tree li a cite{
  padding: 0 3px;
 }
 #demo1>li ul>li a cite{
  font-size:8px;
 }
 #demo1>li ul>li:hover{
  background: #f2f2f2;
 }
 .free_tree_style{
  margin-left:241px;
 }
</style>

以上这篇layui树形菜单动态遍历的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
最简单的tab切换实例代码
May 13 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 #Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 #Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 #Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 #Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 #Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Python合并字符串的3种方法
2015/05/21 Python
Python import用法以及与from...import的区别
2015/05/28 Python
python学生信息管理系统
2018/03/13 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
厂长助理岗位职责
2013/12/27 职场文书
关于逃课的检讨书
2014/01/23 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
主题教育活动总结
2014/05/05 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
活动新闻稿范文
2015/07/17 职场文书
防震减灾主题班会
2015/08/14 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
AJAX学习笔记
2021/05/18 Javascript
muduo TcpServer模块源码分析
2022/04/26 Redis