有时候页面新增数据的时候一条一条添加很麻烦,操作很不友好,就需要点选很多次,这个时候多选框就很方便,传多个值到后台,后台处理再循环添加更方便一点,一般参数提交我们更多选用的是form表单提交的格式
form表单是根据name值确认给后台传的,因为一个对象,多选的name值一样它最终只会传一个值到后端,这就很烦了,除非不用form表单提交,而是把所有的参数都拼接起来使用传值,但是这样如果页面有改动,js相应的就需要改,后续维护很不友好
最后的结果是后端接收的对象增加一个字段用来接收多选框,多选框的值则按照form表单提交的规则拼接在后面
代码如下:
$("body").on("click", "#addSubmitBtn", function () {
var optTypes = [];
$("input[name='optType']:checked").each(function (i) {
optTypes[i] = $(this).val();
})
var params = $("#addForm").serialize();
params+="&optTypes="+optTypes;
jQuery.ajax({
type: "POST",
url: projectName + "/thirdPayType/save",
data: params,
traditional: true,
success: function (msg) {
msg = JSON.parse(msg);
if (msg.success) {
promptinfo("添加成功");
$("#addWindow #addCancleBtn").click();
setTablePageData(currentPage, pageSize);
} else {
promptinfo(msg.message);
}
}
});
});
form表单提交的格式就是&字段名=字段值,这样的格式,拼接后,后台回获取到一个string类型“,”隔开的字符串再处理
public Map<String, Object> save(PayTypeVO PayType){
String optTypes = PayType.getOptTypes();
String[] split = optTypes.split(",");
for (String a:split){
PayType.setOptType(Integer.parseInt(a));
String currentLoginName = sysUserService.getCurrentLoginName();
PayType.setEditor(currentLoginName);
int insert = PayTypeService.insert(PayType);
if(insert<=0){
throw new CommonException("保存数据失败");
}
}
return Maps.newHashMap();
}
这样就可以把多选的值变成一条条保存起来,页面点选也比较方便
以上
最后