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

ica*_*ats 6 javascript resize jqgrid

我想在调整列大小后调整网格的宽度(因此网格的宽度将匹配列宽度的总和,包括调整大小的列的新宽度).这样可以防止水平滚动条出现.

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

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

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

非常感谢您的任何建议!

Ole*_*leg 9

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

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

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

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

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);
}
Run Code Online (Sandbox Code Playgroud)

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

cw = this.widthOrg? this.widthOrg: parseInt(this.width,10);
Run Code Online (Sandbox Code Playgroud)

cw = this.widthOrg && $t.p.shrinkToFit ? this.widthOrg: parseInt(this.width,10);
Run Code Online (Sandbox Code Playgroud)

并改变另一条线

$($t).jqGrid("setGridWidth",$t.p.shrinkToFit === true ? $t.p.tblwidth : $t.p.width );
Run Code Online (Sandbox Code Playgroud)

$($t).jqGrid("setGridWidth", $t.p.tblwidth);
Run Code Online (Sandbox Code Playgroud)

你可以在这里获得jqGrid的修改版本.第一个演示使用代码shrinkToFit: true第二演示使用相同的代码,但没有选项shrinkToFit: true.

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

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

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

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

    $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
}
Run Code Online (Sandbox Code Playgroud)