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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
Javascript实现单选框效果
Dec 09 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
自荐信封面
2013/12/04 职场文书
公共场所禁烟标语
2014/06/25 职场文书
领导欢迎词致辞
2015/01/23 职场文书
滴水洞导游词
2015/02/10 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫