Jqgrid是一個強大的表格插件，它提供了多種方式來編輯數據。這三種方式分別是：
- Cell Editing——只允許修改某一個單元格內容
- Inline Editing——允許在jqGrid中直接修改某一行的數據
- Form Editing——彈出一個新的編輯窗口進行編輯和新增
在我做的DEMO中，主要運用的是第三種， 彈出一個新窗口來編輯數據。如果想用其它兩種方式可以參考官網。
相比較之前的例子，這個例子最重要的變化是添加了一個id為consoleDlg的<div>塊。在jquery的ready方法里面我將初始化div生成為一個模態對話框，用作編輯數據的界面。這個用到了jquery ui的dialog。關於如何使用dialog，參考這篇文章就ok了。這是主要的js代碼。
|
1
2
3
4
5
6
7
8
9
|
// 配置模態對話框
$(
"#consoleDlg"
).dialog({
autoOpen :
false
,
// 是否自動彈出窗口
modal :
true
,
// 設置為模態對話框
resizable :
true
,
width : 500,
height : 300,
position :
"center"
// 窗口顯示的位置
});
|
那么我們通過什么方式來打開這個窗口呢？ 細心的朋友們可以發現我在前面的文章一的截圖中，表格的最前面新增了一列操作欄。這個操作欄主要是通過Jqgrid的gridComplete方法來實現的。當表格所有數據都加載完成而且其他的處理也都完成時觸發此事件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
gridComplete :
function
() {
var
ids = jQuery(
"#gridTable"
).jqGrid(
'getDataIDs'
);
for
(
var
i = 0; i < ids.length; i++) {
var
cl = ids[i];
update =
"<input type='button' value='修改' onclick='updateStu("
+ cl +
")'/> "
;
del =
"<input type='button' value='刪除' onclick='deleteStu("
+ cl +
")'/> "
;
view =
"<input type='button' value='查看' onclick='viewStu("
+ cl +
")'/>"
;
jQuery(
"#gridTable"
).jqGrid(
'setRowData'
,
ids[i], {
process : update + del + view
});
}
},
|
從這段代碼我們可以看出，我們使用這個方法先獲得表格所有列的id，然后在每一列中追加了三個按鈕。這三個按鈕點擊時就會觸發各自的方法。注意：代碼中的process對應colModel中的列。
按鈕已經設置完成了，下面就該操作表格的數據了。
- 添加數據
點擊頁面上的新增按鈕，就會彈出剛才初始化的模態對話框。如圖：
這是一個form表單，里面包含學生的基本信息，還有兩個按鈕。有的朋友可能會問這個對話框是在彈出來的呢？別急，看這里。
|
1
2
3
4
5
6
7
8
9
10
|
/**
* 彈出新增學生對話框
*/
function
addStu() {
var
consoleDlg = $(
"#consoleDlg"
);
consoleDlg.html(
""
);
var
a1 =
" <iframe src='studentProcess.jsp?op=add'"
+
"style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>"
;
consoleDlg.append(a1);
consoleDlg.dialog(
"option"
,
"title"
,
"新增學生信息"
).dialog(
"open"
);
};
|
原來點擊按鈕調用的是這個方法呀。解釋一下，先獲得這個對象，然后清空對話框里面的元素。然后追加一個iframe。再調用dialog的open方法。
填寫好表單，點擊新增按鈕。提示新增成功后，就可以在表格中看到剛才新增的同學了。不用刷新頁面，Jqgrid有現成的方法。
這是新增學生的具體方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function
addStu() {
// 序列化表單
var
obj2 = $(
"#myform"
).serializeArray();
$.ajax({ url :
"QueryActionUrl_addStu.action"
,
data : obj2,
dataType :
"json"
,
cache :
false
,
type :
"post"
,
error :
function
(textStatus, errorThrown) {
window.parent.hiAlert(
"系統ajax交互錯誤"
); },
success :
function
(data, textStatus) {
if
(data.messageBean.code ==
"200"
) {
hiAlert(data.messageBean.msg,
"提示"
,
function
() {
window.parent.$(
"#consoleDlg"
).dialog(
"close"
);
// 刷新表格
window.parent.$(
"#gridTable"
).jqGrid(
"setGridParam"
, {
search :
true
, mtype :
"post"
}).trigger(
"reloadGrid"
, [ {
page : 1 }
]);
});
}
else
{
hiAlert(data.messageBean.msg,
"提示"
,
function
() {
window.parent.$(
"#consoleDlg"
).dialog(
"close"
); });
}
}
}); }
|
- 修改數據
修改數據的時候，和剛才新增方法就有點區別了。因為修改的時候要先把數據加載到對話框的表單中。如圖：
比如，我要修改李麗麗的信息。我們需要把原來的信息加載出來。所以在彈出對話框之前我們需要把這個學生的id也傳遞過來。如圖:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/**
* 彈出修改學生的對話框
*/
function
updateStu(selectedRowId) {
var
consoleDlg = $(
"#consoleDlg"
);
consoleDlg.html(
""
);
var
str = $(
"#gridTable"
).jqGrid(
"getRowData"
, selectedRowId);
// 根據行ID，獲取選中行的數據
id = {
id : str.id
};
var
a1 =
" <iframe src='studentProcess.jsp?op=update&id="
+ JSON.stringify(id)
+
"' style='width: 100%;height: 100%' scrolling='auto' frameborder='0'></iframe>"
;
consoleDlg.append(a1);
consoleDlg.dialog(
"option"
,
"title"
,
"修改學生信息"
).dialog(
"open"
);
};
|
通過和上面新增方法對比，可以發現修改方法是先得到選中行的id，然后得到學生的id，最后通過json傳遞過去。
點擊修改按鈕，提示修改成功后，就可以在表格中看到修改后的學生數據了。
這是修改學生的方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function
updateStu() {
var
obj2 = $(
"#myform"
).serializeArray();
$.ajax({
url :
"QueryActionUrl_updateStu.action"
,
data : obj2,
dataType :
"json"
,
cache :
false
,
type :
"post"
,
error :
function
(textStatus, errorThrown) {
window.parent.hiAlert(
"系統ajax交互錯誤"
);
},
success :
function
(data, textStatus) {
if
(data.messageBean.code ==
"200"
) {
hiAlert(data.messageBean.msg,
"提示"
,
function
() {
window.parent.$(
"#consoleDlg"
).dialog(
"close"
);
// 刷新表格
window.parent.$(
"#gridTable"
).jqGrid(
"setGridParam"
, {
search :
true
,
mtype :
"post"
}).trigger(
"reloadGrid"
, [ {
page : 1
} ]);
});
}
else
{
hiAlert(data.messageBean.msg,
"提示"
,
function
() {
window.parent.$(
"#consoleDlg"
).dialog(
"close"
);
});
}
}
});
}
|
刪除和查看數據就不做具體說明了，和修改差不多只是dao層中調用的方法不一樣。在這些代碼中只需關注op（操作標識）和傳遞的學生id。也可以這樣做，在修改、刪除和查看的時候，把學生的信息通過json全部傳遞過來，就不需要通過學生id去查詢數據庫了，減少與數據庫的交互。
原創文章，轉載請注明： 轉載自java開發者
本文鏈接地址: Jqgrid入門-使用模態對話框編輯表格數據(三)