Thymeleaf用法

最新推荐文章于 2023-02-17 14:21:24 发布

java-yu

最新推荐文章于 2023-02-17 14:21:24 发布

阅读量336

点赞数

文章标签： java html

本文链接：https://blog.csdn.net/xihuanxiaoxin/article/details/108364989

版权

说明：用Thymeleaf在前台下拉列表取值
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<script th:inline="javascript">
/*<![CDATA[*/ /*]]>*/

1循环列表：
   <tr class="c-table__row" th:each="user,userStats:${userList}">

2超链接跳转：
<a th:href="@{/person/info/toUpdateBatch(id=${user.id})}">配置年度</a>
th:href="@{/Controller/behavior(param1=1,param2=${person.id})}"。就是使用逗号隔开多个参数！！！
<td><a href="javascript:void(0)" th:οnclick="'getCVRUserInfo(\''+${info.id}+'\')'" th:text="${info.serial_code}"></a></td>

3字段赋值： <input class="form-control" th:value="${personVo.realName}" type="text" style="width:400px"/>
日期格式化：<td th:text="${#dates.format(info.addTime,'yyyy-MM-dd')}"></td>
<td th:text = "${#dates.format(info.updateDate,'yyyy-MM-dd HH:mm:ss')}"></td>

4javascript 取值： [[${currentPage}]]

5onclick 传值   用 onclick 传值 th:οnclick="'javascript:deleteUser('+${user.userID}+')'
   th:οnclick= "|javascript:edit('${noticemodel.mid}')|"
6添加属性值如果是有多个属性要hidden，只需要用逗号隔开就可以了：
   <div id="cityBtn" class="btn" th:attr="data-cityId=${cityId}, data-regionId=${regionId}" th:text="${cityName}"" >上海
       <span class="fa fa-angle-down"></span>
   </div>
       var cityId= $(this).data("desc")

   <span th:if="${batch.startTime} != null">
                   日期格式化
<td th:text="${#dates.format(user.createDate,'yyyy-MM-dd HH:mm:ss')}"></td>
       设置bootstrap-datetimepicker默认如期
   $("#addTime").datetimepicker("setDate", new Date());

7下拉框赋值：
               <div>
<label for="sex1" class="control-label">班级:</label>
<select class="form-control" name="cid">
<option>请选择班级</option>
<option th:each="list:${session.list}" th:value="${list.cid}" th:text="${list.cname }"></option>
</select>
</div>

check赋值 <input type="checkbox" th:value="${user.id}" th:th="${user.auditStatus}" class="mgc mgc-primary check"/>  


8下拉框和单选框回显   ：
select：

radio：

回显1
<select name="photo" class="form-control">
       <option value="-1">有无照片</option>
       <option th:selected="${photo == '1'}" value="1">有</option>
       <option th:selected="${photo == '0'}" value="0">无</option>
   </select>
2

   <select class="form-control" name="roleId" id="roleId" style="width:236px;">
           <option th:value="-1">请选择角色</option>
      <option th:selected="${roleId eq roleList.roleId}" th:each="roleList:${searchRoleLists}" th:value="${roleList.roleId}" th:text="${roleList.roleName }"></option>
   </select>

如果要实现if else if else 判断表达式，在thymeleaf要使用th:switch代替，th:case="*"表示默认，需写在最后

gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=
这里以th:if为例，其他差不多
<div th:if=" ${userRoeId eq '1129C20DDD2C412DBA10F4E961331E4D' || userRoeId eq '59FABB6C600B4AAEBB2BD31D85DEF913'}">

用法：例 th:if="${xx} lt 'x'" <-----------> xx < x
<div th:if=" ${userCarSize} lt '3'">
<div class="addList">
<p>
<a id="gotobindView">
<span class="icon"></span>添加绑定
</a>
</p>
<p>最多绑定三辆车</p>
</div>
</div>


9引入页面：
   <div th:fragment="pageI()">

   $.ajax({
                   url : "/console/confRole/save",
                   data : confRoleVo,
                   type : "post",
                   dataType : "json",
                   beforeSend : function() {
                   // loading show
                   },success : function(result) {
                       if (result.status==1) {
   layer.msg(result.msg);
                           //关闭模态框
                           $('#myModal').modal('hide');
   window.location.reload();
                       }else {
   layer.msg(result.msg);
                       }
                   },complete : function() {

                   },error : function(data) {
                       alert("error");
                   }
               });

11 jquery 循环遍历：list 并拼接字符串到table
       $.ajax({
           url : "/dicData/getDicDataListByTypeId",
           data : {
               dictTypeId:id
           },
           type : "get",
           dataType : "json",
           beforeSend : function() {
               // loading show
           },
           success : function(ret) {
               $("#project tr:not(:first)").empty(); //清空除第一行的表数据
       var tbody = "";
               $.each(ret,function(n,value) {
                   var trs = "";
           trs = "<tbody> < tr class='bg-link'> <td> " +(n+1)+" </td> <td>" + value.dataDesc +"</td> <td>" + value.code +"</td><td>" + value.dataDesc +"</td></tr></tbody>";
           tbody=trs;
           $("#project").append(tbody); //拼接行到table
               });
           }
       });
<table id="project" width="100%%" border="0" cellspacing="0" cellpadding="0" class="cq_table">
<tbody>
<tr>
<th>序号</th>
<th>字典类别</th>
<th>字典编码</th>
<th>操作</th>
</tr>
</tbody>
</table>



//时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat:function(time) {
var date=new Date(time);
var year=date.getFullYear();
/* 在日期格式中，月份是从0开始的，因此要加0
* 使用三元表达式在小于10的前面加0，以达到格式统一如 09:11:05
* */
var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
// 拼接
return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
}



                       function deletePerson(){
       var inputs = $("input[type='checkbox']:checked");
   var length = inputs.length;
   if(length<=0){
       alert("请选择一条记录");
       return;
   }
   var userIds = [];
   inputs.each(function(){
       userIds.push($(this).val());
   });
   userIds.join(",");
       $.ajax({
           url : "/person/info/deletePerson",
           type : "post",
           data : {userIds : userIds},
traditional: true,//数组格式转换加上这个就可以了
           //dataType : "json",
           beforeSend : function() {
           // loading show
           },success : function(ret) {
               if(ret.status==1){
    layer.msg(ret.msg,{time:500},function(){
   window.location.reload();
});
   }
           }
       });
   }

文件下载
@RequestMapping(value = "/download")
   public ResponseEntity<byte[]> download(HttpServletRequest request,HttpServletResponse response,String uploadPath,Integer id) throws Exception{

       File file = new File("E:/"+File.separator+Photo.getAbsolutePath(uploadPath));
       HttpHeaders headers = new HttpHeaders();
       headers.setContentDispositionFormData("attachment", file.getAbsolutePath());
       headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
       return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers,HttpStatus.CREATED);
   }

$(document).ready(function(){
//增加<tr/>
$("#but").click(function(){
var _len = $("#tab tr").length;
alert(_len)
$("#tab").append("<tr id="+_len+" align='center'>"
+'<td><input type="text" name="modelAttrs['+(_len-1)+'].sequence" value="'+_len+'"></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].chName" notNull="false" maxLength="50" value="" ></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].enName" notNull="false" maxLength="100" value="" ></td>'
+'<td><select name="modelAttrs['+(_len-1)+'].dataType">'
+'<option value="1" >数字型</option>'
+'<option value="2" >字符型</option>'
+'<option value="3" >日期型</option>'
+'<option value="4" >浮点型</option>'
+'</select></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].dataLong" maxLength="50" value="" ></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].dictCode" maxLength="50" value="" ></td>'
+'<td><input type="text" class="text" name="modelAttrs['+(_len-1)+'].remark" maxLength="50" value="" ></td>'
+"<td><a href=\'#\' οnclick=\'deltr("+_len+")\'>删除</a></td>"
+"</tr>");
});

});