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"/>
<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>