javascript - 如何更改 FixedTableHeader jQuery 插件以使其也具有固定的第一列？

Question

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

无论如何，我的老板希望我创建的表格的第一列是固定的，这样他们就可以在 x 轴上滚动，但仍能看到第一列。我如何修改此插件以提供此功能？

非常感谢任何帮助

谢谢

编辑:

我尝试添加:

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

和“固定”一样，但它似乎比这个简单的解决方案更复杂......

这样做确实有效果，就是没那么讨喜。进行此更改会导致它在左侧保持静止，但我无法真正向下滚动，而且 th 似乎真的不起作用。

编辑 2:

我已经开始实现下面给出的解决方案，尽管我对自己修改此插件的能力并不完全有信心。无论如何，这是当前的修补状态:

我会继续更新的...

我收到一条错误消息，提示 this.offset.top 为 null 或不是一个对象...等等，

这段代码在文档中。准备好的东西:

         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 并将它们的内容复制到与 TDs 重叠的相同大小的 div 中。这些 div 可以让您正确定位它们。

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

伪代码:

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