说明 :用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:
<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>");
});
});