調整jqgrid中的最後一列

Question

jqgrid中似乎存在一個錯誤，其中一個是can not resize the last column。

這似乎是在2009年提出的一個相當老的問題。我看了一下，最新的jqGrid示例似乎有這個問題... 但我發現，最後一列可以拖動來調整網格本身的大小。 請參閱here轉到章節3.6中的新功能。 任何指針，如果這已經修復。

Answer 1

它對我來說也很好，雖然你必須從「RTL支持」示例的右邊調整大小，這似乎是有意義的。

另請注意，如果您使用的是Chrome，則會出現導致水平滾動條出現的jqGrid錯誤 - 請參閱jqgrid-does-not-render-correctly-in-chrome-chrome-frame。此問題已解決，但演示頁尚未更新。它肯定會讓最後一列的大小調整不起作用，因爲在調整最後一列之前，您必須一直向右滾動。

Answer 2

我試圖調整resizeStop的最後一列，我做了一些像其他人說的技巧。希望它有幫助。

resizeStop（寬度，索引）{風險amGrid = $（ 「＃jsonmap」），colModel = $（ 「＃jsonmap」）的jqGrid（ 'getGridParam'， 'colModel'）; var oW = $ oldWidths [index]; var cW = colModel [index + 1] .width + downCalSize（oW，width）; $ oldWidths [index + 1] = cW; $ oldWidths [index] = 寬度; （'.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（「width」，w）; （'。ui-jqgrid-btable'）。css（「width」，w）; }

我仍然在尋找一種常用的方法，可以在一個頁面上做更多的表格，而且不會互相影響。

Answer 3

似乎我找到了解決方案。 最後一列的大小隻能在標頭包裝（div.ui-jqgrid-hbox）的區域內完成。在外太空調整過程中失去了重點。 由於存在一些具有默認20像素的填充右側區域，因此只能在此小部分中增加大小。 另外，我們需要暫時取消表包裝的影響，因爲他也會導致停止調整大小的過程。

這裏是我的解決方案。我想，你的表包裝標識是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 4

我發現，最好的辦法是在表格的末尾添加一個空unresizable列。 我只是通過在執行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是triggerd ...

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

然後列應該能夠調整到哪裏鼠標點。
希望這會有所幫助。