1. 程式人生 > >jsp頁面帶有多選框的grid表格,如何將勾選中的行記錄所有列資料傳送到後臺。

jsp頁面帶有多選框的grid表格,如何將勾選中的行記錄所有列資料傳送到後臺。

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物件裡面了。