Question

设置了一个实际从java后端获取记录的网格。数据以json格式发送，因此我在jqgrid中使用数据类型作为json。我已经在论坛中使用了这些建议，即已经尝试过包含所有属性，但是当从java检索到的记录数为＆gt;时，性能仍然很大。 500行。这只在IE中很慢，但在FF中渲染非常快并且工作正常。

请注意，我不希望分页，但所有记录都应显示在网格中的垂直滚动条中。

已经粘贴了我使用的重要属性/功能，请在此建议。

    type: "POST",
    cache: false,
    url: '............', 
    datatype: "json",
    viewrecords: false,
    gridview: true, // tried false as well
    pgtext: "",
    ignoreCase: true,
    rownumbers: true,
    pginput: false,
    loadonce: true, // tried setting the loadonce:false as well , no luck
    pager: false,
    cellEdit: true,
    pgbuttons: false,
    editurl: 'clientArray',
    beforeProcessing: function (data) {
//setting the rownum, if not set it always shows only 20 records as its the default
      $(this).setGridParam({rowNum: data.length}).trigger("reloadGrid");
    },
    loadComplete: function (data) {
        if (data.length > 0) {
            if (data.length <= 10) {
                $(this).setGridHeight('auto');
            }
            else {
                $(this).setGridHeight(200); //setting vertical scroll bar within the grid and not for browser
            }
        }
        else if (data.length == 0) {
            ..............
        }
    }

Answer 1

我建议您升级到最新的free jqGrid 4.12.1或GitHub的当前代码（jqGrid 4.12.2-pre）。免费的jqGrid是我从2014年底开始开发的jqGrid的分支。它可以提高应用程序的性能并简化代码，因为我实现了许多对你有用的功能。

免费jqGrid支持maxHeight选项。您只需要包含maxHeight: 200，这可以与height: "auto"（免费jqGrid中的默认值）结合使用。我认为，如果你必须显示更多500行，那么避免分页的要求是错误的。您可以向客户展示滚动纯HTML表格（1000行）或免费jqGrid（1000行）的性能（请参阅the demo）并与演示文档进行比较。 The first demo使用页面大小20显示包含13列的4000行。如果使用1000行的演示工作得非常快。此外，您可以尝试按任何列排序或过滤数据。表现非常好。即使是{400}行的the next demo也可以更快地进行，因为1000行没有分页。用户的主要目标：拥有快速网格，几乎可以立即显示结果。 JavaScript在现代Web浏览器中运行得足够快，并且每个用户都能直观地理解本地分页的使用。

下一个新的免费jqGrid选项可能对您有所帮助：

forceClientSorting: true，如果服务器不根据loadonce: true和{{1}返回排序数据，则可与sortname结合使用}}。 sortorder的使用通知jqGrid在显示之前对服务器响应中的数据进行排序。

forceClientSorting: true选项可与众所周知的multiPageSelection: true选项结合使用。通常，jqGrid支持multiselect: true参数（其中包含所选行的ID）仅适用于一个页面。在初始加载期间，在更改到另一个页面期间以及在排序期间，该阵列将被重置为空数组selarrrow。选项[]允许＆＃34;预先选择＆＃34;使用multiPageSelection: true的某些行（例如，您可以从selarrrow内的服务器响应中设置它）并保留所有页面上的选择。为The demo创建的the answer演示了该功能。

隐藏列会增加页面的大小并使页面缓慢，因为数据将保留在页面的DOM上，而不是简单地将数据保存在JavaScript数组/对象中。选项beforeProcessing是免费jqGrid的新功能，它解决了这个问题。旧版本的jqGrid仅在本地additionalProperties参数中加载和保存列的数据（对于data），但colModel在结果网格中创建列。因此，对这些数据通常使用colModel属性。选项hidden: true包含输入数据的附加属性数组，需要在本地读取和保存。选项additionalProperties例如从输入数据的每个项目中读取并保存本地additionalProperties: ["taskId", "isFinal"]和taskId属性。这些属性可以在自定义格式化程序isFinal，cellattr内使用，以进行排序和过滤。另一种使用形式是rowattr，其中additionalProperties: [{ name: "taskId", sorttype: "integer"}, "isFinal"]的项目具有与additionalProperties项目相同的格式。它通知免费的jqGrid，在排序或过滤期间，字段colModel应该被解释为整数。 The demo显示了taskId在搜索对话框中的用法。

您在评论中提到的另一件事是您的问题。方法additionalProperties有助于阅读当前页面中的数据（如果您使用getRowData，则会看到差异，并将pager: true设置为较小的值作为网格中的项目数）。此外，rowNum使用 unformatter 来解码页面中的格式化数据，以转换为初始数据格式。 getRowData没有getRowData参数可用于从页面获取所有数据。另一方面rowid只需将引用返回到内部getGridParam参数，并从服务器读取所有数据。 data工作非常快，并且包含来自所有网页的所有数据。

要求许多开发人员提出的另一个常见问题是：我应该下载免费的jqGrid 并使用对jqGrid文件（$("#grid").jqGrid("getGridParam", "data")和jquery.jqgrid.min.js）的本地副本的引用或使用URL到the wiki article中描述的CDN？ 我建议大家使用CDN 。对于Internet不可用的情况，您可以使用本地副本作为回退路径。如果真的需要，有许多方法可以实现回退行为。如果您提供Internet上提供的 public 网站，那么您真的应该使用CDN。我可以尝试在下面解释为什么它。

首先，某些特定版本的jqGrid，jQuery或其他常见文件不可更改。新版本的文件将包含另一个版本，因此CDN上有另一个路径。因此，从http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js加载的数据将始终相同。

使用jqGrid的推荐方法，如jQuery和其他常见的JavaScript库和CSS框架 CDN的用法。 Here您可以找到代码示例和here工作演示，它使用来自CDN的所有相关文件。主要优点：主要使用本地缓存中所需的文件，当真正需要下载文件时，文件将从世界上任何位置快速加载。我试着解释原因。

让我们从http://cdn.jsdelivr.net/free-jqgrid/4.12.1/css/ui.jqgrid.min.css和http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js加载免费的jqGrid文件。您可以检查更严重响应的 HTTP标头以了解原因。我们来看看ui.jqgrid.min.css的标题。它看起来像

jquery.jqgrid.min.js

最初加载的数据总数为121.791字节（标题：418;正文：121.373）。

我不想评论所有HTTP标头，只有一些是最重要的：

压缩初始加载的数据。

标题HTTP/1.1 200 OK Date: Sun, 07 Feb 2016 11:46:33 GMT Content-Type: application/javascript; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Last-Modified: Tue, 19 Jan 2016 13:22:55 GMT Vary: Accept-Encoding ETag: W/"569e38af-4d806" Access-Control-Allow-Origin: * Timing-Allow-Origin: * Cache-Control: public, max-age=31536000 Server: NetDNA-cache/2.2 X-Cache: MISS Content-Encoding: gzip允许在365天（356 * 24 * 60 * 60）内将加载的数据缓存在Web浏览器或代理的缓存中。如果用户在下次没有向服务器发出请求时加载相同的页面。

标题Cache-Control: public, max-age=31536000和ETag: W/"569e38af-4d806"对于重新验证数据非常重要。如果用户按 F5 重新加载数据，但它仍在本地保留数据，则向服务器获取Last-Modified: Tue, 19 Jan 2016 13:22:55 GMT的请求将包含来自缓存版本的ETag < / strong>的文件。该请求将包含HTTP标头

If-Modified-Since：Tue，2016年1月19日13:22:58 GMT 如果 - 无匹配：W /＆＃34; 569e38b2-acbef＆＃34;

您可以验证来自http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js 的响应仅包含320字节，该响应以
开头
jquery.jqgrid.min.js

这意味着服务器确认可以使用以前加载的HTTP/1.1 304 Not Modified版本。因此，jquery.jqgrid.min.js将被重新加载＆＃34;很快。

最后我要注意的是，数据的初始加载和重新验证请求的响应都将很快从cdn.jsdelivr.net 获得。该网站在该字的许多位置都有镜像服务器，服务器针对重新验证响应进行了优化。

我希望现在很清楚为什么我建议使用像cdn.jsdelivr.net这样的CDN作为加载免费jqGrid文件的主要来源。

jqGrid：与FF相比，IE 9/11中的性能问题（在滚动时）

1 个答案: