0

私の応答データは次のようになります

{"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

4

1 に答える 1

0

GridUnload使用してから、同じグリッドを再構築してください。次のようなことをします：

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

これは残酷ですが、機能しているはずです。

于 2012-08-10T17:30:15.163 に答える