使用colResizable插件的列宽

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的源代码后,我发现了一种更好的方法.

在为表分配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];

这完全适合我.希望它可以帮助别人!