我怎样才能改变 FixedTableHeader jQuery 插件也有一个固定的第一列

How can I alter the FixedTableHeader jQuery plugin to have a fixed first column as well?

本文关键字:一列 有一个 能改变 FixedTableHeader 插件 jQuery      更新时间:2023-09-26

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

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

任何帮助都非常感谢

谢谢

编辑:

我尝试添加:

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

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

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

编辑2:

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

我会继续更新...

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

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

目前卡住

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

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

伪代码:

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

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

相关文章: