首先 Jqgrid 在 IE6 中加载、排序和过滤很慢。在其他浏览器中过滤缓慢

Question

我正面临这种情况。我有一个大约 3500 行的网格。而且这个网格应该是跨浏览的，特别是在 IE6（这是客户端的浏览器......不幸的是）。

当我在 IE6 中进行测试时，加载时间比其他浏览器要多。看到这个后，我决定优化查询，现在它只加载必要的数据库字段，但在 IE 中加载仍然很慢。我的数据类型是JSON。

除了这个不便之外，我发现所有浏览器的过滤速度都很慢（在 IE6 中比其他浏览器需要更多时间）。我在过滤器中使用选项searchOnEnter : false，在 IE6 中按列排序也很慢。

当我使用按列过滤和排序时，我可以做些什么来减少加载时间？我仍在尝试寻找可能的解决方案，但我的想法已经不多了。

提前致谢。

更新：jQGrid代码

var myGrid = $('#bookingsList');
myGrid.jqGrid({
    jsonReader : { root: "rows", repeatitems: false, id: "0", cell: ""},
    url:'/WebBooking/json/bookingListAct.action',
    datatype: 'json',
    mtype: 'POST',
    colNames:['Id','Site','CompanyId','Created'],
    colModel :[
    {name:'bestillingId', index:'bestillingId', width:45, sorttype: 'int'}, 
    {name:'stedName', index:'stedName', width:90},
    {name:'firmaId', index:'firmaId', width:200, hidden:true}, 
    {name:'creationDate', index:'creationDate', width:105, search:false}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,50,100,150,200,250,500],
    sortname: 'bestillingId',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    loadonce: true,
    sortable: true,
    rownumbers: true,
    autoencode: true,
    ignoreCase: true,
    shrinkToFit:false,
    width: 1050,
    height: '100%'
}); 

更新：JSON字符串（一部分）

{"page":"1","records":"3180","rows":[{"stedName":"Mongstad","bestillingId":"2","firmaName":"Reinertsen AS","creationDate":"13.09.11 09:01"}],"total":"318"}

Answer 1

您当前代码中的主要问题是loadonce: true 的使用。在这种情况下，url:'/WebBooking/json/bookingListAct.action' 的实现非常简单：您只需将 所有数据 返回到 jqGrid。尽管如此，如果您应该对数据进行排序，则事件对应于sortname: 'bestillingId' 和sortorder: 'desc'，这将在服务器上（在bookingListAct.action）上显示为sidx 和sord 参数。

您应该了解，在使用loadonce: true 的情况下，数据的排序、分页和过滤将在客户端以JavaScript 代码实现。您如何知道 JavaScript 主要是解释器，并且不会编译代码（至少在旧的 Web 浏览器中）。因此，在客户端对数据的排序比在服务器上编译的本机代码慢很多倍（或数千倍）。如果您将数据保存在数据库中并且在您允许排序或过滤的列上有索引，那么在服务器端实现中排序和过滤将更快。

所以我的主要建议是实现服务器端排序、分页和过滤。

要在服务器端实现排序，你应该sidx和sord在相应的SQL SELECT语句中构造ORDER BY。

要在服务器端实现分页，您应该使用来自page 和rows 参数的信息。您可以使用SELECT TOP 和LEFT OUTER JOIN 或LIMIT 和SKIP 取决于您使用的SQL 方言（请参阅here）一些详细信息。

要实现过滤，您应该首先使用filterToolbar 的stringResult: true 选项来获取有关要以高级搜索格式发送的过滤器的信息（请参阅here）。 JSON 字符串形式的完整过滤器将作为filters 参数发送到服务器。此外，它将发送布尔 _search 参数。在服务器端，您应该将 filters 参数从 JSON 字符串转换为对象并解析信息。然后你应该使用这些信息来构造相应的SELECT 语句的WHERE 部分。

如果所有的信息排序、分页和过滤都存在于对服务器的请求中，那么您应该首先过滤数据，对结果进行排序，然后从结果中获取请求的页面。服务器响应中的records 和total 值应考虑过滤。因此，如果过滤后的数据包含例如 12 行且页面大小为 10，则您应该返回 "records": 12, "total": 2 而不是未过滤数据中的 "records": 3180, "total": 318。

我自己不使用 Java。我不确定它是否对您有帮助，但在 the answer 您会找到并下载实现分页、排序和过滤的 Visual Studio C# 项目。

最后一句话。您从服务器返回的数据行当前看起来像

{"stedName":"Mongstad","bestillingId":"2","firmaName":"Reinertsen AS",
    "creationDate":"13.09.11 09:01"}

如果您将默认的repeatitems: true 数据格式与id: "0", cell: "" 一起使用，您可以将行所需的数据替换为

["Mongstad","2","Reinertsen AS",:"13.09.11 09:01"]

它将减少数据的大小并额外提高性能。此外，我个人不喜欢以"13.09.11 09:01" 之类的形式使用日期。这种形式是本地化的，将被解释为字符串，因此无法正确排序和过滤。最好以ISO 8601 格式返回数据：2011-109-13T08:01Z 或2011-109-13T09:01+01:00。您可以将formatter: 'data' 与formatoptions: { srcformat: 'ISO8601Long', newformat: 'd.m.y H:i' } 一起使用。