Question

我试图用ajax将两个jqgrids加载到一个页面上。我的问题是第一个网格加载速度非常快，第二个网格需要几秒钟。翻阅第二个也需要几秒钟。

这是我的代码的结构。这是使用页面上的表元素调用ajax的jquery。

$(document).on("click", "#loadTables", function(){
  $.post("./ajax/page_with_tables.php", {}, function(data){
      $(body).html(data);
      build_first_grid();

      window.setTimeout(function(){
        build_second_grid();  
      }, 10);
    });
  });

两个网格都加载，并且在功能上按预期工作，但第二个网格非常缓慢。两个网格都有大约3000行。 “build _ * _ grid（）”函数只是调用jqgrid来构建网格，没什么特别的。两者都使用自己的返回XML的ajax调用。

超时功能存在，因为如果两者都在同一时间加载，则图形存在问题。短暂的超时解决了这个问题。

以下是从page_with_tables.php发送到浏览器的html

<div id="tableOne"><table id="tableOneData"><tr><td></td></tr></table><div id="tableOnePager"></div></div>

<div id="tableTwo"><table id="tableTwoData"><tr><td></td></tr></table><div id="tableTwoPager"></div></div>

我已经搜索过并问过，但我似乎无法找到问题。非常感谢帮助。

Answer 1

要思考的问题很少：

为了缩小问题范围，您是否尝试仅加载第二个网格并查看它本身是否缓慢？如果没有，尝试切换加载顺序，即在第一个网格之前加载第二个网格。

以下是加速网格数据显示的一些方法：

1）调用build_ _ _grid（）;在页面的$（document）.ready（）函数中。和onClick事件，只需进行ajax调用并使用

将数据加载到网格中

jQuery("#tableOneData").jqGrid('setGridParam', {url: ajaxUrl,datatype: "xml"}).trigger("reloadGrid");

2）删除超时 - 如果必须加载时间延迟的网格，请在另一个网格的loadComplete事件中加载一个网格。

3）对服务器进行一次AJAX调用，并在单个响应中获取两个网格数据。现在，在JavaScript中为每个网格分隔行数据并加载两个网格。

Answer 2

您可能不使用gridview: true选项并使用较大的rowNum值（有关详细信息，请参阅the answer）。在2个网格中加载3000行通常不应该太慢。网格气喘低的另一个典型原因是在loadComplete或gridComplete回调内部的循环中使用了一些网格修改。如果上述建议对您没有帮助，您应该发布您的代码。

顺便说一下，使用JSON而不是XML会减少传输数据的大小。还严格建议使用GZIP或deflate压缩服务器响应。通常，它只是Web服务器配置的一部分。

使用AJAX调用在一个页面上加载2个jqgrids，性能良好

2 个答案: