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 相关文章推荐
javascript 密码强弱度检测万能插件
Feb 25 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
关于js类的定义
Jun 28 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
js 小数取整的函数
2010/05/10 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
python实现泊松图像融合
2018/07/26 Python
python3.4爬虫demo
2019/01/22 Python
python实现两张图片的像素融合
2019/02/23 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python二元赋值实用技巧解析
2019/10/25 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
水毁工程实施方案
2014/04/01 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android