是否可以一次填充單個ajax調用的2個jqGrid？

Question

我有一個ASP.NET MVC網站，其上有2個jqGrid的網頁。他們每個人都有自己的「URL」屬性列出，所以他們都調用獨立的Ajax調用。

我想看看它有可能合併成一個單一的JSON調用一次（而不是2個獨立的呼叫）

所以不是這在我的控制每個方法

返回兩個網格的JSON這

 return Json(new 
     { 
      Page = 1, 
      Records = GetData().Count, 
      Rows = GetData(), 
      Total = 1 
     }); 

我想看看，如果你能在一個調用返回兩個：

var grid1Data = (new 
     { 
      Page = 1, 
      Records = GetData().Count, 
      Rows = GetData(), 
      Total = 1 
     }); 

    var grid2Data = (new 
     { 
      Page = 1, 
      Records = GetOtherData().Count, 
      Rows = GetOtherData(), 
      Total = 1 
     }); 

     return Json(new 
     { 
       Grid1 = grid1Data, Grid2 = grid2Data 
     }); 

，但我無法弄清楚如何做到這一點的JavaScript端的工作，現在我的代碼看起來像這樣（單獨ajax調用）：

$("#myGrid1").jqGrid({ 
    mtype: "POST", 
    url: "/GetGrid1Data", 
    datatype: "json", 

$("#myGrid2").jqGrid({ 
    mtype: "POST", 
    url: "/GetGrid2Data", 
    datatype: "json", 

這可能嗎？

Answer 1

第一次看，每個Ajax調用的兩個網格填充看起來很有吸引力。問題在於，只有在網格中至少使用loadonce: true選項時，它纔有一些優勢。只有在您可以進行一個Ajax調用並填充另一個網格（其中有loadonce: true選項）的情況下。原因很簡單。如果兩個網格都沒有loadonce: true選項，則用戶可以通過單擊列標題對數據進行排序，單擊「Next」（下一步）頁面，在一個網格中設置篩選器。在來自的數據的情況下，僅需要從服務器重新加載網格。我認爲在這種情況下加載兩個網格的數據是沒有意義的。

如果您至少在網格中使用loadonce: true選項，那麼您可以將網格中的兩個選項datatype: 'json', loadonce: true更改爲一個選項datatype: 'local'。您可以在填充第一個網格時填充網格。您可以爲第二個網格設置data參數並呼叫roloadGrid。

例如在最前一頁網格可以使用

jsonReader: { 
    root: "Grid1.Rows", 
    page: "Grid1.Page", 
    total: "Grid1.Total", 
    records: "Grid1.Records" 
} 

所以網格將來自服務器的響應的一部分Grid1被加載。此外，您可以在data 或beforeProcessing回調參數中看到Grid2屬性，使用setGridParam設置第二個網格的data選項，然後在網格上觸發"reloadGrid"事件。在第二個網格應使用datatype: "local"和選項mtype，url和loadonce創建的情況下，您可以從第二個網格的選項列表中刪除。

Answer 2

我希望你想要這個來提高性能。以及每個我所知的jqGrid使用自己的Ajax調用來填充表data.this是解決電網問題的一個更清潔的方式，但如果性能是它禁止這種解決方案，那麼你可以試試這個startegy原因：

$("#test").jqGrid({ 

     datatype: 'clientSide',//most important 
     colNames:['xx','yy'], 
     colModel :[ 
        {name:'sdsd', index:'termId',}, 
        {name:'version', index:'version'}, 

        ], 
        pager: '#testpager', 
        rowNum:10, 
        rowList:[10,20,30], 

        shrinkToFit:true, 
        autowidth:true 
});//grid initialised. 

$("#test2").jqGrid({ 

      datatype: 'clientSide',//most important 
      colNames:['xx','yy'], 
      colModel :[ 
         {name:'sdsd', index:'termId',}, 
         {name:'version', index:'version'}, 

         ], 
         pager: '#testpager', 
         rowNum:10, 
         rowList:[10,20,30], 

         shrinkToFit:true, 
         autowidth:true 
    });//grid 2 initialised. 

// JSP ------------

 <div id="tablecontainer" > 
     <table id="test"><tr><td/></tr></table> 
     <div id="testpager"></div> 
</div> 

    <div id="tablecontainer2" > 
      <table id="test2"><tr><td/></tr></table> 
      <div id="testpager2"></div> 
    </div> 

// --------

點擊按鈕火阿賈克斯後..

內部控制器準備json響應Ë作爲

{ "test":{//list of json row data}, 
     "test2" :{//list of json row data}} 

//現在，當阿賈克斯是全成你將得到的數據

使用

resposeSuccess(data){ 
      //loop through each row data and add it into respective table using 
    $.each(data,function(tableId,tableJson){ 
     for(j=0;j<tableJson.length;tableJson++) 
     $("#"+tableId).addRowData(""+j, tableJson[j]); 
}); 


    } 

總之代替的jqGrid將其添加到表中，你要照顧加的數據分別放入相應的表格中。