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

7 篇文章 0 订阅
2 篇文章 0 订阅

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

 

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设你有一个 checkbox 列表,每个 checkbox 对应一个数据项,那么你可以通过以下步骤将选中数据组装成 map 并输给后端: 1. 监听 checkbox 的点击事件,当 checkbox选中或取消选中时,更新一个变量或数组,记录当前选中数据项。 示例代码: ```javascript let selectedItems = {}; // 用一个对象记录选中数据项 $('input[type="checkbox"]').on('change', function() { const itemId = $(this).val(); // 获取当前 checkbox 对应的数据项 ID if ($(this).is(':checked')) { selectedItems[itemId] = true; // 选中状态,将 ID 加入选中列表 } else { delete selectedItems[itemId]; // 非选中状态,将 ID 从选中列表中删除 } }); ``` 2. 当用户点击提交按钮时,将选中数据项组装成一个 map,输给后端。 示例代码: ```javascript $('#submit-btn').on('click', function() { const selectedIds = Object.keys(selectedItems); // 获取所有选中数据项 ID const selectedData = {}; // 用一个对象表示选中数据 selectedIds.forEach((id) => { const itemData = getItemDataById(id); // 根据 ID 获取数据项的详细信息 selectedData[id] = itemData; // 将数据项信息添加到选中数据中 }); // 发起 AJAX 请求,将选中数据输给后端 $.ajax({ url: '/api/submit', method: 'POST', data: JSON.stringify(selectedData), contentType: 'application/json', success: function(response) { alert('提交成功!'); }, error: function(xhr, textStatus, error) { alert('提交失败:' + error); } }); }); ``` 需要注意的是,这里将选中数据项组装成了一个对象,其中对象的键为数据项的 ID,值为数据项的详细信息。你需要根据实际情况修改 `getItemDataById` 函数,根据 ID 获取数据项的详细信息,例如从页面中获取、从后端获取等。另外,需要将选中数据以 JSON 格式输给后端,这里使用了 jQuery 的 AJAX 函数来发起 POST 请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值