Question

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

这有点类似于this question，除了在隐藏/显示列后调整网格大小之外，我希望在扩展/缩小列时调整大小：

如果您查看@Oleg提供的the demo中的the question，您可以看到在调整列大小时网格不会调整大小。

我可以使用resizeStop事件，然后使用方法setGridWidth将网格设置为列宽度总和的宽度。我不确定如何总结列的宽度...也许JQGrid中内置了一些我可以用来轻松完成的东西？

非常感谢您的任何建议！

Answer 1

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

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

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

The demo显示了它是如何运作的。

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的两行内部showHideCol方法。它是第一次更改the line

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

到

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

并更改another line

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

到

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

您可以获得jqGrid here的修改版本。 The first demo使用代码与shrinkToFit: true和the second demo使用相同的代码，但没有选项shrinkToFit: true。

我在第二天如果在创建时使用jqGrid的固定width选项的情况下如何使修复工作，并将我的建议发布到trirand论坛。

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

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

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

Answer 2

我做了一个功能

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,

我认为这是最简单的方法

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

2 个答案: