可调整大小的表格列答案

【问题标题】：Resizable table columns可调整大小的表格列
【发布时间】：2010-10-19 13:46:53
【问题描述】：

我正在开发一个网络应用程序，并且正在寻找一种方法来创建我自己的数据网格。

我知道那里有很多很棒的脚本，其中包含所有的花里胡哨，但我需要我自己的特定功能、css 样式以及在其中使用我自己的 ui 控件的能力。

真的，我唯一需要的是能够调整列的大小。我真的不在乎标记是否不维护行结构或不语义，因为所有数据都将由 ajax 请求填充。

我在想一个可能的解决方案是让每一列成为一个 div。

那里有可以帮助我的教程吗？

【问题讨论】：

标签： javascript resizable

【解决方案1】：

我建议使用带有一些增强功能的jQuery UI Resizable。该插件只专注于调整大小并启用完全自定义，因为您可以随时添加自己的回调函数。然而，默认情况下，插件无法重新调整表头，但我可以让它使用有效的 HTML 运行，在调整大小时更新表的 COLGROUP 区域。

具体的想法是：

HTML 表格在其 COLGROUP 区域中指定初始宽度，并具有 CSS 属性 table-layout:fixed。
使用 jQuery UI 的 .resizable() 装饰 TH 元素。
在开始调整大小时：找到活动 TH 的匹配 COL 元素并记住原始宽度。
在调整大小时：计算调整大小增量并更新（增加/减少）选定的 COL 元素。这将在每个浏览器中调整整个列的大小。

插件初始化：

$(".resizable th").resizable({
 handles: "e",

 // set correct COL element and original size
 start: function(event, ui) {
   var colIndex = ui.helper.index() + 1;
   colElement = table.find("colgroup > col:nth-child(" +
   colIndex + ")");

   // get col width (faster than .width() on IE)
   colWidth = parseInt(colElement.get(0).style.width, 10);
   originalSize = ui.size.width;
 },

 // set COL width
 resize: function(event, ui) {
   var resizeDelta = ui.size.width - originalSize;

   var newColWidth = colWidth + resizeDelta;
   colElement.width(newColWidth);

   // height must be set in order to prevent IE9 to set wrong height
   $(this).css("height", "auto");
 }
});

我在http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/描述了完整的解决方案，包括 JavaScript、HTML 标记、跨浏览器 CSS 和 Live-Demo

【讨论】：

【解决方案2】：

不是一个真正的教程，而是一个非常简单的示例，您可以使用：http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

【讨论】：