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

来源:互联网 发布:读取网络文件 编辑:程序博客网 时间:2024/05/16 05:10

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对象里面了。

阅读全文
0 0