当前位置： 移动技术网 > IT编程>开发语言>JavaScript > spring boot 使用 Thymeleaf +layui 使用到的功能实例

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

2020年05月12日  | 移动技术网IT编程  | 我要评论

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("否")
      }
   });
}

未完待续.....

 

　　　　

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网