1. 单选框
1)方法一
add.html
// checked:默认选中
<div class="form-group">
<label class="col-sm-3 control-label">性别:</label>
<div class="col-sm-8">
<label class="radio-box"> <input type="radio" name="sex" value="1" checked/> Yes </label>
<label class="radio-box"> <input type="radio" name="sex" value="0" /> No </label>
</div>
</div>
edit.html
// 此时,默认选中,就根据th:field="*{sex}最终获取的值进行绑定
<div class="form-group">
<label class="col-sm-3 control-label">性别:</label>
<div class="col-sm-8">
<label class="radio-box"> <input type="radio" name="sex" value="1" th:field="*{sex}"/> Yes </label>
<label class="radio-box"> <input type="radio" name="sex" value="0" th:field="*{sex}"/> No </label>
</div>
</div>
2)方法二
<input type="radio" name="repaymentType"
th:each ="repaymentType:${repaymentTypeList}"
th:value="${repaymentType.dictName}"
th:text ="${repaymentType.dictName}"
th:attr ="checked=${financeProductDO.repaymentType == repaymentType.dictName?true:false}">
2. 复选框
1)方法一
下面的代码,add.html和edit.html里面都可以使用
// 其中主要代码是这段th:checked="${channelList.contains(dict.dictValue)?true:false}",决定是否选中多选框
<div class="form-group">
<label class="col-sm-3 control-label">Country Item:</label>
<div class="col-sm-8">
<div class="check-box" th:each="dict : ${@dict.getType('country')}">
<input type="checkbox" name="countryList" th:id="${dict.dictCode}" th:value="${dict.dictValue}" th:checked="${channelList.contains(dict.dictValue)?true:false}">
<label th:for="${dict.dictCode}" th:text="${dict.dictValue}"></label>
</div>
</div>
</div>
其中,channelList是Add添加时传过来的数据,如下代码
@GetMapping("/add")
public String add(ModelMap modelMap)
{
String channels = "";//已选中的数据,可以通过数据库的表中获取,例如:String channels = "xxx,yyy,zzz";
//将字符串转换为List集合
List<String> channelList = Arrays.asList(channels.split(","));
modelMap.put("channelList", channelList);
return prefix + "/add";
}
2) 方法二
<input type ="checkbox" name="companyRole"
th:each ="role : ${companyRoleList}"
th:value="${role.dictName}"
th:text ="${role.dictName}"
th:attr ="checked=${companyInformation.companyRole.contains(role.dictName)?true:false}">
3)方法三
#strings.arraySplit(x,y)方法是将字符串转换成数组的方法类似与前台中的str.split(x,y)中的x是需要被截取的字符串,y是分隔符。#string.toString(m)方法就是单纯的将数据值转换成字符串的方法,如果原数据已经是字符串则不需要转换可以直接写成m即可。
<div class="col-sm-8">
<div class="check-box" th:each="dict : ${@dict.getType('task_day_of_week')}">
<input type="checkbox" name="dayOfWeek2" th:id="${dict.dictCode}" th:value="${dict.dictValue}" th:checked="${#arrays.contains(#strings.arraySplit(job.dayOfWeek,','),#strings.toString(dict.dictValue))}">
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
</div>
</div>
3. 下拉框
user:controller层获取的user对象
busi:controller层获取的businessList集合,通过th:each遍历businessList集合,获取busi对象
user.businessId:user对象中的businessId属性
busi.businessId:busi对象中的businessId属性
th:each——》对controller层获取到的集合进行遍历
th:value——》类似于标签上的value属性
th:text——》类似于1234标签中1234的值
th:selected——》类似于<select selected = ""true>标签中的selected被选中
<option th:selected="${user.businessId eq busi.businessId}"
th:each="busi:${businessList}"
th:value="${busi.businessId}"
th:text="${busi.businessName}" >
</option>
4. 搜索下拉框
这个就有点儿高级了,需要引入两个文件,分别是select2-css和select2-js文件
// 放在head标签里面,我是为了与若依的风格保持一致
<th:block th:include="include :: select2-css" />
//
<th:block th:include="include :: select2-js" />
两个文件都引入了,接下来,就是html代码了
add.html
// 获取字典中的数据的使用方法,这个是供参考之一
<div class="form-group">
<label class="col-sm-3 control-label">Defalut country:</label>
<div class="col-sm-8">
<select id="dictType" name="title" class="form-control">
<option th:each="dict : ${@dict.getType('country')}" th:text="${dict.dictValue}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
从后台获取的数据
public String add(ModelMap mmap) {
List<CountryList> countryList = countryListService.selectCountryList(null);
mmap.put("channelList",countryList);
return prefix + "/add";
}
add.html
<div class="form-group">
<label class="col-sm-3 control-label">Hotel destination:</label>
<div class="col-sm-8">
<select name="countryListId" class="form-control">
<option th:each="countryList: ${channelList}" th:text="${countryList.defalutCountry}" th:value="${countryList.id}"></option>
</select>
</div>
</div>
public String edit(@PathVariable("id") Integer id, ModelMap mmap) {
// 这里只是举个栗子
H h= hs.shById(id);
mmap.put("h", h);
List<CountryList> countryList = countryListService.selectCountryList(null);
mmap.put("channelList",countryList);
return prefix + "/edit";
}
edd.html
// 其中要绑定的话,就要th:field中的值(也就是从后台获取到的某字段值)与th:value中的值一致
<div class="form-group">
<label class="col-sm-3 control-label">Hotel destination:</label>
<div class="col-sm-8">
<select name="countryListId" class="form-control" th:field="*{countryListId}">
<option th:each="countryList: ${channelList}" th:text="${countryList.defalutCountry}" th:value="${countryList.id}"></option>
</select>
</div>
</div>
搞定。。。
版权声明:本文为qq_40572200原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。