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

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

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

如果查看@Oleg提供的in，可以看到网格不会在调整列的大小时调整大小

我可以使用

resizeStop

事件，然后使用

setGridWidth

方法将网格设置为列宽度总和的宽度。我不知道如何求列的宽度之和……也许JQGrid中内置了一些东西，我可以很容易地做到这一点

---

非常感谢您的建议

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

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

resizeStop

回调的代码可以是以下代码：

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

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

    $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
}

现场展示它是如何工作的

jqGrid的通用解决方案的复杂性更高，因为有时需要保持指定的网格宽度。我的观点如下：如果用户在网格初始化（创建）期间指定

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
方法的更改。这是第一次换衣服

到

改变

到

您可以获得jqGrid的修改版本。将代码与
shrinkToFit:true
一起使用，并使用相同的代码，但不带选项
shrinkToFit:true

我在第二天考虑了如何在创建jqGrid时使用fixed
width
选项的情况下使修复也起作用，并将把我的建议发布到trirand论坛

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

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

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

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,

我认为这是最简单的方法
Oleg-非常感谢您的回复！！！这很好用。我也理解你的观点。我注意到，当调整一列的大小时，所有其他列的大小都会按比例调整。为了能够在不调整其他列大小的情况下调整列的大小，我发现“shrinkToFit”需要设置为false。但是，这会在删除/添加列时破坏网格的收缩/扩展。所以，我可以覆盖列选择器的“完成”选项，但我不确定如何计算那里的网格宽度。@icats:您是指可选的第二个参数
收缩
的
设置网格宽度
还是jqGrid的
收缩到它的
选项？您能否更准确地描述一下jqGrid具有哪些设置（尤其是您使用的
shrinkToFit
和
forceFit
的值）。您能否另外准确地描述一下在1）一列将由用户调整大小（列上的宽度将减少或增加）2）一列将由列选择器隐藏或显示后，您希望在网格中有哪些行为。噢，我为我糟糕的描述感到抱歉！我的网格选项实际上与您的网格选项相同（默认值
shrinkToFit
，
forceFit
，等等，因为我没有定义它们）。但是，我添加了
shrinkToFit:false
，以便调整列大小时不会按比例扩展/收缩其他列。添加
shrinkToFit:false
会在添加/删除列后自动调整网格大小。基本上，我希望网格始终是列宽总和的大小。因此，添加列或扩展列应增加网格宽度，删除列或收缩列应减少网格宽度。此外，网格的初始宽度应该是可见列的宽度之和（使用colModel中定义的列宽）。非常感谢您的回复@icats：我更新了我的答案，我希望我回答了你所有的问题。
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,