5

我正在使用来自http://www.tablefixedheader.com/的 jQuery 插件来制作具有固定标题、排序和其他很酷功能的时髦表格。现在，我还查看了 jqGrid，它看起来非常棒，但是我们正在用我们的数据源做一些时髦的事情，我认为它还不能很好地与 jqGrid 一起使用。

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

任何帮助是极大的赞赏

谢谢

编辑：

我尝试添加：

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

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

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

编辑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');

目前卡住了

4

2 回答 2

2

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

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

伪代码：

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

我知道您说过您已经获得了固定标头的 jquery 库。然而，有一些用于固定列和标题的库。我使用的一个是固定表，它允许您设置左列以及要固定的标题。希望对你有帮助

于 2012-06-27T17:29:37.413 回答