可调整表格列的大小

Question

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

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

实际上，我唯一需要的是调整列大小的能力。我并不真正关心标记是否不维护行结构或者不是语义，因为所有数据都将由 ajax 请求填充。

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

有教程可以帮助我吗？

Answer 1

我建议使用 jQuery UI Ressized 并进行一些增强。该插件实际上只专注于调整大小并支持完全自定义，因为您可以在任何情况下添加自己的回调函数。然而，默认情况下，该插件无法调整表头的大小，但我可以使其使用有效的 HTML 运行，并在调整大小时更新表的 COLGROUP 区域。

具体的想法是：

1. HTML 表格在其 COLGROUP 区域中指定初始宽度，并具有 CSS 属性 table-layout:fixed。
2. 使用 jQuery UI 的 .ressized() 装饰 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");
 }
});

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