如何在JQGRID中获取重新加载的数据

时间:2012-08-10 10:42:18

标签: jquery jqgrid

我的回复数据如下所示

{"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表如下所示。

http://i49.tinypic.com/2n9fsx.png

1 个答案:

答案 0 :(得分:0)

尝试使用GridUnload,然后再次构建相同的网格。做类似的事情:

jQuery("#attachTable").jqGrid("GridUnload");
buildUserGridAttach(response);

这是残酷的,但应该有效。