jqGrid滚动bug与大行 [英] jqGrid scroll bug with big rows

问题描述

Guriddo jqGrid JS版本：4.7.0。

Version of Guriddo jqGrid JS: 4.7.0.

(function ($) {
  'use strict';
  $(function () {
    $('#jqGrid').jqGrid({
      url: '../StrictRoutesRebirth/StrictRoutes/',
      mtype: 'GET',
      datatype: 'json',
      colModel: [{
        label: 'id',
        name: 'id',
        hidden: false,
        key: true
      },
      {
        label: 'Примечание',
        index: 'note',
        name: 'note'
      },
      {
        label: 'Логин',
        index: 'userLogin',
        name: 'userLogin',
        hidden: true,
        edittype: 'text'
      }],
      scroll: 1,
      height: 500,
      width: 500,
      rowNum: 50,
      rownumbers: true,
      pager: '#jqGridPager',
      prmNames: {
        nd: null,
        search: null,
        page: 'page',
        rows: 'pageSize',
        sort: 'sortKey',
        order: 'sortOrder',
        totalrows: 'totalQty'
      },
      jsonReader: {
        root: 'data.entries',
        // page: 'data.pager.page',
        total: 'data.pager.totalPages',
        records: 'data.pager.totalQty'
      }
    });
  });
})(jQuery);

当jqGrid遇到长文本字段（第四个网格以渲染高度较大的行）时启用 scroll：1 jqGrid变得出现故障并且无法正常工作。附上截屏视频以显示问题。

When jqGrid meet the long text fields (that forth grid to render rows with big height) with enabled scroll: 1 jqGrid became to glitch and don't work. Attach screencast to show the problem.

推荐答案

我在之前的回答中写道，虚拟滚动的当前实现有很多限制。我写道，如果确实需要，我不建议使用jqGrid的功能。

I wrote you in previous answers, that the current implementation of virtual scrolling have many restrictions. I wrote that I don't recommend to use the feature of jqGrid if it is really required.

您在问题中描述的限制很清楚。您可以检查 的jqGrid代码看到jqGrid得到第一行的 outerHeight （参见行）并将其乘以行数（参见行和行）。然后使用结果来计算滚动后应该设置的新页面数。

The restriction which you describe in the question is very clear. You can examine the lines of jqGrid code to see that jqGrid get the outerHeight of the first row (see the line) and multiply it on the number of rows (see the line and the line). Then one uses the result for the calculation of the number of new page which should be set after the scrolling.

所以很明显一个人不能使用虚拟滚动功能jqGrid的情况，如果一个人的不同行的高度不同。

So it's absolutely clear that one can't use virtual scrolling feature of jqGrid in case if one have different height for different rows.

当前虚拟滚动的实现还有很多其他问题。最重要的是限制可以在Internet Explorer中显示的行数。如果您只是在Internet Explorer中打开页面 您将只看到第一页数据，您将无法看到更多数据，您将看不到显示数据的建议并非数据库中存在的所有20行。我发现问题与您描述的问题有很大关系。所以一个人尝试使用 scroll：1 选项，通常是在行数很多的情况下，但完全不是这样。有关其他信息，请参见答案。

There are a lot of other problems in the current implementation of virtual scrolling. The most important is the restriction of the number of rows which can be displayed in Internet Explorer. If you just open the page in Internet Explorer you will see only the first page of data and you will have no possibility to see more data and you will see no advice that displayed data are not all 20 rows which exist in the database. I find the problem much have as the problem which you described. So one try to use scroll: 1 option typically in case of large number of rows, but exactly in the case it works not. See the answer for the additional information.

如果您检查正是jqGrid的文档你会发现很多地方（比如这里）jqGrid的某些功能或某些方法不适用于虚拟滚动。因此，如果您使用 scroll：1 作为默认功能，那么您将无法使用jqGrid的许多功能。

If you examine exactly the documentation of jqGrid you will find many places (like here) that some features or some methods of jqGrid don't work with virtual scrolling. So if you would use scroll: 1 as your default feature then you will be not able to use many features of jqGrid.

这篇关于jqGrid滚动bug与大行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！