jsp页面带有多选框的grid表格，如何将勾选中的行记录所有列数据传送到后台。

本文链接：https://blog.csdn.net/heliangb46/article/details/78018381

本文介绍了一种通过前端页面实现表格数据批量操作的方法。具体步骤包括：选择表格中的数据行，将所选数据转换为JSON格式，并通过AJAX发送到后台进行处理。在后台接收到数据后，使用GsonUtils将其转换为List对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.本方案大体思路是，将选中元素所在行的数据，拼装成一个js对象，然后使用JSON.stringify方法将对象转换为json字符串，以ajax.post的方式发送给后台，然后在server端用GsonUtils转为List

                <table >
                    <thead >
                        <tr>
                            <th ><input type="checkbox" name="checked-all" class="checkbox checked-all"></th>
                            <th >编码</th>
                            <th >名称</th>
                            <th >启用状态</th>
                            <th >操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach >
                            <tr >
                                <td><input type="checkbox" name="itemId" value="${it.id}" class="checkbox"></td>
                                <td><c:out value="${it.code}" /><input type="hidden" name="code" value="${it.code}" ></td>
                                </span> <input type="text"  name="name" value="<c:out value="${it.name}"/>" maxlength="50" ></td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>

3、js代码部分

//选中后点击按钮从该方法开始执行
//按钮如下jsp代码：

<a href="javascript:void(0);" onclick="deleteFun('itemId', del,'itemId,code,name');" class="del-pl"><i class="cedu-delete mr10"></i>删除</a>

js代码：

function deleteFun(tag, callback, needCollectValue) {
            var str = makeValuesToArray(tag, needCollectValue);
            if (str == "[]") {
                alert("请选择要删除的数据项!");
                return false;
            }
            if (confirm('您确定要删除选取的项吗?')) {
                callback(str);
                return true;
            }
            return false;
        }

        function makeValuesToArray(tag, needCollectValue) {
            var str = "";
            var idx = 0;
            var arr = new Array();
            $("input[name='" + tag + "']:checked").each(function(index, o) {
                //每行    
                var obj = {};
                $(this).parents('tr:first').find('input').each(function(i, e) {
                    //行中的每个元素
                    var nameVal = $(e).attr('name');
                    if (needCollectValue.indexOf(nameVal) >= 0) {
                        obj[nameVal] = $(e).val();
                    }
                });
                arr[index] = obj;
            });
            str = JSON.stringify(arr)
            return str;
        }

//向后台发送ajax请求
        function del(jsonStr) {
            ajaxSubmit({
                url : "${path}management/career/projectcategory/delete.do",
                params : {
                    delJsonData : jsonStr
                },
                onSuccess : function(data, textStatus) {


                },
                onError : function(req) {

                }
            });
        }

4、java代码部分

List<HashMap<String, String>> list = GsonUtils.fromJson(delJsonData, new TypeToken<List<HashMap<String, String>>>() {
            });

这样就可以将前台列表的选中数据，封装到后台service段的list对象里面了。