5

colResizable は、列幅を調整するための優れたプラグインのようです。

残念ながら、元々設定されていた幅が削除されます。私は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" });
}

誰でもより良い解決策を考えることができますか?

4

1 に答える 1

7

githubからソースを調べた後、より良い方法を見つけました。

テーブルに SIGNATURE クラスが割り当てられると、最初にテーブルのレイアウトが変更されます。table-layout: fixed; その直前に、元の列幅を新しい配列にプッシュしています。この配列は 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];

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

于 2013-10-11T14:44:19.990 に答える