从javascript隐藏handsontable的列

Posted 2023-03-22

【中文标题】从javascript隐藏handsontable的列

【英文标题】：Hiding columns of handsontable from javascript

【发布时间】：2015-02-28 18:34:30

【问题描述】：

有什么方法可以隐藏 javascript 中的 HOT 列？ 要求是要隐藏的列将作为 javascript 中的参数出现，并基于相应的列将相应地显示隐藏。

HOT 有 rowHeaders 和 colHeaders 以及 20 列的数据。

请指教。

【问题讨论】：

哇。请稍微澄清一下这个问题，您寻求帮助的意义不大。也许给我们一个 jsfiddle。

其实我有一个 10 列的 HOT。现在的要求是，用户可能只想看到他/她选择的 6 列，其余的他将能够隐藏。因此，系统应该能够通过 HOT 上的 javascript 即时隐藏这 4 列。是不是这种要求可以在handsontable中实现。这就是我要找的……请指教。

一旦他隐藏了它们会发生什么？他是如何隐藏它们的？他能把他们带回来吗？为什么不从数据对象中完全删除列？

不可能完全删除它，因为 HOT.getData() 需要拥有所有列信息（可见或不可见）。所以列隐藏是我环顾四周的动作。用户可以根据自己的选择隐藏或显示列。

【参考方案1】：

过时的解决方案

好的，我找到了一个可能的解决方案。我在自己的系统上进行了测试，但实际上非常简单。

您应该在columns 选项中使用customRenderer。如果您还没有，请阅读此内容。这个想法是你给每个单元格自己的渲染器。在这个自定义函数中，您可以执行以下操作：

var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns

function getCustomRenderer() 
  return function(instance, td, row, col, prop, value, cellProperties) 
    if (colsToHide.indexOf(col) > -1) 
      td.hidden = true;
     else 
      td.hidden = false;
    
  

此渲染器所做的是隐藏 var colsToHide 指定的单元格。您现在要做的就是添加一个 DOM 元素，让用户选择哪个元素，因此每次呈现表格时（这基本上发生在任何更改之后，或者需要手动触发），指定列中的单元格将被隐藏，保持data 数组完好如你所述。当不在colsToHide 中时，它们会重新渲染，因此请确保您也能正常工作。

在这里，我用非常基本的功能实现了它。只需在输入字段中输入列的索引，然后观看奇迹发生。

http://jsfiddle.net/zekedroid/LkLkd405/2/

更好的解决方案：handsontable: hide some columns without changing data array/object

【讨论】：

这里有一个改进的版本：***.com/questions/28793529/…

正确，我在那边更新了，这里也是。隐藏 td 不如更新columns 定义的技术。

我有一个表，它的 headers 和 stretchall 属性设置为 true。我正在使用渲染器函数隐藏特定的 col，但无论如何都可以隐藏 col 标题而不占用空间

这很难，我会​​告诉你的。而且很乱。我肯定会使用新方法，而不是渲染器方法。

在这里***.com/questions/28793529/…它在“新技术”下