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='isRelease']").children().each(function(){
   　　if($(this).text()=='1'){
      　　$(this).text("是")
      }else if($(this).text()=='0'){
         $(this).text("否")
      }
   });
}

8.layUi中tableIns 展示嵌套實體對象內容

#實體
private String name;
private Equipment equipment;
private CsErrorcode csErrorcode;

var tableIns = table.render({
        elem: '#csEquiperrorList',
        url : '/csEquiperror/listData',
        cellMinWidth : 95,
        page : true,
        height : "full-125",
        limits : [10,20,30],
        limit : 10,
        id : "csEquiperrorListTable",
        cols : [[
            {type: "checkbox", fixed:"left", width:50},
            {field: 'equiperrorTime', title: '時間', minWidth:100, align:"center"},
            {title: '廠商名稱', minWidth:100, align:"center", sort: true,templet:function(d){
                    return d.equipment.empty6;}},
            {title: '儀器名稱', minWidth:100, align:"center", sort: true,templet:function(d){
                    return d.equipment.equipName;}},
            {title: '儀器型號', minWidth:100, align:"center", sort: true,templet:function(d){
                    return d.equipment.empty2;}},
            {title: '序列號', minWidth:100, align:"center", sort: true,templet:function(d){
                    return d.equipment.equipNumber;}},
            {title: '故障代碼', minWidth:100, align:"center", sort: true,templet:function(d){
                    return d.csErrorcode.errorcodeType;}}
　　　　]]
    });

 

未完待續.....