Thymeleaf用法

        
说明  :用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"/>&nbsp;&nbsp;
         
         
8下拉框和单选框回显    :                
select:

<label  class="col-sm-2 control-label">类别</label>
<div class="col-sm-8">
    <select  name="cId" id="cId" class="form-control1" >
        <option value="1" th:field="*{book.cId}">目录1</option>
        <option value="2" th:field="*{book.cId}">目录2</option>
        <option value="3" th:field="*{book.cId}">目录3</option>
        <option value="4" th:field="*{book.cId}">目录4</option>
    </select>
</div>

<button type="button" class="btn btn-primary" th:οnclick="'saveUserBatch('+'\''+${personVo.id} + '\''+');'">确定</button>

radio:

 <label for="isBoy" class="col-sm-2 control-label">是否男生</label>
    <div id="isBoy" class="col-sm-8">
        <div class="radio-inline">
            <label><input name="isBoy" type="radio" value="1"  th:field="*{book.isBoy}"/> 否</label>
        </div>
        <div class="radio-inline">
            <label><input name="isBoy" type="radio" value="0"  th:field="*{book.isBoy}"/> 是</label>
        </div>
    </div>        
        

回显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="*"表示默认,需写在最后

<div class="top" th:switch="${area}">
        <div class="logo" th:case="'a'">
            <img th:src="@{/static/images/logo-A.png}">
        </div>
        <div class="logo" th:case="'b'">
            <img th:src="@{/static/images/logo-B.png}">
        </div>
        <div class="logo" th:case="*">
            <img th:src="@{/static/images/logo-c.png}">
        </div>
    </div>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值