Question

我有一个HTML表，可以由用户自定义：

每一行都有一个checkbox（淘汰赛界限，用户可以覆盖，如果该行是＆＃34;包含＆＃34;或者不是）。
标题列还有复选框（敲除绑定），用于指示特定行是否影响包含计算。
有些专栏甚至还有淘汰限制的弹出窗口控件，这些更加自定义的过滤。
用户可以配置列数，因此可能会有很多列不适合屏幕=＆gt;水平滚动条。
可能有很多行需要垂直滚动条。

因为5我们需要固定标头。因为4我们需要固定的前导列（在我的情况下前3个）。

到目前为止，我尝试了各种用于固定标头的jQuery插件，但ko绑定似乎不起作用。这些插件会生成标题的副本，并在用户滚动时浮动该div将其锚定在标题区域上。

我最终将标题和正文分成两个单独的表格。

我可以这样做，因为我们最终设置了宽度像素，因此列在标题和正文表上相互对齐。

这解决了固定的标题问题，但它使得固定列问题更加不可行：现在如果有一个水平滚动条，标题部分是分离的，我必须同步任何滚动条移动的身体桌子朝向标头桌。

现在，我重新构建了标题单元格中的内容，使其更紧凑，减少了使用水平滚动条的机会。

我想知道是否有任何淘汰赛兼容解决方案？

对于沿着这条道路走下去的人来说，有一个很大的警告（在固定列或固定标题中有数据绑定控件）。所有固定列或固定标头解决方案（甚至不是DataTables解决方案）都克隆了固定列或固定标头区域的精确副本。一旦你开始滚动，该副本就固定在那个位置，并且基本上没有滚动，这就是如何实现效果。如果在这些固定区域中有一些带有唯一HTML ID的输入元素，那么当复制这些输入时，HTML代码将变得无效：HTML ID不再是唯一的，每个元素都会有一个克隆。您可以继续通过DOM操作来修复这种情况，非常小心您处理哪个元素以及何时完成数据绑定（Knockout，Angular等）。

Answer 1

据我所知，你的真正问题在于有一个固定列的表格被绑定了。

您可以将DataTables plugin与FixedColumns plugin一起使用。

我为你做了一个小例子：

ko.bindingHandlers.dataTable = {
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        $(el).DataTable(ko.toJS(valueAccessor()));
    }
}

ko.bindingHandlers.fixedColumns = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        if ($.fn.dataTable.fnIsDataTable($(el))) {
           $(el).data("fixedColumns", 
                      new $.fn.dataTable.FixedColumns($(el).dataTable(), 
                                                      ko.toJS(valueAccessor())));
        }
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var fc = $(el).data("fixedColumns");
        if (fc) {
            $.extend(fc.s, ko.toJS(valueAccessor()));
            fc.fnRedrawLayout();
        }
    }
}

带有固定标题和固定前导列的HTML表格，标题和第一列中包含挖空控件

1 个答案:

Demo