复选表的实现

实现复选表的步骤:
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";
	}

最终实现的效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值