colResizableプラグインを使用した列幅

Question

colResizableは、調整可能な列幅用の優れたプラグインのようです。

残念ながら、元々設定されていた幅は削除されます。私はいくつかの小さな列といくつかの大きな列を持っているので、私はwhitespace: nowrapを使っていました。 colResizableプラグインを使用すると、すべての列が同じサイズに調整されます。

プラグインが有効になる前に、col幅を読み取って後でリセットすることで回避しようとしました。まずそれは良いように見えますが、グリップのある奇妙なことが起こります。グリップはもちろん、同じサイズの列を使っていた場所にとどまります。

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" }); 
} 

もっと良い解決方法をお考えですか？

Answer 1

ソースをgithubから勉強した後、私はより良い方法を見つけました。

を含むSIGNATUREクラスがテーブルに割り当てられているときに、テーブルのレイアウトが最初に変更されます。その直前に、元の列幅を新しい配列にプッシュします。この配列はcreateGrips関数に渡されます。

createGrips関数の列をループするとき、私はアレイから新しいjQueryのに値を代入してい

/* init function */ 
// ... 

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

// t.addClass(SIGNATURE) ... 

createGrips(t, originalColumnWidths); 

ではなく、現在の列の幅の列オブジェクトを包みました。

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

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

これは私にとって完璧に機能します。誰かを助けることができることを願って！