jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法
批量提交用jquery操作起來還是很方便的,主要的思路就是 在動態(tài)生成表格時每一行都存下這條數(shù)據(jù)的唯一id,然后監(jiān)聽選擇,把選中的數(shù)據(jù)放入數(shù)組,最后提交到后臺就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函數(shù),判斷全選按鈕是否選中,然后遍歷復(fù)選框做相應(yīng)的選擇。知識點:
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); } }
如何動態(tài)生成表格數(shù)據(jù),這里不做多說了,下面的data是ajax返回的json數(shù)據(jù) checkbox的name全部為 ckItm,這在后面取數(shù)據(jù)的時候用到
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í)行的動作就是遍歷已經(jīng)選中的checkbox,獲取值傳到后臺,這里用到了數(shù)組的方式,大家也可以用分隔符。
$('input[name="ckItm"]:checked') 類型為input 且name為ckItm 并且選中的元素 .each遍歷
var list = []; list.push 向數(shù)組里面加一個元素
$('#listButton').click(function () { var list = []; $('input[name="ckItm"]:checked').each(function () { list.push($(this).val()); }); if (list == "") { $u.alert("請選擇需要經(jīng)辦的單據(jù)"); } 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,接受數(shù)組類型的值
@RequestMapping("/3002800007/batchMerSettleHandle") @ResponseBody public String batchMerSettleHandle(@RequestParam(value = "list[]", required = false) String[] list, HttpSession session) { return JSON.toJSONString(list); }
最后效果:
最后祝大家大吉大利!
以上這篇jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
slideToggle+slideup實現(xiàn)手機端折疊菜單效果
這篇文章主要為大家詳細(xì)介紹了slideToggle+slideup實現(xiàn)手機端折疊菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Easyui Datagrid自定義按鈕列(最后面的操作列)
做項目的時候因為需求,要在表格的最后添加一列操作列,easyUI貌似沒有提供這種功能,下面我們來自定義按鈕列,具體實現(xiàn)代碼,大家參考下本文吧2017-07-07jQuery EasyUI Accordion可伸縮面板組件使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Accordion可伸縮面板組件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02細(xì)說瀏覽器特性檢測(1)-jQuery1.4添加部分
瀏覽器特性檢測即通過探測對象是否擁有某個屬性或者函數(shù),或者通過其他的編碼探測方式,來決定其是否支持某一功能、特性。2010-11-11javascript基于jQuery的表格懸停變色/恢復(fù),表格點擊變色/恢復(fù),點擊行選Checkbox
jQuery的表格懸停變色 恢復(fù),表格點擊變色/恢復(fù),點擊行選Checkbox2008-08-08jQuery實現(xiàn)的指紋掃描效果實例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)的指紋掃描效果,以完整實例形式分析了jQuery實現(xiàn)圖像按照指定模式顯示的相關(guān)實現(xiàn)技巧,并附帶附示例演示與demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01