2

我有一个 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",

这可能吗？

4

2 回答 2

1

At the first look the filling of two grids per one Ajax call looks attractive. The problem is that it can have some advantages only if you use loadonce: true options for at least in one from the grids. Only in the case you can make one Ajax call and fill another grid (which has loadonce: true options). The reason is simple. If you have both grids without loadonce: true options then the user can sort the data by clicking on the column header, click on the "Next" page of set the filter in one grid. In the case the data from the grid only needed be reloaded from the server. I see no sense to load the data for both grids in the case.

If you use loadonce: true options for at least in one from the grids then you can just change two options datatype: 'json', loadonce: true in the grid to one option datatype: 'local'. You can fill the grid during filling of the first grid. You can set data parameter for the second grid and call roloadGrid.

For example in the fisrt grid you can use

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

So the grid will be loaded from the Grid1 part of the server response. Additionally you can see Grid2 property in the data parameter of loadComplete or beforeProcessing callbacks, set the data option of the second grid using setGridParam and then to trigger "reloadGrid" event on the grid. In the case the second grid should be created with datatype: "local" and the options mtype, url and loadonce you can remove from list of the options of the second grid.

于 2012-07-04T21:40:43.283 回答
-1

我希望你希望这能提高性能。好吧，据我所知，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>

//--------

按钮后点击fire 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。

于 2012-07-04T12:56:25.907 回答