可调整大小的表列

时间:2010-10-19 13:46:54

标签: javascript resizable

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

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

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

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

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

2 个答案:

答案 0 :(得分:8)

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

具体的想法是:

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

    $(".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

答案 1 :(得分:2)

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