handsontable：隐藏一些列而不更改数据数组/对象

Question

我有一个要在网格中显示的数据。我正在使用handsontable 来显示数据。每个第 3 列计算为前两列的差异（例如，第 3 列呈现为第 1 列和第 2 列的总和；这是由自定义渲染器完成的，采用 i-1 和 i-2 列的总和）。

这是我的“差异”列的自定义渲染器：

var val1 = instance.getDataAtCell(row, col - 1),
    val2 = instance.getDataAtCell(row, col - 2),
    args = arguments;
        args[5] = val2 - val1;
        if (args[5] !== 0) {
            $(td).addClass('grid-column-class-nonzero');
        }
        Handsontable.renderers.NumericRenderer.apply(this, args);

我需要一个“开关”。此开关将显示/隐藏列。如果开关打开，那么我需要显示所有列。如果开关关闭，我只需要显示包含差异的列。 那么，你能建议 - 如何隐藏 hansontable 中的列吗？

编辑：我已按照@ZekeDroid 的建议更新了我的代码。

 // on 'switch click' I modify colsToHide global array and do table re-render
 $('#my-id').handsontable('render');

这是我的自定义渲染器，用于应基于开关隐藏/显示的列：

var colsToHide = [];
var classModel1Renderer = function (instance, td, row, col, prop, value, cellProperties) {
    "use strict";
    if (colsToHide.indexOf(col) > -1) {
        td.hidden = true;
    } else {
        td.hidden = false;
    }

    Handsontable.renderers.TextRenderer.apply(this, arguments);
    $(td).addClass('grid-column-class-model1');
};

此代码确实隐藏/显示列，但它不适用于标题列。

Answer 1

是的，如果您已经在使用自定义渲染器，那么有一个简单的解决方案。我在this question here 中发布了解决方案。本质上，您可以拥有一个包含要隐藏的列索引的数组，并在自定义渲染器中（因为它会为表中的每个单元格调用）如果 col 是您想要隐藏的列，则执行 td.hide()。

在 IE 中检查后，事实证明这个解决方案仍然有效。如果有什么可以使用td.style.display = 'none' 和'auto' 隐藏/显示div。但问题不在于隐藏，而在于我为教学目的而快速编写的onkeydown 事件。我相信你可以自己弄清楚那部分，因为它超出了这个问题的范围。

要隐藏列标题，请使用 jQuery 找到要隐藏的 <th>。一种方法是询问所有这些，然后对文本使用过滤器功能，直到它与您想要的标题匹配。这是一个昂贵的O(n) 解决方案，所以如果我是你，我会在脚本开头执行一次，将列索引中的映射保存到<th>，然后再解决。

新技术：

查看this jsFiddle 了解更多信息。你是对的，这种方法很混乱而且效率不高，所以我编写了一些不那么混乱的代码，但仍然很笨拙。我们可以通过更新columns 选项来隐藏列，而不是更改渲染。如果您查看新代码，它现在所做的是更新列数组和列标题。这更接近于真正的列隐藏功能，唯一的挫折是它不会继续排序或重新排列行/列。如果这也是您的应用程序的要求，那么我会密切关注您在 git 项目中提出的问题，并希望最好:)

让我知道这种新方法是否适合您。