使用colResizable插件的列宽

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: "
", 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 cw = c.width(); // with the following cw = originalColumnWidths[i]; 

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