jqgrid 中似乎有一个错误,无法调整最后一列的大小。
这似乎是 2009 年提出的一个相当老的问题。我看了看,最新的 jqGrid 示例似乎有这个问题......但我发现最后一列可以拖动以调整网格本身的大小。请参阅此处转到 3.6 中的新增功能部分。任何指针,如果这已经修复。
jqgrid 中似乎有一个错误,无法调整最后一列的大小。
这似乎是 2009 年提出的一个相当老的问题。我看了看,最新的 jqGrid 示例似乎有这个问题......但我发现最后一列可以拖动以调整网格本身的大小。请参阅此处转到 3.6 中的新增功能部分。任何指针,如果这已经修复。
似乎我找到了解决方案。只能在标题包装器 (div.ui-jqgrid-hbox) 的区域内调整最后一列的大小。在外层空间调整大小过程中失去焦点。由于存在一些默认为 20 像素的 padding-right 区域,因此只能在这小部分中增加大小。此外,我们需要暂时取消 table wrapper 的影响,因为他也会导致停止调整大小的过程。
这是我的解决方案。我假设,您的表包装器 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#
我发现最好的方法是在网格末尾添加一个空的不可调整大小的列。我只是在执行 jqgrid 构造函数之前通过扩展 colModel 手动进行。唯一的问题是 - 到目前为止,我无法让它不可拖动。
这是一个例子:
colModel.push({align: "left", editable: false, hidden: false, index: "ghostCol", label: " ", name: "ghostCol", resizable: false, sortable: false, type: "text", width: 50});
希望这可以帮助。
经过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;
});
...
然后列应该能够调整到鼠标指向的任何位置。
希望这会有所帮助。
我试图用 resizeStop 调整最后一列的大小,我像其他人说的那样做了一些技巧。希望它有所帮助。
resizeStop(width, index) { var amGrid = $("#jsonmap"), colModel = $("#jsonmap").jqGrid('getGridParam','colModel'); var oW = $oldWidths[索引]; var cW = colModel[index+1].width+ downCalSize(oW,width); $oldWidths[index+1] = cW; $oldWidths[索引] = 宽度;
$('.ui-jqgrid-labels > th:eq('+(index+1)+')').css('width',cW); $('#jsonmap .jqgfirstrow > td:eq('+(index+1)+')').css('width',cW); var w = amGrid.jqGrid('getGridParam', 'width'); $('.ui-jqgrid-htable').css("宽度",w); $('.ui-jqgrid-btable').css("宽度",w); }
我仍在寻找一种通用的方法,可以在一页中处理更多表格并且不会相互影响。
尽管您必须在“RTL Support”示例中从右侧调整大小,但它对我来说也可以调整大小,这似乎是有道理的。
另请注意,如果您使用的是 Chrome,则存在导致水平滚动条出现的 jqGrid 错误 - 请参阅jqgrid-does-not-render-correctly-in-chrome-chrome-frame。此问题已得到解决,但演示页面尚未更新。而且它肯定会使最后一列的大小调整看起来不起作用,因为您必须一直滚动到右侧才能调整最后一列的大小。