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，以便第二列的列边框看起来不完整

Answer 2

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

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

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

新技术：

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

如果这种新方法适合您，请告诉我。

Answer 3

对于隐藏标题列，您可以使用afterGetColHeader回调函数并隐藏它。在我的情况下，我已将列名称存储为隐藏的单独数组并使用indexOf函数

进行检查

 afterGetColHeader:function(col,th){
                                    currentCoulmn = data.headers[col];
                                    if(hiddenColumns.indexOf(currentCoulmn.fieldName) > -1 ){
                                        th.style.display='none';
                                    }

                                },

Answer 4

for-of

我使用了hook来删除我需要的头文件。我在HandsonTable中尝试了同样的功能，但它没有用，所以我尝试使用addHook，并且像魅力一样工作。

afterGetColHeader：这是一个在调用标题时呈现的函数。

RemoveUnWantedHeader：这是我自己的回调。您可以拥有自己的条件并可以删除。

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

4 个答案: