是否可以一次从单个 ajax 调用中填充 2 个 jqGrid？

Question

我有一个 ASP.NET-MVC 站点，上面有一个带有 2 个 jqGrid 的网页。它们每个都有自己的“URL”属性，因此它们都调用单独的 ajax 调用。

我想看看是否可以将其合并到一个 json 调用中，该调用同时返回两个网格的 json（而不是 2 个单独的调用）

所以在我的控制器中为每个方法而不是这个

        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 选项，则用户可以通过单击列标题对数据进行排序，单击“下一步”页面将过滤器设置在一个网格中在一个网格中。在这种情况下，仅来自网格的数据需要从服务器重新加载。在这种情况下，我认为加载两个网格的数据是没有意义的。

如果您至少在网格中的一个选项中使用loadonce: true 选项，那么您只需将网格中的两个选项datatype: 'json', loadonce: true 更改为一个选项datatype: 'local'。您可以在填充第一个网格期间填充网格。您可以为第二个网格设置data参数并调用roloadGrid。

例如在第一个网格中你可以使用

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

因此网格将从服务器响应的Grid1 部分加载。此外，您可以在loadComplete 或beforeProcessing 回调的data 参数中看到Grid2 属性，使用setGridParam 设置第二个网格的data 选项，然后在网格上触发"reloadGrid" 事件。如果第二个网格应该使用datatype: "local" 和选项mtype、url 和loadonce 创建，您可以从第二个网格的选项列表中删除。

Answer 2

我希望您希望这可以提高性能。好吧，据我所知，jqgrid 使用他们自己的 ajax 调用来填充表数据。这是解决网格问题的一种更简洁的方法，但如果性能是禁止此解决方案的原因，那么您可以尝试这个 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>

//--------

按钮点击后触发 ajax..

内部控制器准备json响应为

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

//现在当ajax成功时你会得到数据

使用

将其添加到表中

  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。