欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法

 更新時間:2018年08月09日 08:39:18   作者:崔石磊  
今天小編就為大家分享一篇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)文章

最新評論