5

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

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

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 回答