带有固定标题的HTML表格，并在标题和第一列中固定带有挖空控件的引导列 [英] HTML table with fixed header and fixed leading columns with knockout controls in the header and first column

问题描述

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

1. 每一行都有一个复选框（敲除界限，用户可以覆盖该行是否被包含）。 b $ b

2. 标题栏也有复选框（敲除界限），它表明特定的行是否影响包含计算。

列甚至有敲除限制的弹出控件，这些更加定制的过滤。


3. 列的数量可以由用户配置，所以可以有很多它们不适合屏幕=>水平滚动条。




4. 可以有很多行需要垂直滚动条。

>

由于5我们需要固定标题。
由于4，我们需要固定的主要列（在我的情况下是前3个）。

到目前为止，我尝试了各种jQuery插件来修正头部，但是ko绑定似乎不起作用。这些插件创建了头部的副本，并在用户滚动时将该头部锚定在头部区域上。

我最终将头部和身体分为两部分单独的表。

我可以这样做，因为我们最终设置了宽度像素，所以列和标题表中的列相互对齐。

解决了固定标题问题，但它使固定列问题变得更加不可行：现在，如果存在水平滚动条，标题部分已分离，必须将主体表的任何滚动条移动同步到标题表。

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

我想知道是否有兼容解决方案？

---

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

解决方案

据我所知，您的真正问题在于拥有固定列的表格， b

您可以将 DataTables插件与 FixedColumns插件。

我做了一个你的一个小例子：

  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（）; 
 
 
 
 code $ 
 $ h2> 演示  
I have a HTML table which can be customized by the user:

Every row has a checkbox (knockout bound, the user can override if the row is "included" or not).
The header columns have also checkboxes (knockout bound), which tell if the particular row affects the inclusion calculation.
Some columns even have knockout bound popup control, these even more customized filtering.
The number of columns can be configured by the user, so there can be so many that they don't fit the screen => horizontal scroll bar.
There can be so many rows that vertical scrollbar is needed.
Because of 5 we need fixed headers.
Because of 4 we'd need fixed leading columns (first 3 in my case).

So far I tried various jQuery plugins for fixed header, but ko bindings doesn't seem to work. These plugins make a copy of the header, and float that div anchoring it over the header area when the user scrolls.

I ended up splitting the header and the body into two separate tables.

I could do that because we ended up setting the width pixels anyway, so the columns align with each other on the header and the body table. 

That solved the fixed header problem, but it makes the fixed column problem even more infeasible: now that the header section is detached if there was a horizontal scrollbar, I'd have to synchronize any scroll bar move of the body table towards the header table.

Right now I restructured the content in the header cells to make it more compact and decrease the chance to have a horizontal scrollbar.

I wonder if there's any knockout compatible solution out there?



One big warning for anyone who is going down this road (having data bound controls in fixed columns or fixed headers). All fixed column or fixed header solutions (even not DataTables one) are cloning an exact copy of the fixed column or fixed header area. As soon as you start to scroll, that copy is fixed to that position and doesn't scroll away basically, that's how the effect is achieved. If you have some input elements with unique HTML ids in these fixed areas, the HTML code will become actually invalid when these inputs are replicated: the HTML ids won't be unique any more, there will be a clone of each element. You can go ahead and fix this situation by DOM manipulation, being very careful which element you treat and when does your data binding (Knockout, Angular, etc) exactly happen. 
解决方案
As I understand your real problem is with having a table with fixed columns bound to knockout.

You can use the DataTables plugin with the FixedColumns plugin.

I did a little example for you:
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();
        }
    }
}


Demo

                        
这篇关于带有固定标题的HTML表格，并在标题和第一列中固定带有挖空控件的引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！