后端controller层把数据放到model中,前端动态生成复选框:
<div class="layui-input-block">
<input name="students" type="checkbox"
th:each ="student:${studentList}"
th:value="${student.id}"
th:title="${student.name}"
th:checked="${studentChecked.contains(student.id)}"
lay-skin="primary" >
<!-- 把以选择的数据放到studentChecked数组中,可自动勾选是否选中 -->
</div>
用js获取复选框元素,如果值被选中,则加到数组中,提交时传到后端:
var checkBox = document.getElementsByName("students");
var idArr = Array();
for(var i=0;i<checkBox.length;i++){
if(checkBox[i].checked){
idArr.push(checkBox[i].value);
}
}
//alert(idArr);
if(idArr.length == 0){
layer.alert('您没有选中任何数据!',{icon: 2,anim: 6,title: "警告"});
return false;
}
//异步请求提交数据
var url = ctxPath + "project/" + idArr;
$.post(url,data.field,function (response){ });
后端接收数据:
@PostMapping("{idArr}")
@ResponseBody
public Result<Object> save(@PathVariable("idArr") List<Integer> idArr){
System.out.println(idArr);
return Result.success("新增成功!");
}