Ширина столбца с плагином colResizable

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

Кто-нибудь может придумать лучшее решение?

1 ответ

Решение

Изучив исходники из 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];

Это работает для меня отлично. Надеюсь, что это может помочь кому-то!

Другие вопросы по тегам