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

最新推荐文章于 2024-01-05 13:53:21 发布

原创最新推荐文章于 2024-01-05 13:53:21 发布 · 5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #前后端通过数组传值

java 同时被 3 个专栏收录

31 篇文章

订阅专栏

FAQ

7 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍了一种在表格中批量获取并操作选中记录的方法，包括使用jQuery选择器获取选中行，遍历这些行并收集所需数据，然后通过AJAX将数据发送到后端。同时，详细展示了如何从前端传递数组到后端，以及后端如何解析并处理这些数据。

在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;
	}