如何提高jqGrid的性能

我有超过1000行通过jqGrid填充数据。当我通过jqGrid填充数据时，jqGrid花费超过20秒来填充数据。此时间仅由jqGird执行（查询执行时间和其他时间除外）。我有一个要求，通过使用jqGrid填充1000行，我不想使用分页。请帮助我如何提高jgGrid的性能。如何提高jqGrid的性能

我们使用的版本是： jgGrid：3.6.4 jQuery的：1.4.2 jQuery用户界面：1.7.2 浏览器：IE 7

以下是代码：

jQuery("#displayItemPerformanceGrid").jqGrid({ 
    //datatype: displayItemPerformanceGridData, //json 
    url:'/DISMGMT/StandardProxy/displayItemPerformanceService?userRole='+userRole+ 
     '&userName='+userName+'&duration='+displayDuration+'&userId='+userId, 
    datatype: 'json', 
    colNames: ["CM","Display Location","Display Name","Item","Item Description", 
       "Store","DC","Date","Type","Promo Retail","Reg. Retail 50" "Units", 
       "Sales $", "Profit $"], 
//  $("#load_navGrid").html("Loading...").show(); 
    colModel: [ 
     {name:"cmName",index:"cmName",classes:"metric",width:130,resizable:true, 
     align:"left"}, 
     {name:"displayLocation",index:"displayLocation",width:80,align: "left"}, 
     {name:"displayName",index:"displayName",width:225,align:"left"}, 
     {name:"item",index:"item",sorttype:"int",width:60,align:"left"}, 
     {name:"itemDescription",index:"itemDescription",width:230,align:"left"}, 
     {name:"store",index:"store",sorttype:"int",width: 70,align: "right"//, 
     //unformat : spaceFormatter 
     }, 
     {name: "dc", index: "dc", sorttype: "int",width: 60,align: "right"//, 
     //unformat : spaceFormatter 
     }, 
     {name:"date",index:"date",sorttype:"date",datefmt:"mm-dd-yy",width:80, 
     align: "left"}, 
     {name: "type",index: "type",width: 45,align: "left"}, 
     {name: "price",index: "price",width: 70,align: "left"}, 
     {name: "regRetail",index: "regRetail",width: 70,align: "left"}, 
     {name:"units",index:"units",sorttype:"int",width:45,align:"right", 
     unformat : spaceFormatter}, 
     {name:"sales",index:"sales",sorttype:"int",width:45,align:"right", 
     unformat : spaceFormatter}, 
     {name:"profit1",index:"profit1",sorttype:"int",width:40,align:"right", 
     unformat : spaceFormatter} 
    ], 
    width: 982, 
    height: 137, 
    toolbar: [true, "top"], 
    viewrecords: true, 
    rowNum: 1500, 
//  gridview:true, 
    loadonce:true 
});

请提示我如何提高jqGrid的性能

来源

2010-12-07 DISMGMT

您是否也可以包含`spaceFormatter`和`metric` CSS的代码。为什么你评论了'gridview：true`这一行？它应该提高性能。顺便说一句，`align：“left”`设置是默认设置，可以从所有列定义中删除。你能提供任何测试数据来填补网格吗？如果将JSON数据保存在像test.json这样的文本文件中，并将`url`值替换为`test.json`，则可以在没有服务器组件的情况下测试网格。 – Oleg 2010-12-07 12:04:26

使用虚拟滚动（查看demo，3.7版新增 - >虚拟滚动）。

来源

2010-12-07 07:15:55

你问题看起来像来自trirand论坛，我最近answered另一个问题。为了确保我可以在这里重复这些信息。

一般来说jqGrid不是显示1000行的问题。其中有15列1000行的The demo example会很快显示在我的电脑上。我没有IE7，但在IE8，IE9测试版，Chrome浏览器，Firefox，Opera和Safari（全部在最新版本中）显示表格的时间非常快。在这个例子中，我使用了修改的jQuery UI，其中.ui-widget :active { outline: none; }被删除。有关详细信息，请参见here和here。

所以要能够帮助你一个需要的可能你的jqGrid的全部定义包含HTML代码并测试JSON数据。您可以捕获关于Fiddler或Firebug的数据。可能您有一些数据类型，请不要使用gridview:true选项，并使用afterInsertRow方法，这会使jqGrid对滞后页面的工作速度变慢。也可以在gridComplete或loadComplete事件处理程序中执行许多工作。所以没有代码我只能猜测。将数据排序以及如何将数据插入网格（使用data参数，loadonce:true或使用addRowData）可能也很重要。

另一种观点是使用本地分页。如果您希望一次从服务器返回所有1000行，它会干扰您不要使用本地分页1000行数据。在the next example我证明了这一点。问题很简单：所有1000行无法一次显示给用户。用户必须在Web浏览器中滚动行，或者尊重jqGrid本地分页。本地分页的优点是：只有一个页面的数据将被放置在表格中。所有其他数据将仅保存在内部的排序形式。它可以提高性能，并且不会从用户的角度改变任何东西。

更那么，有数据相对于的toolbar filtering或single field/advanced searching智能本地过滤可以帮助用户非常多，从1000行将显示他分析了大量的信息。本地过滤和本地分页可以非常原生地一起使用。

来源

2010-12-07 11:02:11 Oleg

如何提高jqGrid的性能

回答

相关问题