手机版

jQuery实现批量提交表格多行数据的方法

时间:2021-08-30 来源:互联网 编辑:宝哥软件园 浏览:

批量提交用框架操作起来还是很方便的,主要的思路就是在动态生成表格时每一行都存下这条数据的唯一id,然后监听选择,把选中的数据放入数组,最后提交到后台就好了。

先上一部分代码(这是表头以及一个全选按钮)

table class=' ui _ table ui _ table _ hover ui _ table _ striped ui _ table _ style 02 table _ fixed ' tr th width=' 3% ' class=' align _ c ' input type=' checkbox ' onclick=' choose all()' id=' choose all ' name=' choose all '/th width=' 5% '平台日期/th宽度='5% '交易日期/th/tr t正文id='查询数据'/t正文/tablechooseAll函数,判断全选按钮是否选中,然后遍历复选框做相应的选择。知识点:

框架选择器

选择器实例选取* $('*') 所有元素#id $('#lastname') id='lastname '的元素。类$('。intro’)所有class='intro '的元素我这里用到的。班级

函数chooseAll() { if ($('#chooseAll ')).是(' :选中'){ $(' .选择")"。attr('checked ',true);} else { $(' .选择")"。attr('checked ',false);}}如何动态生成表格数据,这里不做多说了,下面的数据是创建交互式、快速动态网页应用的网页开发技术返回的数据数据检验盒的名字全部为ckItm,这在后面取数据的时候用到

for(var I=0;一。数据。长度;I){ var $ tr=$(' tr style='游标:指针;/tr ');var $ TD=$(' TD class=' align _ c '/TD ');$tr.append($td.clone().追加(“输入类型=”复选框“名称=”ckItm“值=”数据[I]).platflow“”class=“choose”/);$tr.append($td.clone().文本(数据[i].platdate?数据[i].plat date : ' ');$tr.append($td.clone().文本(数据[i].转移日期?数据[i].交易日期: ' ');$ tr。appendo($(' # query data ');}提交按钮执行的动作就是遍历已经选中的复选框,获取值传到后台,这里用到了数组的方式,大家也可以用分隔符。

$('输入[名称='ckItm']:checked ')类型为投入且名字为ckItm并且选中的元素。每个遍历

定义变量列表=[];列表。推送向数组里面加一个元素

$('#listButton ').单击(function(){ var list=[];$('输入[名称=' CKitm ']:已选中').每个(函数(){ list.push($(this)).val());});if (list=='') { $u.alert('请选择需要经办的单据');} else { $u.ajax({ async: false,URL : ' 3002800007/batchmersettlehandle。do ',data: {'list[]': list}),success:函数(数据){ alert(数据);},错误:函数(数据){ } });}});爪哇后台控制器@RequestParam(值='list[]',必选=false)字符串[],列表接受数组类型的值

@请求映射('/3002800007/batchMerSettleHandle ')@ ResponseBodypublic String batchMerSettleHandle(@ request param(值=' list[]',必选=false) String[],list,HttpSession会话){ return JSON。到sonstring(列表);}最后效果:

最后祝大家大吉大利!

以上这篇框架实现批量提交表格多行数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

版权声明:jQuery实现批量提交表格多行数据的方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。