Question

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

我知道有许多精彩的剧本都带有所有的花里胡哨，但我需要我自己的特定功能，CSS风格，以及在其中使用我自己的ui控件的能力。

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

我在想一个可能的解决办法就是让每一列都成为div。

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

Answer 1

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

具体的想法是：

HTML表格指定其COLGROUP区域的初始宽度，并具有CSS属性table-layout：fixed。
使用jQuery UI的.resizable（）。
在调整大小开始时：找到活动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

Answer 2

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

可调整大小的表列

2 个答案: