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;}}
　　　　]]
    });

 

未完待续.....