jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法
批量提交用jquery操作起來還是很方便的,主要的思路就是 在動(dòng)態(tài)生成表格時(shí)每一行都存下這條數(shù)據(jù)的唯一id,然后監(jiān)聽選擇,把選中的數(shù)據(jù)放入數(shù)組,最后提交到后臺(tái)就OK了。
先上一部分代碼(這是表頭以及一個(gè)全選按鈕)
<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%">平臺(tái)日期</th> <th width="5%">交易日期</th> </tr> <tbody id="querydata"> </tbody> </table>
chooseAll函數(shù),判斷全選按鈕是否選中,然后遍歷復(fù)選框做相應(yīng)的選擇。知識(shí)點(diǎn):
jQuery 選擇器
選擇器 | 實(shí)例 | 選取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
我這里用到的.class
function chooseAll() { if ($("#chooseAll").is(':checked')) { $(".choose").attr("checked", true); } else { $(".choose").attr("checked", false); } }
如何動(dòng)態(tài)生成表格數(shù)據(jù),這里不做多說了,下面的data是ajax返回的json數(shù)據(jù) checkbox的name全部為 ckItm,這在后面取數(shù)據(jù)的時(shí)候用到
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")); }
提交按鈕執(zhí)行的動(dòng)作就是遍歷已經(jīng)選中的checkbox,獲取值傳到后臺(tái),這里用到了數(shù)組的方式,大家也可以用分隔符。
$('input[name="ckItm"]:checked') 類型為input 且name為ckItm 并且選中的元素 .each遍歷
var list = []; list.push 向數(shù)組里面加一個(gè)元素
$('#listButton').click(function () { var list = []; $('input[name="ckItm"]:checked').each(function () { list.push($(this).val()); }); if (list == "") { $u.alert("請(qǐng)選擇需要經(jīng)辦的單據(jù)"); } else { $u.ajax({ async: false, url: "3002800007/batchMerSettleHandle.do", data: {"list[]": list}, success: function (data) { alert(data); }, error: function (data) { } }); } });
Java后臺(tái)controller @RequestParam(value = "list[]", required = false) String[] list,接受數(shù)組類型的值
@RequestMapping("/3002800007/batchMerSettleHandle") @ResponseBody public String batchMerSettleHandle(@RequestParam(value = "list[]", required = false) String[] list, HttpSession session) { return JSON.toJSONString(list); }
最后效果:
最后祝大家大吉大利!
以上這篇jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
判斷對(duì)象是否Window的實(shí)現(xiàn)代碼
判斷對(duì)象是否Window的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2012-01-01Jquery數(shù)獨(dú)游戲解析(一)-頁(yè)面布局
上周發(fā)布了‘jquery開發(fā)的數(shù)獨(dú)游戲’,下載量很多評(píng)論的人很少。近期會(huì)將主要的開發(fā)思路整理出來與大家交流,非常希望與大家通過這個(gè)例子共同探討和學(xué)習(xí)。2010-11-11slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果
這篇文章主要為大家詳細(xì)介紹了slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Easyui Datagrid自定義按鈕列(最后面的操作列)
做項(xiàng)目的時(shí)候因?yàn)樾枨?要在表格的最后添加一列操作列,easyUI貌似沒有提供這種功能,下面我們來自定義按鈕列,具體實(shí)現(xiàn)代碼,大家參考下本文吧2017-07-07jquery實(shí)現(xiàn)div陰影效果示例代碼
div陰影效果在以前都是采用圖片來實(shí)現(xiàn)的,而在本文大家將學(xué)會(huì)使用jquery來實(shí)現(xiàn),感興趣的朋友可以參考下2013-09-09jQuery EasyUI Accordion可伸縮面板組件使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Accordion可伸縮面板組件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02細(xì)說瀏覽器特性檢測(cè)(1)-jQuery1.4添加部分
瀏覽器特性檢測(cè)即通過探測(cè)對(duì)象是否擁有某個(gè)屬性或者函數(shù),或者通過其他的編碼探測(cè)方式,來決定其是否支持某一功能、特性。2010-11-11javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
jQuery的表格懸停變色 恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox2008-08-08jQuery實(shí)現(xiàn)的指紋掃描效果實(shí)例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的指紋掃描效果,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)圖像按照指定模式顯示的相關(guān)實(shí)現(xiàn)技巧,并附帶附示例演示與demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01