JQGrid：调整列大小后调整网格宽度 [英] JQGrid: Resize Grid Width After Column Resized

问题描述

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

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:

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

If you look at the the demo in the question provided by @Oleg, you can see that the grid does not resize upon the resize of a column.

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

There is a resizeStop event I could maybe use, and then use the method setGridWidth to 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?

谢谢非常适合任何建议！

Thank you so much for any advice!

推荐答案

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

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.

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

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 resizeStop callback can be the following:

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

演示显示它是如何工作的。

The demo shows live how it works.

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

The complexity of the common solution for the jqGrid is higher because one needs sometimes to hold specified width of the grid. My point of view here is the following: if the user specify the width option during the grid initialization (creating) then he want to hold the width. On the other side if no width option 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 width option will be overwritten during the grid creating. My suggestion would be to save the original value of width option in the widthOrg option during the grid creating. So one will be able to test the original value of width option and to choose the best behavior of the grid resizing after the column resizing.

UPDATED ：在jqGrid代码的评论和调试中与您讨论后，我希望我找到的解决方案能够正确独立于<的值code> shrinkToFit 参数。解决方案包括将 resizeStop 的代码更改为以下

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 shrinkToFit parameter. The solution consists from changing the code of resizeStop to the following

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

并更改两行内部 showHideCol jqGrid的方法。它是第一次更改该行

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

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 。

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

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

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

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

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

更新：在更高版本的jqGrid中更改此的值后，应更改上面的<$ c $代码c> resizeStop 回调以下内容：

UPDATED: After changes of the value of this in later versions of jqGrid one should change the above code of resizeStop callback to about the following:

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

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

这篇关于JQGrid：调整列大小后调整网格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！