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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
js中的string.format函数代码
Aug 11 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
js全选按钮的实现方法
Nov 17 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
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版本号
2006/10/09 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
wxPython 入门教程
2008/10/07 Python
Python sys.path详细介绍
2013/10/17 Python
Python中集合类型(set)学习小结
2015/01/28 Python
详解Python学习之安装pandas
2019/04/16 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
应届生人事助理求职信
2013/11/09 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
社区中秋节活动方案
2014/01/29 职场文书
员工培训协议书
2014/09/15 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书