JQGrid:调整列大小后调整网格宽度

JQGrid: Resize Grid Width After Column Resized

本文关键字：调整 网格 JQGrid      更新时间：2023-09-26

我想在调整列的大小后调整网格的宽度（这样网格的宽度将与列的宽度之和匹配，包括调整大小的列的新宽度）。这样可以防止出现水平滚动条。

这有点类似于这个问题，除了隐藏/显示列后调整网格大小外，我还希望它在扩展/收缩列时调整大小：

如果你看一下@Oleg提供的问题中的演示，你可以看到网格不会在调整列的大小时调整大小。

我可以使用一个resizeStop事件，然后使用方法setGridWidth将网格设置为列宽度之和的宽度。不过，我不知道如何对列的宽度求和。。。也许JQGrid中内置了一些东西，我可以用它轻松地做到这一点？

非常感谢你的建议！

我个人觉得这个问题很好。我对如何改进网格宽度的计算算法提出了许多建议。我有两次在建议中包含了你想要的行为，但Tony（jqGrid的开发人员）删除了部分更改。

在当前版本的jqGrid中实现您的需求非常容易，但代码使用了一些内部网格结构。因此，您应该验证在下一个版本中是否也能使用相同的技巧。resizeStop回调的代码可以如下：

resizeStop: function () {
    $(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first')
                .jqGrid('setGridWidth', this.newWidth);
}

演示演示了它的工作原理。

jqGrid的通用解决方案的复杂性更高，因为有时需要保持指定的网格宽度。我的观点如下：如果用户在网格初始化（创建）期间指定width选项，那么他希望保持宽度。另一方面，如果在创建网格的过程中没有指定width选项，则希望（如您所愿）根据所有列的宽度之和计算网格的总宽度。如果某些列宽将被更改，则网格宽度也应进行调整（重新计算）。问题只是在创建网格期间，原始的空width选项将被覆盖。我的建议是在创建网格期间，将width选项的原始值保存在widthOrg选项中。因此，可以测试width选项的原始值，并在列调整大小后选择网格调整大小的最佳行为。

更新：在jqGrid代码的注释和调试中与您进行了一些讨论后，我希望我找到了独立于shrinkToFit参数值的正确工作的解决方案。解决方案包括将resizeStop的代码更改为以下

resizeStop: function () {
    var $grid = $(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first'),
        shrinkToFit = $grid.jqGrid('getGridParam', 'shrinkToFit');
    $grid.jqGrid('setGridWidth', this.newWidth, shrinkToFit);
}

以及jqGrid内部CCD_ 12方法的两条线的改变。这是线路的第一次更换

cw = this.widthOrg? this.widthOrg: parseInt(this.width,10);

至

cw = this.widthOrg && $t.p.shrinkToFit ? this.widthOrg: parseInt(this.width,10);

以及更换另一条线路

$($t).jqGrid("setGridWidth",$t.p.shrinkToFit === true ? $t.p.tblwidth : $t.p.width );

至

$($t).jqGrid("setGridWidth", $t.p.tblwidth);

您可以在这里获得jqGrid的修改版本。第一个演示使用带有shrinkToFit: true的代码，第二个演示使用相同的代码，但没有选项shrinkToFit: true。

第二天，我想知道如何在创建时使用jqGrid的固定width选项的情况下进行修复，并将在trirand论坛上发布我的建议。

如果您想使用jqGrid的最小化版本，您可以自己最小化它，也可以使用原始jqGrid最小化版本，并仅覆盖$.jgrid.extend的showHideCol方法。请参阅演示。

更新：在jqGrid的后续版本中更改this的值后，应该将resizeStop回调的上述代码更改为以下内容：

resizeStop: function () {
    var $self = $(this),
        shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit");
    $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
}

我制作了一个函数

var grid_setAutoWidth = function() {
    var columnas = $(this).jqGrid('getGridParam', 'colModel');
    var anchoTotal = 0;
    for (var i = 0; columnas[i]; i++) {
        anchoTotal += columnas[i].width;
    }
    anchoTotal += 50;
    $(this).jqGrid('setGridWidth', anchoTotal);
};

然后，在网格参数中

shrinkToFit: false,
loadComplete: grid_setAutoWidth,
resizeStop: grid_setAutoWidth,

我认为这是最简单的方法

相关文章：