批量提交用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 选择器
我这里用到的.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 "")); $tr.append($td.clone().text(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 实现批量提交表格多行数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]