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

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 demo in the question provided by @Oleg, you can see that the grid does not resize upon the resize of a column.

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

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?

我可以使用resizeStop事件,然后使用方法setGridWidth将网格设置为列宽度总和的宽度。我不确定如何总结列的宽度...也许JQGrid中有一些内置的东西,我可以用来轻松地做到这一点?

Thank you so much for any advice!

非常感谢您的任何建议!

2 个解决方案

#1

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

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

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

The demo shows live how it works.

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

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.

jqGrid的通用解决方案的复杂性更高,因为有时需要保持网格的指定宽度。我的观点如下:如果用户在网格初始化(创建)期间指定宽度选项,那么他想要保持宽度。另一方面,如果在创建网格期间没有指定宽度选项,则可以根据所有列的宽度总和计算网格的总宽度(如您所愿)。如果某些列宽将被更改,则应调整(重新计算)网格宽度。问题只是在网格创建过程中将覆盖原始的空宽度选项。我的建议是在网格创建期间在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 shrinkToFit parameter. The solution consists from changing the code of resizeStop to 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 showHideCol method of jqGrid. It's first changing of the line

并更改了jqGrid的两行内部showHideCol方法。这是第一次换线

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 demo uses the code with shrinkToFit: true and the second demo uses 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 width option of jqGrid at the creating time and will post my suggestion to the trirand forum.

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

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的最小化版本,你可以自己最小化它或使用原始的jqGrid最小化版本,并且只覆盖$ .jgrid.extend的showHideCol方法。看演示。

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:

更新:在jqGrid的更高版本中更改此值之后,应将上面的resizeStop回调代码更改为以下内容:

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

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

#2

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

我认为这是最简单的方法