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

您可以使用colWidths将特定列的宽度减小到0.1像素.从技术上讲,它仍然是表格的一部分,而.getData()返回列的数据,但对于人眼而言,它是不可见的.如果你有这么多的列,0.1像素列堆叠起来可见,你仍然可以在逗号后面添加更多的零来再次减少列:)

handsontable.updateSettings({
    colWidths: [0.1,0.1,50],
});

这个例子将"隐藏"前两个列并以50像素显示第三个列.

PS.要隐藏第一列,我建议宽度为1px,以便第二列的列边框看起来不完整