若依表单篇(前后端不分离),持续更新中
若依表单篇
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"field="*{sex}"/> Yes </label>
<label class="radio-box"><input type="radio"name="sex"value="0"field="*{sex}"/> No </label>
</div>
</div>
2)⽅法⼆
<input type="radio"name="repaymentType"
each="repaymentType:${repaymentTypeList}"
value="${repaymentType.dictName}"
text="${repaymentType.dictName}"
attr="checked=${paymentType == repaymentType.dictName?true:false}">
2. 复选框
1)⽅法⼀
下⾯的代码,add.html和edit.html⾥⾯都可以使⽤
// 其中主要代码是这段th:checked="${ains(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"each="dict : ${@Type('country')}">
<input type="checkbox"name="countryList"id="${dict.dictCode}"value="${dict.dictValue}"checked="${ains(dict.dictValue)? true:false}">
<label for="${dict.dictCode}"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(","));
htmlradio的text出不来modelMap.put("channelList", channelList);
return prefix +"/add";
}
2)⽅法⼆
<input type="checkbox"name="companyRole"
each="role : ${companyRoleList}"
value="${role.dictName}"
text="${role.dictName}"
attr="checked=${ains(role.dictName)?true:false}">
3)⽅法三
#strings.arraySplit(x,y)⽅法是将字符串转换成数组的⽅法类似与前台中的str.split(x,y)中的x是需要被截取的字符串,y是分隔符。
#String(m)⽅法就是单纯的将数据值转换成字符串的⽅法,如果原数据已经是字符串则不需要转换可以直接写成m即可。
<div class="col-sm-8">
<div class="check-box"each="dict : ${@Type('task_day_of_week')}">
<input type="checkbox"name="dayOfWeek2"id="${dict.dictCode}"value="${dict.dictValue}"checked="${#ains(#strings.arraySplit(job. dayOfWeek,','),#String(dict.dictValue))}">
<label for="${dict.dictCode}"text="${dict.dictLabel}"></label>
</div>
</div>
3. 下拉框
<option selected="${user.businessId eq busi.businessId}"
each="busi:${businessList}"
value="${busi.businessId}"
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 each="dict : ${@Type('country')}"text="${dict.dictValue}"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 each="countryList: ${channelList}"text="${countryList.defalutCountry}"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"field="*{countryListId}">
<option each="countryList: ${channelList}"text="${countryList.defalutCountry}"value="${countryList.id}"></option> </select>
</div>
</div>
搞定。。。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论