2013-10-11 32 views
5

colResizable似乎是可調整列寬的好插件。帶colcolizable插件的列寬

不幸的是,它刪除了最初設置的寬度。我使用whitespace: nowrap,因爲我有一些小列和一些較大的列。現在使用colResizable插件,所有列都調整爲相同的大小。

我嘗試通過在插件利用之前讀取列寬度並在之後重置它們來解決問題。起初它看起來不錯,但隨後發生了一些奇怪的事情。握把當然會留在他們曾經使用過相同大小的柱子的地方。

var columnWidths = new Array(); 
// store original col widths in array 
$.each($("th", table), function() { 
    columnWidths.push($(this).width()); 
}); 

// Make cols resizable 
$(function() { 
    table.colResizable({ 
     liveDrag: true, 
     gripInnerHtml: "<div class='grip'></div>", 
     draggingClass: "dragging" 
    }); 
}); 

// reset columns to original width 
for (var i = 0; i < columnWidths.length; i++) { 
    $('th:nth-child(' + (i + 1) + ')', table).css({ width: columnWidths[i] + "px" }); 
} 

任何人都可以想出更好的解決方案嗎?

回答

6

github學習源代碼後,我找到了一個更好的方法。

表格的佈局首先在表格被分配SIGNATURE類別時被改變,其中SIGNATURE類別包括 在此之前,我將原始列寬度推入新數組中。該數組傳遞給createGrips函數。

/* init function */ 
// ... 

var originalColumnWidths = new Array(); 
$.each($('th', t), function() { 
    originalColumnWidths.push($(this).width()); 
}); 

// t.addClass(SIGNATURE) ... 

createGrips(t, originalColumnWidths); 

當通過在createGrips功能的列循環,我指定從數組中的值與新的jQuery包裹列對象,而不是當前列的寬度。

// Change the signature 
var createGrips = function (t, originalColumnWidths) { 
// ... 

// Replace that line 
c.w = c.width(); 
// with the following 
c.w = originalColumnWidths[i]; 

這對我來說很完美。希望它能幫助別人!

+0

試了一下。沒有任何成功,但我認爲主插件從那時起就被更新了。 – foochow

+1

另外,我注意到我在使用Chrome時遇到了問題(夾點不對齊)。將我的表格寬度設置爲0(並且只使用單個列大小)解決了問題。 – prograhammer

+0

這仍然在最新版本,沒有不良副作用,我可以找到 – DelightedD0D