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

来源：互联网发布：游戏优化是怎么回事编辑：程序博客网时间：2024/06/13 22:46

批量提交用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 选择器

选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素.class$(".intro")所有 class="intro" 的元素我这里用到的.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 ? data[i].platdate : ""));        $tr.append($td.clone().text(data[i].trandate ? 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")@ResponseBodypublic String batchMerSettleHandle(@RequestParam(value = "list[]", required = false) String[] list, HttpSession session) {return JSON.toJSONString(list);}

最后效果：

最后祝大家大吉大利！

阅读全文

0 0