Question

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

我们使用的版本是： jgGrid：3.6.4 jQuery的：1.4.2 jQuery UI：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的性能

Answer 1

使用虚拟滚动（查看demo，版本3.7中的新功能 - ＆gt;虚拟滚动）。

Answer 2

你的问题看起来像我最近在{3}}的论坛论坛中的另一个问题。为了确保我可以在这里重复这些信息。

一般来说，jqGrid显示1000行不是问题。具有15列和1000行的answered将足够快地显示在我的计算机上。我没有IE7，但在IE8，IE9测试版，Chrome，Firefox，Opera和Safari（所有在最新版本中）显示表的时间非常快。在示例中，我使用修改后的jQuery UI，其中.ui-widget :active { outline: none; }被删除。有关详细信息，请参阅The demo example和here。

因此，为了能够帮助您，您可能需要完整定义您的jqGrid，包括HTML代码和测试JSON数据。您可以根据here或Fiddler捕获数据。可能你有一些数据类型，不要使用gridview:true选项并使用Firebug方法，这使得jqGrid在延迟页面上的运行速度较慢。也可以在gridComplete或loadComplete事件处理程序中执行许多工作。所以没有我只能猜测的代码。使用哪个列进行数据排序以及如何在网格中插入数据（使用data参数loadonce:true或使用addRowData）也很重要。

另一种观点是使用本地分页。如果您希望从服务器一次返回所有1000行，则会干扰您不要使用1000行数据的本地分页。在afterInsertRow我证明了这一点。问题很简单：一次无法为用户显示所有1000行。用户必须在Web浏览器中或相对于jqGrid本地分页滚动行。本地分页的优点是：只有一页的数据将放在表中。所有其他数据仅在内部以排序形式保存。从用户的角度来看，它可以提高性能并且几乎不会改变任何内容。

然后，对the next example或toolbar filtering / single field 进行智能本地数据过滤可以帮助用户分析将显示他的1000行中的大量信息。本地过滤和本地分页可以非常原生地一起使用。

如何提高jqGrid的性能

2 个答案: