Column width with colResizable plugin

问题

colResizable appears to be a great plugin for adjustable column widths.

Unfortunately, it removes the widths which were set originally. I was using whitespace: nowrap since I'm having some tiny columns and some larger ones. Now with the colResizable plugin all columns are adjusted to the same size.

I tried to work around by reading the col widths before the plugin takes advantage, and resetting them afterwards. At first it looks good, but then some strange things with the grips happen. The grips stay of course where they've been with the same-sized columns.

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

Can anyone think of a better solution?

回答1:

After studying the source from github, I found a better way.

The table's layout is changed first when the table is assigned the SIGNATURE class which includes table-layout: fixed; Just before that, I'm pushing the original column widths into a new array. This array is passed to the createGrips function.

/* init function */
// ...

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

// t.addClass(SIGNATURE) ...

createGrips(t, originalColumnWidths);

When looping through the columns in the createGrips function, I'm assigning the value from the array to the new jQuery wrapped column object instead of the current column width.

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

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

That works for me perfectly. Hope it can help someone!

来源：https://stackoverflow.com/questions/19319358/column-width-with-colresizable-plugin

标签

jquery

jquery-resizable