Question

jqgrid似乎有一个错误，其中一个can not resize the last column。

这似乎是2009年提出的一个相当古老的问题。我看了一下，最新的jqGrid示例似乎有这个问题...... 然而，我发现可以拖动最后一列来调整网格本身的大小。请参阅here转到3.6中的新内容。任何指针如果已经修复了。

Answer 1

似乎我找到了解决方案。最后一列的大小调整只能在标题包装器（div.ui-jqgrid-hbox）的区域内完成。在外太空调整大小的过程中失去焦点。由于存在一些默认为20像素的填充右侧区域，因此只能在这个小部分中增加大小。另外，我们需要暂时取消表包装器的影响，因为他还会导致停止调整大小的过程。

这是我的解决方案。我假设您的表包装器ID为gbox_DataTable_u：

1： CSS：定义新的宽填充右侧区域：

.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 10000px;}

2：将2个事件附加到您的网格：

resizeStart:function(event, index){ $('#gbox_DataTable_u').width($('#gbox_DataTable_u').outerWidth() + 10000);}

resizeStop: function(width, index) {$('#gbox_DataTable_u').width($('#DataTable_u').outerWidth());}

工作台示例：http://www.design.atplogic.co.il/aman/philips/users.htm#

Answer 2

虽然你必须在“RTL支持”示例中从右侧调整大小，这对我来说也很好。这看起来很有意义。

另请注意，如果您使用Chrome，则会出现导致水平滚动条显示的jqGrid错误 - 请参阅jqgrid-does-not-render-correctly-in-chrome-chrome-frame。此问题已解决，但演示页面尚未更新。并且它确实使最后一列调整大小的外观不起作用，因为在调整最后一列之前必须向右滚动到右边。

Answer 3

我试图用resizeStop调整最后一列的大小，我做了一些技巧，就像其他人说的那样。希望它有所帮助。

resizeStop（width，index）{var amGrid = $（“＃jsonmap”），colModel =   $（ “＃jsonmap”）的jqGrid（ 'getGridParam'， 'colModel'）。 var oW =   $ oldWidths [指数]; var cW = colModel [index + 1] .width +   downCalSize（OW，宽度）; $ oldWidths [index + 1] = cW; $ oldWidths [index] =   宽度;

$（'。ui-jqgrid-labels＆gt; th：eq（'+（index + 1）+'）'）。css（'width'，cW）;   $（'＃jsonmap .jqgfirstrow＆gt; td：eq（'+（index + 1）+'）'）。css（'width'，cW）;   var w = amGrid.jqGrid（'getGridParam'，'width'）;   $（ 'UI-的jqGrid-htable'）的CSS（ “宽度”，w）的。   $（ 'UI-的jqGrid-BTABLE'）的CSS（ “宽度”，w）的。 }

我仍然在寻找一种常见的方式，可以在一个页面中的更多表格上做，而不会相互影响。

Answer 4

我发现最好的方法是在网格的末尾添加一个空的不可调整列。我只是通过在执行jqgrid构造函数之前扩展colModel来手动完成。唯一的问题是 - 到目前为止我无法使其无法拖拽。

以下是一个例子：

colModel.push({align: "left", editable: false, hidden: false, index: "ghostCol", label: " ", name: "ghostCol", resizable: false, sortable: false, type: "text", width: 50});

希望这有帮助。

Answer 5

经过2天的挣扎......我终于找到了解决问题的方法。似乎jqGrid在dragMove事件中计算调整大小对象，它使用传递的事件对象来获取鼠标的位置并计算调整大小列的新宽度。但是当拖动超出网格的边界时，dragMove事件会停止拍摄... 所以我的工作只是修改jqGrid以在dragEnd事件中再次计算调整大小对象。这是修改后的代码

首先找到dragEnd事件。

...
dragEnd: function(e) { // add a new input parameter
this.hDiv.style.cursor = "default";
if(this.resizing) {
    this.dragMove(e); // call dragMove event to calculate resize object 
...

然后找到dragEvent被触发的mouseup事件...

...
$(document).mouseup(function (e) { //  get the event object
if(grid.resizing) { grid.dragEnd(e); return false;}// pass event to dragEnv
    return true;
});
...

然后列应该能够调整到鼠标点的任何位置。
希望这会有所帮助。

调整jqgrid中的最后一列

5 个答案: