layui樹形菜單動態(tài)遍歷的例子
更新時間:2019年09月23日 08:40:41 作者:何家大少
今天小編就為大家分享一篇layui樹形菜單動態(tài)遍歷的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
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){ //點擊節(jié)點回調(diào)
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: [ //節(jié)點
{
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:"手續(xù)合格通知書 <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樹形菜單動態(tài)遍歷的例子就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 使用layui實現(xiàn)樹形結(jié)構(gòu)的方法
- 詳解layui中的樹形關(guān)于取值傳值問題
- Layui tree 下拉菜單樹的實例代碼
- 使用layui+ajax實現(xiàn)簡單的菜單權(quán)限管理及排序的方法
- 使用layui實現(xiàn)的左側(cè)菜單欄以及動態(tài)操作tab項方法
- Layui 后臺加載菜單欄名稱以及url的例子
- Layui 導(dǎo)航默認展開和菜單欄選中高亮設(shè)置的方法
- layui添加動態(tài)菜單與選項卡
- layUI實現(xiàn)三級導(dǎo)航菜單效果
- layui實現(xiàn)三級導(dǎo)航菜單
- layui實現(xiàn)左側(cè)菜單點擊右側(cè)內(nèi)容區(qū)顯示
相關(guān)文章
通過js腳本復(fù)制網(wǎng)頁上的一個表格的不錯實現(xiàn)方法
通過js腳本復(fù)制網(wǎng)頁上的一個表格的不錯實現(xiàn)方法...2006-12-12
ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識點整理之函數(shù)對象參數(shù)默認值及其解構(gòu)應(yīng)用,結(jié)合實例形式分析了ES6函數(shù)對象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-04-04
js實現(xiàn)省市區(qū)三級聯(lián)動非select下拉框版
這篇文章主要為大家詳細介紹了js實現(xiàn)省市區(qū)三級聯(lián)動非select下拉框版,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
Function.prototype.call.apply結(jié)合用法分析示例
昨天在網(wǎng)上看到一個很有意思的js面試題:var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);alert(a); 分析步驟如下,感興趣的朋友可以參考下哈2013-07-07
JavaScript樹結(jié)構(gòu)深度優(yōu)先算法
這篇文章主要介紹了JavaScript樹結(jié)構(gòu)深度優(yōu)先算法,樹結(jié)構(gòu)可以說是前端中最常見的數(shù)據(jù)結(jié)構(gòu)之一,比如說DOM樹、級聯(lián)選擇、樹形組件,更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-07-07

