jQuery 实现批量提交表格多行数据的方法
批量提交用jquery操作起来还是很方便的，主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id，然后监听选择，把选中的数据放入数组，最后提交到后台就OK了。
先上一部分代码（这是表头以及一个全选按钮）
<table class="ui_table ui_table_hover ui_table_striped ui_table_style02 table_fixed">
<tr>
<th width="3%" class="align_c">
<input type="checkbox" onclick="chooseAll()" id="chooseAll" name="chooseAll"/>
</th>
<th width="5%">平台日期</th>
<th width="5%">交易日期</th>
</tr>
<tbody id="querydata">
</tbody>
</table>
chooseAll函数，判断全选按钮是否选中，然后遍历复选框做相应的选择。知识点：
jQuery 选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
我这里用到的.class
function chooseAll() {
if ($("#chooseAll").is(':checked')) {
$(".choose").attr("checked", true);
} else {
$(".choose").attr("checked", false);
}
}
如何动态生成表格数据，这里不做多说了，下面的data是ajax返回的json数据 checkbox的name全部为 ckItm，这在后面取数据的时候用到
for (var i = 0; i < data.length; i++) {
var $tr = $("<tr style='cursor:pointer;'></tr>");
var $td = $("<td class='align_c'></td>");
$tr.append($td.clone().append("<input type='checkbox' name='ckItm' value='" + data[i].platflow + "' class='choose'/>"));
$tr.append($td.clone().text(data[i].platdate ? data[i].platdate : ""));
$tr.append($td.clone().text(data[i].trandate ? data[i].trandate : ""));
$tr.appendTo($("#querydata"));
}
提交按钮执行的动作就是遍历已经选中的checkbox，获取值传到后台，这里用到了数组的方式，大家也可以用分隔符。
$('input[name="ckItm"]:checked') 类型为input 且name为ckItm 并且选中的元素 .each遍历
var list = []; list.push 向数组里面加一个元素
$('#listButton').click(function () {
var list = [];
$('input[name="ckItm"]:checked').each(function () {
list.push($(this).val());
});
if (list == "") {
$u.alert("请选择需要经办的单据");
} else {
$u.ajax({
async: false,
url: "3002800007/batchMerSettleHandle.do",
data: {"list[]": list},
success: function (data) {
alert(data);
},
error: function (data) {
}
});
}
});
Java后台controller @RequestParam(value = "list[]", required = false) String[] list，接受数组类型的值
@RequestMapping("/3002800007/batchMerSettleHandle")
@ResponseBody
public String batchMerSettleHandle(@RequestParam(value = "list[]", required = false) String[] list, HttpSession session) {
return JSON.toJSONString(list);
}
最后效果：
最后祝大家大吉大利！
以上这篇jQuery 实现批量提交表格多行数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
判断对象是否Window的实现代码，需要的朋友可以参考下。2012-01-01
上周发布了‘jquery开发的数独游戏’，下载量很多评论的人很少。近期会将主要的开发思路整理出来与大家交流，非常希望与大家通过这个例子共同探讨和学习。2010-11-11
slideToggle+slideup实现手机端折叠菜单效果
这篇文章主要为大家详细介绍了slideToggle+slideup实现手机端折叠菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Easyui Datagrid自定义按钮列(最后面的操作列)
做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能，下面我们来自定义按钮列，具体实现代码，大家参考下本文吧2017-07-07
div阴影效果在以前都是采用图片来实现的，而在本文大家将学会使用jquery来实现，感兴趣的朋友可以参考下2013-09-09
jquery trim() 作用是，删除字符串两边出现的空格2011-02-02
jQuery EasyUI Accordion可伸缩面板组件使用详解
这篇文章主要为大家详细介绍了jQuery EasyUI Accordion可伸缩面板组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
浏览器特性检测即通过探测对象是否拥有某个属性或者函数，或者通过其他的编码探测方式，来决定其是否支持某一功能、特性。2010-11-11
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
jQuery的表格悬停变色 恢复,表格点击变色/恢复,点击行选Checkbox2008-08-08
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
这篇文章主要介绍了jQuery实现的指纹扫描效果,以完整实例形式分析了jQuery实现图像按照指定模式显示的相关实现技巧,并附带附示例演示与demo源码供读者下载参考,需要的朋友可以参考下2016-01-01
最新评论