如何将 CSS 样式添加到 Handsontable 单元格标题？答案

【问题标题】：How to add CSS Style to Handsontable cell header?如何将 CSS 样式添加到 Handsontable 单元格标题？
【发布时间】：2015-10-24 23:58:57
【问题描述】：

我想将一些样式类添加到可操作的单元格标题 (colHeaders)。我正在使用自定义渲染器在表格单元格上执行此操作，但是我不知道如何对单元格标题执行此操作。

我曾尝试使用 JQuery 在自定义渲染器中向适当的 colHeader 添加一个类，但这似乎不起作用。在 chrome 检查器中查看 th 的样式会显示一个空的样式属性。 handsontable 是否有另一种方法可以为类添加样式？我需要对选定的列标题而不是所有列标题执行此操作。

var container = document.getElementById('spreadsheet');
hot = new Handsontable(container, {
    data: null,
    startCols: columns.length,
    colHeaders: columns,
    minSpareRows: 100,
    rowHeaders: true,
    contextMenu: false,
    columnSorting: true,
    stretchH: 'all',
    cells: function (row, col, prop) {
        var cellProperties = {};
        cellProperties.renderer = hiddenCellRenderer;
        return cellProperties;
    }
});

function hiddenCellRenderer(instance, td, row, col, prop, value, cell) {
var modeColumns = getCurrentModeColumns();

//Check for a hidden field match, if so add the CSS value
if(modeColumns[col].hidden == '1') {
    $(td).addClass("hidden-cell");
    $(td).closest('table').find('th').eq(col).addClass("hidden-cell");
}

   return;
}

【问题讨论】：

getCurrentModeColumns(); 来自哪里？你确定modeColumns[col].hidden 是一个字符串吗？
getCurrentModeColumns 是另一个获取当前模式列的 JSON 数组的函数。这用于设置 colHeaders 中的文本以及是否应隐藏该列的数据。是的，这是一个字符串，因为它在第一个链接中起作用 $(td).addClass("hidden-cell");但是它永远不会在表头的第二行设置。
添加一些控制台日志来测试您的第二个 jquery 选择器：console.log($(td).closest('table')) ; //chcek table found console.log($(td).closest('table').find('th')); //Check you've found some th console.log($(td).closest('table').find('th').eq(col)); //check you've found the final target（确保重新格式化代码以分隔行！）这应该有助于您调试选择器。
添加了控制台日志记录，显示通过 JQuery 设置的属性，但是在设置它的第 th 元素中仍然有一个空的类标记。也许handsontable在代码设置后覆盖了th类属性？
您无法使用 jquery 更改标题上的任何内容，因为一旦您这样做或不久之后，Handson 将触发它的重新渲染事件，使您的更改消失

标签： jquery css handsontable

【解决方案1】：

渲染器仅适用于单元格，不适用于colHeaders 中定义的标题。现在，colHeaders 接受一个字符串数组，其中可以包含 HTML。最好的解决方案是在此处简单地设置您的 HTML。如果您需要更新这些标头，只需修改 colHeaders 数组中的字符串并执行以下操作：

hotInstance.updateSettings({
    colHeaders: modifiedColHeaders
})

【讨论】：