handontable:在不更改数据数组/对象的情况下隐藏某些列

handsontable: hide some columns without changing data array/object

本文关键字：情况下 对象 隐藏 数组 数据 handontable      更新时间：2023-09-26

我有一个数据要显示在网格中。我正在使用手持设备显示数据。每个第三列计算为前两列的差（例如，第三列渲染为第一列和第二列的总和；这是通过自定义渲染器获取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);

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

编辑：我已经按照@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');
};

这段代码确实隐藏/显示了列，但它不适用于头列。

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

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

这个例子将"隐藏"前两列，并用50像素显示第三列。

PS。为了隐藏第一列，我建议宽度为1px，这样第二列的列边界看起来就不会不完整。

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

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

要隐藏列标题，请使用jQuery查找要隐藏的<th>。一种方法是询问所有这些信息，然后对文本使用筛选函数，直到它与您想要的标题匹配。这是一个昂贵的O(n)解决方案，所以如果我是你，我会在脚本开始时做一次，保存一个从列索引到<th>的映射，然后完成它。

新技术：

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

让我知道这个新方法是否适合你。

对于隐藏头列，您可以使用afterGetColHeader回调函数并隐藏它。在我的情况下，我已经将要隐藏的列名存储在单独的数组中，并使用indexOf函数进行检查

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

hot.addHook('afterGetColHeader', RemoveUnWantedHeader); 
function RemoveUnWantedHeader(col, th) {
if (th.textContent == "A" || th.textContent == "B" || th.textContent == "C" 
   || th.textContent == "D" || th.textContent == "E"
   || th.textContent == "F" || th.textContent == "G" || th.textContent == 
"H" 
   || th.textContent == "I" || th.textContent == "J"
   || th.textContent == "K" || th.textContent == "L" || th.textContent == 
"M" 
   || th.textContent == "N" || th.textContent == "O"
   || th.textContent == "P" || th.textContent == "Q" || th.textContent == 
"R" 
   || th.textContent == "S" || th.textContent == "T"
   || th.textContent == "U" || th.textContent == "V" || th.textContent == 
"W" 
   || th.textContent == "X" || th.textContent == "Y" || th.textContent == 
 "Z"
   || th.textContent == "AQ" || th.textContent == "AR" || th.textContent == 
"AS"
   || th.textContent == "AT" || th.textContent == "AU" || th.textContent == 
"AV" || th.textContent == "AW") {
    th.style.display = 'none';
 }
}

我已经用钩子删除了我需要的标题。我在HandsonTable中也尝试了同样的方法，但不起作用，所以我用addHook也尝试了一样的方法，效果很好。

afterGetColHeader：它是一个函数，在调用header时会被渲染。

RemoveUnWantedHeader：这是我自己的回调。你可以有自己的条件，也可以删除。

相关文章：