获取所有checkbox选中的数据,前端传一个对象的数组到后端进行接收。

在table表中,我们经常会选中多条记录,获取他们的数据,进行操作。

代码如下:

获取选中行中的数据

1)获取选中行的长度,进行判断。

 var len = $("input[name=boxs]:checked").length;

2) 获取选中的行,通过each 函数进行遍历。

var check = $("input[name=boxs]:checked");

3) 获取选中的某一行。

var row = $(this).parent("td").parent("tr");

4)通过name,获取你想要获取的值。

 var id = row.find("[name='tempId']").val();
 var remarks = row.find("[name='tempRemarks']").val();

5)将获取的数据保存到一个数组中

 check_val.push( {id:id,remarks:remarks});

function deliver() {
			var len = $("input[name=boxs]:checked").length;
			if(len == 0){
				alert("请选择一条记录!");
			}else{
				 var check_val = [];
				   var check = $("input[name=boxs]:checked");
				   check.each(function(){
					   var row = $(this).parent("td").parent("tr");
					   var id = row.find("[name='tempId']").val();
					   var remarks = row.find("[name='tempRemarks']").val();
					 
					   check_val.push( {id:id,remarks:remarks});
				   }) 
			   
				$.ajax({
					url : "${ctx}/templan/templanprocurement/templanProcurement/deliver",
					data : JSON.stringify(check_val),
					type:"POST",
					contentType:'application/json;charset=utf-8',
					success : function(data){
						if(data.success){
							window.location.reload();
							jp.success(data.msg);
						}else{
							jp.error(data.msg);
						}
						
					}
				}) 
			}
			 
		};
	

JS传一个数组到后端

1)通过ajax函数发起请求。

2)将数组对象转换为string类型进行传递。

 JSON.stringify(check_val)

后端接收参数

 1)通过JSON对象,将string转换list。

 List<TemplanProcurementList> tempList =JSON.parseArray(data,TemplanProcurementList.class);

@ResponseBody
	@RequiresPermissions(value={"templan:templanprocurement:templanProcurement:deliver"},logical=Logical.OR)
	@RequestMapping(value = "deliver")
	public AjaxJson deliver(@RequestBody String data, RedirectAttributes redirectAttributes) throws Exception{
		AjaxJson j = new AjaxJson();
		try {
	
		  List<TemplanProcurementList> tempList =JSON.parseArray(data,TemplanProcurementList.class);
			//新增或编辑表单保存
			templanProcurementService.save(tempList);//保存
			j.setSuccess(true);
			j.setMsg("发货成功");
		} catch (Exception e) {
			j.setMsg("发货失败");
		}
		return j;
	}

猜你喜欢

转载自blog.csdn.net/taojin12/article/details/84938491