spring boot 使用 Thymeleaf +layui 使用到的功能實例

1.input 標簽回顯

使用th:value標簽進行回先，後端使用 ModelMap 將查詢到的對象或list 傳到前臺

前臺使用 <input type = "text" th:value = "user.userName"  id = "userName" name = "userName" >進行回顯

2.select 標簽回顯

使用 th:field 標簽進行回顯，

前臺使用  

<select th:field="user.type" name = "type" id = "type" >
    <option th:case="'1'" th:selected = "selected" value="1" > 1</option>
    <option th:case="'2'" th:selected = "selected" value="2" > 2</option>
</select>

3.textarea 標簽回顯

使用th:text標簽進行回顯

前臺使用

<textarea th:text="${user.content}" class="layui-textarea" style="width: 700px;height: 100px;" id="riskContent" name="riskContent" disabled></textarea>

4. 使用th:each 進行迴圈list 展示表格

<table class="layui-table" style="width: 80%; /*margin: 0 auto;*/">
　　<thead>
   　　<tr>
      　　<th>文件名稱</th>
         <th>文件類型</th>
         <th>上傳時間</th>
         <th>操作</th>
      </tr>
   </thead>

      <tr th:each="info,findCsRiskFile : ${findCsRiskFile}">
         <td th:text="${info.fileName}"></td>
         <td th:text="${info.fileType}"></td>
         <td th:text="${#dates.format(info.mmCreatetime, 'yyyy-MM-dd HH:mm:ss')}"></td>
         <td><a href="javascript:void(0)" th:data="${info.mmId}"  th:onclick = "'javascript:deleteFile(\'' + ${info.mmId} + '\')'">刪除</a>
　　　　　　　　<a th:href="${info.mmRelative}+${info.pdfName}" target="_blank">預覽</a>
             <a th:href="@{'/csRisk/downloadFile?mmId='+${info.mmId}}">下載</a>
         </td>
      </tr>
</table>

5. 使用 th:onclick 跳轉觸發事件

<a href="javascript:void(0)" th:data="${info.fileId}"  th:onclick = "'javascript:deleteFile(\'' + ${info.fileId} + '\')'">刪除</a>

6. layUi 根據table數據判斷按鈕顯示情況

{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align:"center"}

<script type="text/html" id="barDemo">

    {{#  if(d.type== 0){ }}
        <a herf="javascript:;" lay-event="release" >發佈</a>
        <a herf="javascript:;" lay-event="detail" >查看詳情</a>
    {{# }if(d.type == 1){ }}
        <a herf="javascript:;" lay-event="detail" >查看詳情</a>
    {{# } }}
</script>

7. layUi 中對table 中數據 判斷 （0 否 1 是 ）

{field: 'isRelease', title: '是否發佈', minWidth:100, align:"center"}}],

done: function (res, curr, count) {

　　$("[data-field='earlywarnIsrelease']").children().each(function(){
   　　if($(this).text()=='1'){
      　　$(this).text("是")
      }else if($(this).text()=='0'){
         $(this).text("否")
      }
   });
}

未完待續.....