如何更改FixedTableHeader jQuery插件以获得固定的第一列？

Question

我正在使用http://www.tablefixedheader.com/的jQuery插件制作一个带有固定标题,排序和其他很酷功能的时髦表.现在,我也看了jqGrid,它看起来非常棒,但我们正在用我们的数据源做一些时髦的事情,我认为它还没有准备好与jqGrid一起玩.

无论如何,我的老板希望我创建的表的第一列是固定的,因此它们可以在x轴上滚动,但仍然可以看到第一列.如何修改此插件以提供此功能？

任何帮助是极大的赞赏

谢谢

编辑:

我尝试添加:

th:first-child
{
    position        : relative; 
}
td:first-child
{
    position        : relative; 
}

除了"固定",但它似乎比这个简单的解决方案更复杂...

这样做确实有效果,它不是那么令人愉快.进行此更改会使其在左侧保持静态,但我无法真正向下滚动,并且这似乎不起作用.

编辑2:

我已经开始实现下面给出的解决方案了,尽管我对修补这个插件的能力并不完全有信心.无论如何,这是目前的修补状态:

我会继续更新......

我收到一个错误,说明this.offset.top为null或者不是对象......等等,

这段代码放在document.ready中:

         var currentTop = 0;
         var currentLeft = 0;
         var currentWidth = 0;
         var currentHeight = 0;
         var currentContent = "";
         var currentDiv = "";
         var currentID = "";
         $('td:first-child').each(function (index) {
             currentTop = $(this).offset.top;
             currentLeft = $(this).offset.left;
             currentWidth = $(this).width;
             currentHeight = $(this).height;
             currentContent = $(this).html();
             currentID = "fixed_column_cell" + index;
             currentDiv = "<div class=\"fixed_column_cells\" id=\"" + currentID + "\">" + currentContent + "</div>";
             $('body').append(currentDiv);
             $('#' + currentID).offset({ top: currentTop, left: currentLeft });
             $('#' + currentID).width(currentWidth);
             $('#' + currentID).width(currentHeight);
         });
         $('fixed_column_cells').css('position', 'fixed');

目前卡住了

Answer 1

有趣的问题。我认为您不会发现表格单元格 (TD) 元素会希望以这种方式运行。要做的事情可能是循环遍历所有 td:first-childs 并将其内容复制到与 TD 重叠的相同大小的 div 中。这些 div 可以让你正确定位它们。

我认为您遇到了固有表格单元格行为的限制。

伪代码：

• 对于第一列中的每个表格单元格
• 获取左上角位置
• 获取宽度和高度
• 在相同位置创建相同大小的新 div
• 将内容复制到新的 div 中
• 将 div 设置为固定 pos