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

1、前端jsp页面<%@pagelanguage="java"pageEncoding="UTF-8"contentType="text/html;charset=utf-8"%><%@taglibur

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树形菜单动态遍历的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。