相思资源网 Design By www.200059.com
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"${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树形菜单动态遍历的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
layui,树形菜单,动态遍历
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无layui树形菜单动态遍历的例子的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。