jquery - 使用 colResizable 插件调整列宽

Question

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

谁能想到更好的解决方案吗？

Answer 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];

这对我来说非常有用。希望它可以帮助别人!