可调整大小的表格列

Question

我正在开发一个Web应用程序，正在寻找一种创建自己的数据表格的方法。

我知道有很多功能齐全的脚本，但我需要自己特定的功能、CSS样式和使用自己的UI控件。

实际上，我唯一需要的就是能够调整列的大小。如果标记不维护行结构或不具有语义性也无所谓，因为所有数据都将由ajax请求填充。

我考虑的一个可能的解决方案是将每个列作为一个div。

是否有教程可以帮助我？

- cybermotron

Answer 1

我建议使用jQuery UI Resizable插件，并进行一些增强。该插件专注于调整大小，因此可以完全自定义，您可以在任何事件中添加自己的回调函数。但是，默认情况下，该插件无法调整表头，但我可以通过更新表格的COLGROUP区域来使其运行并产生有效HTML。

具体想法如下：

1. HTML表在其COLGROUP区域中指定了初始宽度，并具有CSS属性table-layout:fixed。
2. 使用jQuery UI的.resizable()装饰TH元素。
3. 开始调整大小时：查找活动TH的匹配COL元素并记住原始宽度。
4. 在调整大小时：计算调整大小的增量并更新（增加/减少）所选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。

- Ingo

Answer 2

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

- Josh - TechToolbox