layui樹形菜單動(dòng)態(tài)遍歷的例子
1、前端jsp頁(yè)面
<%@ 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){ //點(diǎn)擊節(jié)點(diǎn)回調(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é)點(diǎn) { name: '申請(qǐng)文件' ,id: 1 ,alias: 'shenqingwenjian' ,spread: true //默認(rèn)展開 ,children:function(){ var arr = []; <c:forEach items="${applyRequestList}" var="applyRequest"> <c:if test="${applyRequest.state == null }"> arr.push({ name:"請(qǐng)求書" ,preview: 'firstReceiveTree/toApplyRequestInfo/${applyRequest.idpk}' }); </c:if> <c:if test="${applyRequest.state != null}"> arr.push({ name:"請(qǐng)求書 <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樹形菜單動(dòng)態(tài)遍歷的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 使用layui實(shí)現(xiàn)樹形結(jié)構(gòu)的方法
- 詳解layui中的樹形關(guān)于取值傳值問題
- Layui tree 下拉菜單樹的實(shí)例代碼
- 使用layui+ajax實(shí)現(xiàn)簡(jiǎn)單的菜單權(quán)限管理及排序的方法
- 使用layui實(shí)現(xiàn)的左側(cè)菜單欄以及動(dòng)態(tài)操作tab項(xiàng)方法
- Layui 后臺(tái)加載菜單欄名稱以及url的例子
- Layui 導(dǎo)航默認(rèn)展開和菜單欄選中高亮設(shè)置的方法
- layui添加動(dòng)態(tài)菜單與選項(xiàng)卡
- layUI實(shí)現(xiàn)三級(jí)導(dǎo)航菜單效果
- layui實(shí)現(xiàn)三級(jí)導(dǎo)航菜單
- layui實(shí)現(xiàn)左側(cè)菜單點(diǎn)擊右側(cè)內(nèi)容區(qū)顯示
相關(guān)文章
TypeScript中使用getElementXXX()的示例代碼
這篇文章主要介紹了TypeScript中使用getElementXXX()的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09js版掃雷實(shí)現(xiàn)代碼 原理不錯(cuò)
前一段時(shí)間在圖書館看了本關(guān)于JavaScript的書,上面講怎樣用js編推箱子小游戲。我想,那掃雷也當(dāng)然能編出來,然后就用DW試了試,結(jié)果如下。2009-11-11淺析如何利用JavaScript進(jìn)行語(yǔ)音識(shí)別
所謂語(yǔ)音識(shí)別就是將你所說的轉(zhuǎn)化成文字。Chrome 瀏覽器在版本25之后開始對(duì)這一特性的支持。這篇文章將會(huì)詳細(xì)的介紹如何使用JavaScript進(jìn)行語(yǔ)音識(shí)別,感興趣的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10JS選項(xiàng)卡動(dòng)態(tài)替換banner圖片路徑的方法
這篇文章主要介紹了JS選項(xiàng)卡動(dòng)態(tài)替換banner圖片路徑的方法,涉及javascript操作文件css樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05JavaScript canvas實(shí)現(xiàn)鏡像圖片效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)鏡像圖片效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-0824個(gè)解決實(shí)際問題的ES6代碼片段(小結(jié))
這篇文章主要介紹了24個(gè)解決實(shí)際問題的ES6代碼片段,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法分析
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Set與WeakSet的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03基于JS實(shí)現(xiàn)發(fā)送驗(yàn)證碼的計(jì)時(shí)器效果
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)一個(gè)發(fā)送驗(yàn)證碼的計(jì)時(shí)器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-11-11JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)過程中bug的解決方法
這篇文章主要為大家詳細(xì)介紹了解決JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)過程中的bug,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12