我怎样才能改变 FixedTableHeader jQuery 插件也有一个固定的第一列
How can I alter the FixedTableHeader jQuery plugin to have a fixed first column as well?
我正在使用这里的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库。 但是,有一些用于固定列和标题的库。 我使用的一个是固定表,它允许您设置左列以及要修复的标题。 希望这对你有帮助
相关文章:
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- JQuery是否有一个“;移动“;作用或者有没有一种更紧凑的方法来做到这一点
- 我怎么能有一个实时计时器,在3秒的循环内每秒钟更新一次
- jqGrid有条件地创建一列
- 我怎样才能改变 FixedTableHeader jQuery 插件也有一个固定的第一列
- jQuery,在我有一个图像的宽度后只继续脚本一次
- 一次只能有一个活动类和可见 Div
- jQuery Tools 可滚动:屏幕上有 3 个项目,但一次滚动一个
- 我有一个带有选择的表单,可以创建元素.我怎么能做到这一点元素只创建一次
- 有没有办法在不使用循环的情况下更新多个文档以将特定数字添加到一列
- 我在变量中有一个日期格式.如何将该变量日期转换为另一种格式
- 如何获取一列中有多少单元格具有数据的值
- 如何通过输入类型在一列中选择一个相同名称的值,然后提交按钮
- 如何在slickgrid中有一个静态索引列
- Knob.js-有没有一种方法可以连接表盘,使它们有一个组合的总数
- 是否有一种方法来放置一个树列在一个组合框
- 在AngularJS中对动态表的每一列应用一个过滤器
- 如何使一个网格布局与未知数量的列,每一列有相同的大小
- 我如何从数组的每一列得到一个随机值
- 如何在不使用固定大小的情况下创建两列(一列有两行,另一列有一行)