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的来源后，我发现了一种更好的方法。

在为表分配包含table-layout: fixed;的SIGNATURE类时，首先更改表的布局就在此之前，我将原始列宽推入新数组。此数组将传递给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];

这对我很有用。希望它可以帮助别人！

使用colResizable插件的列宽

1 个答案: