实现复选表的步骤:
1、首先需要画页面
<!--/row-->
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
[#--#assign定义一个变量,后面是变量的值--]
[#assign json=["周一","周二","周三","周四","周五","周六","周日"] /]
[#list json as data]
<div class="row week">
<input type="hidden" value="${data_index+1}" class="week_index">
<div class="col-sm-2 checkbox_height">
${data}
</div>
<div class="col-sm-5 week_child_s">
<div class="col-sm-4 checkbox_height">
<input type="checkbox" class="i-checks week_s" />上午
</div>
<div class="col-sm-8">
<input type="number" placeholder="上午预约人数 " class="form-control week_s_num" value=""/>
</div>
</div>
<div class="col-sm-5 week_child_x">
<div class="col-sm-4 checkbox_height">
<input type="checkbox" class="i-checks week_x" />下午
</div>
<div class="col-sm-8">
<input type="number" placeholder="下午预约人数" class="form-control week_x_num" value=""/>
</div>
</div>
</div>
[/#list]
</div>
</div>
</div>
</div>
//后台用于接收json字符串
<input type="hidden" value="" name="json" id="json">
2、点击事件,要是取消选中,就清空输入的值
$('.week_s,.week_x').on('ifChanged',function(){
if (!$(this).is(":checked")) {//如果取消选择,清空对应输入框
$(this).parent().parent().parent().find('input[type="number"]').val("");
}
});
3、页面中数据的提交,主要使用的是json格式
$('#sub').click(function () {
var flag = true;
var json = [];
var weekChild = $("input[type='checkbox']:checked").length;
if (weekChild == 0) {
art.warn("请设置时间!");
flag = false;
} else {
$('.week').each(function (index,item) {
var obj = new Object();
var type = $(item).find('.week_index').val();
var week_status = 1;//未选中
var week_s_status = 1;//未选中
var week_x_status = 1;//未选中
var s_val = 0;
var x_val = 0;
var chea = $(item).find(".week_child_s").find('.week_s').is(":checked");
if (chea) {
s_val = $(item).find(".week_child_s").find('.week_s_num').val();
if (s_val == '') {
art.warn("选中的设置内容不能为空!");
flag = false;
} else {
s_val = parseInt(s_val);
}
week_status = 2;
week_s_status = 2;
}
var cheb = $(item).find(".week_child_x").find('.week_x').is(":checked");
if (cheb) {
x_val = $(item).find(".week_child_x").find('.week_x_num').val();
if (x_val == '') {
art.warn("选中的设置内容不能为空!");
flag = false;
} else {
x_val = parseInt(x_val);
}
week_status = 2;
week_x_status = 2;
}
obj.type = type;
obj.week_status = week_status;//未选中
obj.week_s_status = week_s_status;//未选中
obj.week_x_status = week_x_status;//未选中
obj.s_val = s_val;
obj.x_val = x_val;
json.push(obj);
})
var jsonStr = JSON.stringify(json);
$('#json').val(jsonStr);
if (flag) {
$('#inputForm').submit();
}
}
})
提交事件的分析:
需要定义一个变量,weekChild用于判断用户是否勾选。
if(weekChild0){
弹出提醒用户设置的话语
}else{
定义一个变量chea用于接收选中的上午
if(chea){
选中上午后,预约人数就是必填的。定义s_val变量,用于存储预约人数,
if(s_val“”){
提醒用户设置预约人数
}else{
//parseInt() 函数可解析一个字符串,并返回一个整数
s_val=parseInt(s_val);
}
}
定义一个变量cheb用于接收选中的下午
if(cheb){
选中下午时候,可预约人数必填,定义x_val变量,用于存储预约人数
if(x_val==""){
提醒用户设置
}else{
x_val=parseInt(x_val)
}
}
}
Controller层的数据保存`
/**
* 保存
*/
@RequestMapping(value = "/doctorsave", method = RequestMethod.POST)
public String doctorsave(Doctor doctor, RedirectAttributes redirectAttributes, String json) {
//所属卫生院
/*doctor.setHospitalId(userService.getCurrent().get);*/
doctorService.save(doctor);
//将字符串转换成json数组
JSONArray jsonArray = JSONArray.fromObject(json);
DoctorTime doctorTime = null;
for(int i=0;i<jsonArray.size();i++){
//3、把里面的对象转化为JSONObject
JSONObject job = jsonArray.getJSONObject(i);
// 4、把里面想要的参数一个个用.属性名的方式获取到
int type = job.getInt("type");
doctorTime = new DoctorTime();
doctorTime.setDoctorId(doctor.getId());
doctorTime.setWeek(type);
if (job.getInt("week_status") == 1) {//未选中
doctorTime.setState(0);
} else {//选中
doctorTime.setState(1);
}
if (job.getInt("week_s_status") == 1) {//未选中
doctorTime.setMorningState(0);
doctorTime.setMorningCanNum(0);
doctorTime.setMorningNum(0);
} else {//选中
doctorTime.setMorningState(1);
doctorTime.setMorningCanNum(job.getInt("s_val"));
doctorTime.setMorningNum(0);
}
if (job.getInt("week_x_status") == 1) {//未选中
doctorTime.setAfternoonState(0);
doctorTime.setAfternoonCanNum(0);
doctorTime.setAfternoonNum(0);
} else {//选中
doctorTime.setAfternoonState(1);
doctorTime.setAfternoonCanNum(job.getInt("s_val"));
doctorTime.setAfternoonNum(0);
}
doctorTime.setCreateTime(new Date());
doctorTime.setUpdateTime(new Date());
doctorTimeService.save(doctorTime);
}
addFlashMessage(redirectAttributes, SUCCESS_MESSAGE);
return "redirect:list.jhtml";
}
最终实现的效果