我的回复数据如下所示
{"page":"1","total":"10","records":"8","message":null,"rowdata":
[{"status":null,"contactNo":null,"approvalStatus":null,"userInfoID":32,"userName":"bbb
1234","userFullName":"bbb 1234","profiles":[{"profileInfoID":10,"profileName":"Profile
Ganda"},{"profileInfoID":15,"profileName":"Sample Profile 123"}]},
{"status":null,"contactNo":null,"approvalStatus":null,"userInfoID":28,"userName":
"yyyy1234","userFullName":"yyyy 1234","profiles":
"profileInfoID":10,"profileName":"Profile Ganda"}]},.......]}
我使用AJAX获得响应并将响应数据传递给Jqgrid并将数据类型设置为本地,代码如下所示。
function buildUserGridAttach(response){
var jq = jQuery.noConflict();
jq("#attachTable").jqGrid({
url:"searchUsers.htm",
data: response.rowdata,
datatype: "local",
mtype:"post",
width: 1100,
height: "auto",
rowNum: 5,
rowList: [5, 10, 20],
viewrecords: true,
rownumbers: false,
toppager: true,
bottompager:true,
pager: jQuery("#resultsPagerAttach"),
sortname: "userName",
sortorder: "asc",
caption: "Search Results",
// Specify the column names
colNames: ["Select","User ID", "User Name", "Profiles"],
// Configure the columns
colModel: [
{ name: "userInfoID",hidden:true,index: "userInfoID",editable:true, width: 25},
{ name: "userName", index: "userName", width: 25, align: "left", search:true, sorttype:'text',title:false},
{ name: "userFullName", index: "userFullName", width: 25, align: "left" ,search:false, sorttype:'text'},
{ name:"profiles", index:"profiles", width:60, editable: true,edittype:"select",editoptions:{multiple:true,width:50} },
],
// Grid total width and height
autowidth: true,
height: 300,
// Paging
rownumbers: true,
toppager: true,
bottompager : true,
pager: jq("#paging"),
rowNum: 5,
rowList: [5, 10, 20],
viewrecords: true, // Specify if "total number of records" is
// Default sorting
sortname: "userName",
sortorder: "asc",
hidegrid: false,
emptyrecords: "No records to view",
// Grid caption
caption: "Search Results",
multiselect:true,
gridComplete: function() {
var grid = jQuery("#attachTable");
jQuery.each(response.rowdata, function(ID,row) {
var rowId = (ID+1);
grid.editRow(rowId, true);
var de = "<select style='width: 150px;' name=" + rowId + " id=" + rowId + " multiple=true >";
jQuery.each(row.profiles, function(Id,profile ) {
de = de + '<option value="' + row.userInfoID + ":" + profile.profileInfoID + '">'+ profile.profileName+'</option>';
});
de = de + '</select>';
// de = de + "<input type=hidden id='userInfoID' value='"+ row.userInfoID + "'>";
jQuery("#attachTable").jqGrid('setRowData', rowId, { profiles: de });
jQuery("#attachTable").jqGrid('setRowData', rowId, { userInfoID: row.userInfoID});
jQuery("#attachTable").jqGrid('setRowData', rowId, { userName: row.userName });
jQuery("#attachTable").jqGrid('setRowData', rowId, { userFullName: row.userFullName});
});
},
jsonReader : {root: "rowdata", page: "page", total: "total", records: "records", repeatitems: false, id: "userInfoID"}
});
}
数据填充正确,我可以对网格进行所有操作。我最初遇到的问题是我无法使用新数据重新加载网格。 在阅读了很多论坛后,我尝试了
grid.jqGrid('clearGridData').jqGrid('setGridParam', { data: response.rowdata})
.trigger('reloadGrid', [{ page: 1}]);
上述命令工作正常,数据重新加载。但是当调用gridComplete函数时,先前的数据会覆盖新数据。我在评论出gridComplete函数后发现了这个错误。
我需要解决这个问题。过去3天我一直在研究这个问题。
我的JqGrid表如下所示。
答案 0 :(得分:0)
尝试使用GridUnload
,然后再次构建相同的网格。做类似的事情:
jQuery("#attachTable").jqGrid("GridUnload");
buildUserGridAttach(response);
这是残酷的,但应该有效。