年终综述--以务实的态度谱写百里香叶新篇章
「时光不负,创作不停,本文正在参加2021年终总结征文大赛」
以此篇文章为thymeleaf相关使用以及功能为记录篇,之后会不定期更新,来充足、记录!
前篇
首先,年终总结篇我决定新开启一个篇章,以后将写一些实际中用到的或者接触到的实用方法,可以直接拿过来用的(包括应用场景和环境)!
今年一年,总结一句话就是充实,充实再充实!
这里就先谈一谈我和掘金的初识吧,其实就在四个月前,我和一个好朋友聊天时,经他提起到的,平时会在空闲掘金写一下笔记,记录一下学习经历。另外看到别人的评论、点赞、还有阅读量的不断增加,还是有一些小小的成就感的!参加一些活动不仅可以敦促自己,还可以获得一些小的奖品,有纪念意义!就这样我也就初始了掘金!
之后一个月里因为时间问题就没有下文了!不知哪一天突然想到,进入了掘金,然后看到正好有征文的活动,和自己空余时间也比较符合,就参与了活动,就这样连续参与了两个活动,慢慢的从初识也变成了熟悉了!几乎每天都会打开掘金看一看!当然也从中获得了一些小的奖品!
正片
回到这一篇的初衷,借以年终总结篇,开启新的篇章!这一篇就记录我最近刚接触到的thymeleaf运用时,虽现在已经了解清楚,但第一次使用时还是遇到了问题的方面!来开启新篇章的启程吧!
1、thymeleaf中回显表单数据
1.1单选框回显(男女性别为例)
完整版:
页面:th:href="@{/user/load/}+${u.id}",到controller层。
<a title="编辑" th:href="@{/user/load/}+${u.id}" class="ml-5" style="text-decoration:none">
<i class="Hui-iconfont"></i>
</a>
控制层:
(1)控制层接收到回显所需的id值:@PathVariable("id") Integer id
(2)使用model.addAttribute("user",user);绑定user对象。return返回到templates下的user/update.html页面
@Controller
@RequestMapping("user")
public class UserController {
@GetMapping("load/{id}")
public String load(@PathVariable("id") Integer id,Model model) {
User user = userService.selectByPrimaryKey(id);
model.addAttribute("user",user);
return "user/update";
}
}
1.1 单选框回显:
(1)如果sex属性是int或者Integer数据类型,使用: th:checked=" ${user.sex == 1}" 来对应值,确定选中状态。
(2)如果sex属性是String数据类型,使用 th:checked=" ${uer.sex eq '1'} " 来匹配。
<div class="radio-box">
<input th:checked="${user.sex} eq '1'" value="1" name="sex" type="radio" id="sex-1" >
<label for="sex-1">男</label>
</div>
<div class="radio-box">
<input th:checked="${user.sex} eq '2'" type="radio" value="2" id="sex-2" name="sex" >
<label for="sex-2">女</label>
</div>
<div class="radio-box">
<input th:checked="${user.sex} ne '1'" type="radio" value="3" id="sex-3" name="sex" >
<label for="sex-3">保密</label>
</div>
1.2下拉框回显(区域为例)
通过<select></select>
标签中的field属性。
th:field和th:value区别
- th:field取值时,后台不能用reques.setAttribute()来传值,可以用model.addAttribute()来传值;th:value都可以接收。
2.使用th:field属性可以在页面初始化的时候给对应的元素生成Id。即id="zone"可以不用写出。
<select th:field="${user.zone}" class="input-text" th:value="${user.zone}" name="zone" id="zone">
<option value="">请选择区域范围</option>
<option th:selected="${user.zone=='中区'}" value="中区">中区</option>
<option th:selected="${user.zone=='东区'}" value="东区">东区</option>
<option th:selected="${user.zone=='西区'}" value="西区">西区</option>
<option th:selected="${user.zone=='南区'}" value="南区">南区</option>
<option th:selected="${user.zone=='北区'}" value="北区">北区</option>
</select>
2、thymeleaf获取复选框的绑定的id(以批量删除为例)
完整版:
复选框:通过<input type="checkbox" th:value="${u.id}" name="checkboxId">
绑定复选框的值为id,之后就是需要获取id的方式了。
<table class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="70">序号</th>
<th width="100">姓名</th>
<th width="70">性别</th>
<th width="130">手机号码</th>
</tr>
</thead>
<tbody>
<tr th:each="u:${listUser}" class="text-c">
<td><input type="checkbox" th:value="${u.id}" name="checkbox"></td>
<td th:text="${uStat.count}">序号</td>
<td th:text="${u.name}">姓名</td>
<td th:text="${u.sex}">性别</td>
<td th:text="${u.telphone}">手机号码</td>
点击事件:执行函数funxction()
<a href="javascript:;" onclick="del_user()" class="btn btn-danger radius">
<i class="Hui-iconfont"></i> 批量删除
</a>
获取复选框所有绑定的id值:
方法一:通过document.getElementsByName("checkbox");获取所有name="checkbox"且被选中(checked)的id值(通过value=$(u .id)绑定的)的对象,遍历obj获取每一个单选框,通过连接成字符串。
function del_user() {
var obj = document.getElementsByName("checkbox");
var checkedId = "";
for (k in obj) {
if (obj[k].checked)
checkedId += obj[k].value + ",";
}
方法二:通过document.getElementsByName("checkbox");获取所有name="checkbox"且被选中(checked)的id值(通过value=$(u .id)绑定的)的对象,遍历obj,获取每一个单选框,添加到一个数组中。
function del_user() {
var obj = document.getElementsByName("checkbox");
var check_arr = [];
for (var i = 0; i < obj.length; i++) {
if (obj[i].checked)
check_arr.push(obj[i].value);
}
}
点击事件中通过ajax传入将数据传到后端:(放在function del_user(){ 加入ajax将数据传入后端 })
var flag = window.confirm("你确定要删除这些记录吗");
if(flag){
$.ajax({
type:"get",
url:"/user/delete",//传输到controller成/userdelete路径
data:{"checkedId":checkedId},
success:function (msg) {
alert(msg);
window.parent.location.reload()//刷新父页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},
success:function (msg) {
alert(msg);
},
});
}
后端:
@ResponseBody:将return返回的数据通过json格式传回.数据为 success:function (msg) {},中的msg
@GetMapping("delete"):请求映射地址的注解,支持get请求。
@RequestMapping("user"):请求映射地址的注解,支持get,post请求。
Strings.isEmpty(checkedId):org.apache.logging.log4j.util包下的一个Strings类判断字符串为空的一个方法。
实现批量删除方法:对于数组:遍历数组,单个删除;对于字符串:先分割成数组,再遍历数组,单个删除。
@Controller
@RequestMapping("user")
public class UserController {
@ResponseBody
@GetMapping("delete")
public String delete(@RequestParam("checkedId") String checkedId) {
if (Strings.isEmpty(checkedId)){
return "未选中";
}
String[] ids = checkedId.split(",");
for (int i = 0; i < ids.length; i++) {
userService.deleteByPrimaryKey(Integer.parseInt(ids[i]));
}
return "删除成功";
}
}
上一种删除方法可以说是假批量删除,通过在后端循环遍历获取单个数组,然后单个删除,另一种方法,是直接在UserMapper.xml编写批量删除的语法
示例:id="delUser" 对应UserMapper的方法名
<delete id="delUser" parameterType = "java.util.entity.po.User">
delete from user where 1>2
or id in
<foreach collection="list" item="id" open="(" separator="," close=")" >
#{id}
</foreach>
</delete>
以此篇文章为thymeleaf相关使用以及功能为记录篇,之后会不定期更新,来充足、记录!