如何修改FixedTableHeader jQuery插件以实现第一列固定？

Question

我正在使用这个jQuery插件 http://www.tablefixedheader.com/，它可以创建一个带有固定标题、排序和其他很酷的功能的漂亮表格。现在，我也看了一下jqGrid，它看起来非常棒，但是由于我们的数据源有些奇怪，我认为它还没有准备好与jqGrid很好地协作。

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

非常感谢任何帮助。

谢谢。

编辑：

我尝试添加：

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

除了"fixed"，但它似乎比这个简单的解决方案更加复杂...

这样做确实有影响，只是不那么令人愉悦。进行此更改会使其保持在左侧静态，但我无法向下滚动，并且th似乎并不起作用。

编辑2：

我已经开始实施下面给出的解决方案，尽管我并不完全自信能够调整此插件。无论如何，以下是 tinkering 的当前状态：

随着我的继续更新...

我得到了一个错误，说this.offset.top为空或不是对象...blah,

这段代码放在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');

目前陷入困境

- user114518

---

修改插件以实现您想要的功能将非常困难。 - Jeffery To

当你说非常困难时，你认为一位资深开发者需要多长时间？ - user114518

我相信要完全理解插件正在做什么，实现此功能以使其与其他所有内容兼容（分页、可排序列、可调整大小的列等），并使其在所有主要浏览器上工作，至少需要几天时间。 - Jeffery To

这是因为offset是一个返回位置对象的函数。尝试使用$(this).offset().top。 - SimplGy

Answer 1

有趣的问题。我认为你会发现表格单元格（TD）元素不会按照你想要的方式运作。需要做的事情可能是循环遍历所有td:first-child，并将它们的内容复制到相同大小的div中，这些div将让您正确地定位它们。

我认为你遇到了某些具有内在表格单元格行为限制的问题。

伪代码：

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

- SimplGy

---

尝试了你的解决方案，但目前为止失败了（请查看我的编辑以获取当前状态）。不过这个想法听起来很不错！ - user114518

@Silver，使用.offset存在问题。我在上面为您添加了一条注释。 - SimplGy

Answer 2

我知道你说你已经获取了用于固定标题的jQuery库。然而，还有一些库可以用于固定列和标题。我使用过的一个是Fixed Table，它允许您设置左侧列以及标题为固定。希望这能帮到你。

- bretterer

---

除了我喜欢这个插件已经允许的功能，比如排序之外，我已经尝试过在其基础上进行调整，以便根据特定行的值添加自定义行高亮等功能。 - user114518