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

JQGrid: Resize Grid Width After Column Resized

提问by icats

I would like to resize the width of the grid after a column is resized (so the width of the grid will match the sum of the widths of the columns, including the new width of the resized column). This should prevent the horizontal scrollbar from appearing as well.

我想在调整列大小后调整网格的宽度（因此网格的宽度将与列的宽度总和相匹配，包括调整大小的列的新宽度）。这也应该防止出现水平滚动条。

This is sort of similar to this question, where in addition to the grid resizing after hiding/showing columns, I would like it to resize when expanding/shrinking columns:

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

If you look at the the demoin the questionprovided by @Oleg, you can see that the grid does not resize upon the resize of a column.

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

There is a resizeStopevent I could maybe use, and then use the method setGridWidthto set the grid to the width of the sum of the widths of the columns. I'm not sure how to sum the widths of the columns though...Maybe there is something built into JQGrid that I could use to do this easily?

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

Thank you so much for any advice!

非常感谢您的任何建议！

回答by Oleg

I personally find the question very good. I make many suggestions how to improve the algorithm of calculation of the grid width. Twice I included the behavior like you want in my suggestions, but Tony (the developer of jqGrid) removed the part of the changes.

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

To implement your requirements in the current version of jqGrid is very easy, but the code uses some internal grid structures. So you should verify whether the same trick will work in the next versions too. The code of the resizeStopcallback can be the following:

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

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

The demoshows live how it works.

该演示现场展示了它的工作原理。

The complexity of the common solution for the jqGrid is higher because one needs sometimes to holdspecified width of the grid. My point of view here is the following: if the user specify the widthoption during the grid initialization (creating)then he want to holdthe width. On the other side if no widthoption are specified during creating of the grid one wish (like you as wish) the calculation of the total width of the grid based on the sum of the widths of all columns. In the case if some column width will be changed, the grid width should be adjusted (recalculated) too. The problem is only that the original empty widthoption will be overwrittenduring the grid creating. My suggestion would be to save the originalvalue of widthoption in the widthOrgoption during the grid creating. So one will be able to test the originalvalue of widthoption and to choose the best behavior of the grid resizing after the column resizing.

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

UPDATED: After some discussion with you in comments and debugging of jqGrid code I hope that I found the solution which works correctly independent from the value of shrinkToFitparameter. The solution consists from changing the code of resizeStopto the following

更新：在 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);
}

and changing of two lines of internal showHideColmethod of jqGrid. It's first changing of the line

以及改变showHideColjqGrid的两行内部方法。这是第一次换线

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

to

到

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

and changing of another line

并改变另一条线路

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

to

到

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

You can get modified version of jqGrid here. The first demouses the code with shrinkToFit: trueand the second demouses the same code, but without the option shrinkToFit: true.

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

I though in the next day how to make the fix working also in case of the usage fixed widthoption of jqGrid at the creating time and will post my suggestion to the trirand forum.

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

If you want uses minimized version of jqGrid you can either minimize it yourself or use the originaljqGrid minimized version and overwrite only the showHideColmethod with respect of $.jgrid.extend. See the demo.

如果你想最小化的jqGrid版本使用你可以自己或者将其最小化或使用原有的jqGrid最小化版本，并只覆盖了showHideCol相对的方法$.jgrid.extend。请参阅演示。

UPDATED: After changes of the value of thisin later versions of jqGrid one should change the above code of resizeStopcallback to about the following:

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

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

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

回答by user2686332

I make a function

我做一个功能

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);

};

... and then, in the grid params

...然后，在网格参数中

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

I think that is the easyest way

我认为这是最简单的方法