Question

我使用了以下自定义列呈现代码来隐藏指向性的列

function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  if (colsToHide.indexOf(col) > -1) {
    td.hidden = true;
  } else {
    td.hidden = false;
  }
}

但是当我设置colHeaders: true,时，列标题不会被隐藏。

http://jsfiddle.net/LkLkd405/91/

Answer 1

正确，您无法隐藏列标题，因为渲染独立于列渲染器发生。我将继续并假设您的endgoal是将数据放入您想要隐藏的data对象中，例如数据库ID。解决方案是使用columns定义。

如果您仔细阅读文档，则此选项允许您定义要显示的列。因此，例如，如果您有3列加上您的ID列，您将拥有：

var colHeaders = ['col1', 'col2', 'col3', 'ID'];

// assume `dataArray` is an aray you previously defined, with row Objects with 4 keys each, corresponding to the first 3 real data columns and the fourth as the ID.
columns: [{
    data: colHeaders[0],
    type: 'text'
},{
    data: colHeaders[1],
    type: 'text'
},{
    data: colHeaders[2],
    type: 'text'
}]

现在您甚至不需要自定义渲染器，因为该表将省略第四个值。

Answer 2

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';
    }
}

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

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

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

Reference: Handsontable Add Hooks

当我使用td.hidden = true时，无法隐藏动态列标题;细胞渲染

2 个答案: