滚动浏览大量记录时，jqGrid 的大小调整行为会发生变化

Question

我最近将我的 jqGrid 从旧版本 (4.4.5) 升级到 (4.13.4-pre)

"autowidth": false,
"shrinkToFit": true,
"loadonce": true,
"scroll": 1,

FWIW - 我在镶板布局中使用它（通过 jQuery UI Layout 实现）

一切都很好，两个版本最初都会加载我的数据并很好地显示 - 无需更改我的启动网格选项或 colModel 等。

但是，如果我将鼠标悬停在数据区域上并使用滚轮开始滚动数据，最终 4.13.4 版本的 jqGrid 将闪烁或刷新以构建下一页数据，这就是当它引入此处显示的不需要的滚动条状态时：

我已经准备好一些调整大小的逻辑，以便在调整父面板大小时，网格会捕捉到正确的位置 - 与用户调整 window 大小时相同。所有这些功能在两个版本的 jqGrid 上都一样 -

只是想知道在此期间我是否遗漏了什么 - 但是我觉得我发现了一个错误。

更新

我已经能够将 jqGrid 控件与上述 jquery UI 布局脚本隔离开来。不良行为持续存在。

页面加载完成后，我调用这样的脚本 "patch up" 我的 jqGrid 的宽度和大小，以便它适合所需的父级 DIV:

function patchUpJQGrid_FitInParentDiv() {
    var newWidth, newHeight, myGridCtrl;

    myGridCtrl = $("#mainGridControl");

    newWidth = $("#parentMainGridDiv").width() - 50;
    newHeight = $("#parentMainGridDiv").height() - 50;

    myGridCtrl.jqGrid('setGridWidth', newWidth, false);
    myGridCtrl.jqGrid('setGridHeight', newHeight);
}

window.setTimeout(patchUpJQGrid_FitInParentDiv, 5000);//ensure jqGrid correctly sized

因此，在上述脚本运行后，UI 已全部设置并正确调整大小。但是随后您开始滚动（使用鼠标滚轮或使用滚动条），最终网格宽度忽略了原来的内容最初是通过 'setGridWidth' 指示的，现在父级 DIV 实质上是屏蔽或遮盖了垂直滚动条，如果你想继续滚动，你需要它..

解决方案

有关详细信息，请参阅下面接受的答案。我想提一下，这些附加选项（从另一个 Oleg 的回答中复制）正在帮助我在我的 jqGrid 实例中实现我想要的（参见 updated jsfiddle demo）

    cmTemplate: { autoResizable: true },
    autoResizing: { compact: true },
    autoresizeOnLoad: true

Answer 1

您在 jqGrid 中使用的一些 jqGrid 选项在使用时是错误的 scroll: 1。您通过使用 patchUpJQGrid_FitInParentDiv 修复了旧 jqGrid 中的问题。要使代码在免费的 jqGrid 中工作，您只需修复 jqGrid 的原始选项。

选项中的主要问题是 height: 'auto' 的使用和未指定 width 选项。如果用scroll: 1就不对了。应该为 height 和 width 选项指定 any 固定值。您可以稍后修改这些值，但初始值非常重要，并且会修改调整大小的行为。

您需要做的是更改选项

    ...
    pager: '#pager1',
    altRows: true,
    altclass: 'myAltRowClass',
    rownumbers: true,
    gridview: true,
    rowNum: 50,
    rowList: [50, 100, 250],
    height: 'auto',
    caption: "Test Queue",
    scrollOffset: 2,
    viewrecords: true,
    sortorder: 'desc',
}

到

    pager: '#pager1',
    altRows: true,
    altclass: 'myAltRowClass',
    rownumbers: true,
    gridview: true,
    //rowNum: 50,
    //rowList: [50, 100, 250],
    //height: 'auto',
    width: 450,
    height: 404,
    caption: "Test Queue",
    //scrollOffset: 2,
    viewrecords: true
    //sortorder: 'desc',
}

更改后可以删除 patchUpJQGrid_FitInParentDiv 的调用，因为不再需要它。

我想强调，以上更改是旧 jqGrid 版本的严格推荐事件。免费的 jqGrid 需要更改。

滚动浏览大量记录时，jqGrid 的大小调整行为会发生变化

jqGrid's sizing behavior changes when scrolling through a large set of records

jqgrid

free-jqgrid