Function instances used by spring boot using Thymeleaf +layui

1.input tag echo

Use the th:value tag for back-up, and the backend uses the ModelMap to send the queried object or list to the foreground

The foreground uses < input type = "text" th: value = "user. User name" id = "username" name = "username" >

2.select tag echo

Echo using the th:field label,

Front desk use

<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 label echo

Echo with th:text label

Front desk use

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

4. Use th:each to cycle through the list display table

<table class="layui-table" style="width: 80%; /*margin: 0 auto;*/">
  <thead>
     <tr>
        <th>File name</th>
         <th>file type</th>
         <th>Upload time</th>
         <th>operation</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} + '\')'">delete</a>
        <a th:href="${info.mmRelative}+${info.pdfName}" target="_blank">preview</a>
             <a th:href="@{'/csRisk/downloadFile?mmId='+${info.mmId}}">download</a>
         </td>
      </tr>
</table>

5. Use th:onclick to jump to trigger events

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

6. layUi judges the button display according to the table data

{fixed: 'right', title:'operation', toolbar: '#barDemo', width:150,align:"center"}
<script type="text/html" id="barDemo">

    {{#  if(d.type== 0){ }}
        <a herf="javascript:;" lay-event="release" >release</a>
        <a herf="javascript:;" lay-event="detail" >View details</a>
    {{# }if(d.type == 1){ }}
        <a herf="javascript:;" lay-event="detail" >View details</a>
    {{# } }}
</script>

7. Judge the data in table in layui (0 No 1 yes)

{field: 'isRelease', title: 'Publish or not', minWidth:100, align:"center"}}],

done: function (res, curr, count) {

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

To be continued

Tags: Javascript

Posted on Mon, 11 May 2020 13:01:37 -0400 by hongco