10

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

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

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

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

有没有可以帮助我的教程？

4

2 回答 2

8

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

具体的想法是：

  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

于 2012-08-08T09:57:07.147 回答
2

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

于 2011-08-01T12:33:48.603 回答