最近用jqGrid 做個功能,要實作在jqGrid表格上動态的加行、删行,最後點選“儲存”按鈕,與背景互動,儲存資料。例:
var lastFlag ;
$gridTable = $("#gridTable").jqGrid( {
datatype : 'json',
colNames : ['age', 'sex' ],
colModel : [
{name : 'age',index : 'age',width : 80,editable:true,edittype:'text',editrules:{required:true}},
{name : 'sex',index : 'sex',width : 160,editable:true,edittype:'text',editrules:{required:true}}
],
rowNum : 10,
pager : "#tablePager",
multiselect : false,
viewrecords : true,
sortorder : "desc",
jsonReader : {
root : "dataRows",
repeatitems : false
},
caption : "資料清單",
height : "auto",
rownumbers : true,
onSelectRow : function(id){
if(id && id!=lastFlag){
$('#gridTable').jqGrid('saveRow',lastFlag);
lastFlag=id;
}
$('#gridTable').jqGrid('editRow',id,true);
},
editurl : "../propManage.do?method=doNothing"
})
$("#addButton").bind("click", function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
age: "",
sex: ""
};
var ids = jQuery("#gridTable").jqGrid('getDataIDs');
var rowid = getMaxId(ids) + 1;
if (selectedId) {
$("#gridTable").jqGrid("addRowData", rowid, dataRow, "after", selectedId);
} else {
$("#gridTable").jqGrid("addRowData", rowid, dataRow, "last");
}
})
$("#removeButton").bind("click", function() {
var selectedId = $("#gridTable").jqGrid("getGridParam","selrow");
if(!selectedId){
alert("請選擇要删除的行");
return;
}else{
$("#gridTable").jqGrid("delRowData", selectedId);
}
})
問題1:JQGRID 編輯模式下怎樣取行資料?
使用者操作模拟:使用者新增一行,滑鼠點進去,該行進入編輯狀态,填寫資料,點選儲存。
問題出現了: 點選儲存以後,需要通過getRowData()擷取表格裡的資料傳回背景,但是當行在編輯狀态下時,getRowData()取得的值為類似<input ....></input> 的html标簽,不是編輯框中輸入的值。
解決途徑:
alert getRowData()擷取出的資料,你會發現<input>标簽的id是5_age, 6_age之類的,也就是行id+“_colModel name”,這就好辦了,
做法就是找到編輯行的單元格的id,然後得到單元格裡的内容,通過"setRowData"将其儲存起來,然後再通過getRowData()取值。
示例:
var selectedId = $('#gridTable').jqGrid("getGridParam", "selrow");
var ageId = selectedId + "_age";
var sexId = selectedId + "_sex";
var age= $('#'+ageId).val();
var sex= $('#'+sexId).val();
$('#gridTable').jqGrid('setRowData',selectedId,{age:age,sex:sex},'');
再通過getRowData()取值,結果正确。