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字符串（A部分）

{"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 ORDER BY语句中构造SELECT。

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

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

如果对服务器的请求中存在所有信息排序，分页和过滤，则应首先过滤数据，对结果进行排序并从结果中获取请求的页面。服务器响应中的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' }一起使用。

IE6中的第一个Jqgrid加载，排序和过滤速度很慢。在浏览器的其余部分中过滤速度很慢

1 个答案: