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。

例如，在fisrt网格中，您可以使用

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

因此网格将从服务器响应的Grid1部分加载。此外，您可以在Grid2或data回调的loadComplete参数中看到beforeProcessing属性，使用data设置第二个网格的setGridParam选项然后在网格上触发"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。

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

2 个答案: