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

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