如何格式化Handsontable中的Headers列？

Question

如何在 handsontable 中格式化列 headers？

我有一个 jsfiddle 来展示我目前所拥有的。我可以格式化第一行数据，将列 headers 更改为我的标题，但我似乎无法格式化列 headers.

var secondData = [
  ["2008", -0.5, 2, 2.2, -7],
  ["2009", -0.1, 3, 4.2, -2.6],
  ["2010", 3, 2, -1, 1]
];

var secondHeader = [
  {title: "Year", type: 'text'},
  {title: "Kia", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "Nissan", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "Toyota", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "Honda", type: 'numeric', format: '0.0%', renderer: percentRenderer}
];

$("#headerGrid").handsontable({
  data: secondData,
  columns: secondHeader,
  minSpareCols: 0,
  minSpareRows: 0,
  rowHeaders: false,
  colHeaders: true,
  contextMenu: true,
  cells: function (row, col, prop) {
    var cellProperties = {};
    if (row === 0) {
      cellProperties.renderer = firstRowRenderer; 
    }
    return cellProperties;
  }
});

function percentRenderer (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments);
  td.style.color = (value < 0) ? 'red' : 'green';
};

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.fontWeight = 'bold';
  td.style.color = 'green';
  td.style.background = '#CEC';
}

Answer 1

目前，不幸的是，自定义渲染器不适用于 headers。相反，您可以做以下两件事之一。第一个在文档中显示为在 header 中呈现 HTMl 的示例：

colHeaders: function(col) {
    var txt;

    switch (col) {
        case 0:
            return '<b>Bold</b> and <em>Beautiful</em>';

        case 1:
            txt = "Some <input type='checkbox' class='checker' ";
            txt += isChecked ? 'checked="checked"' : '';
            txt += "> checkbox";

            return txt;
    }
}

您在这里看到的是他们添加了一个复选框和一些其他 HTML 节点。这是针对 header 的动态更改。如果你不关心动态部分，你可以简单地定义你的 headers 和 HTML 并且它会正确呈现。

第二个选项，如果你确实想要动态改变 headers，就是像前面提到的那样静态地定义你的 headers，但是用一些事件更新它们。例如，假设您正在验证整个 table，当一个单元格变为红色时，您希望该列的 header 也变为红色。您要做的是在 afterChange Handsontable 事件中添加一个事件。在这里，您将调用一个函数来更改 header，如下所示：

var headers = ['First col', 'Second col', 'Third col'];

/**
 * A custom function that we created to dynamically update the content in the
 * header.
 * @param  {Array} cellsNotValidated    Array of column indeces not validated.
 */
function updateHeader(cellsNotValidated) {
    for (var i = 0; i <= headers.length - 1; i++) {
        // if i is in cellsNotValidated, it has to be red;
        var cellHeaderSelector = $(headers[i]);
        var cellNotValidated = cellsNotValidated.indexOf(i) >= 0;

        if (cellNotValidated) {
            headers[i] = cellHeaderSelector.addClass('notValidated');
        } else {
            headers[i] = cellHeaderSelector.removeClass('notValidated');
        }
    };

    // make sure to update your hot instance to trigger the re-render the grid
    hotInstance.updateSettings({
        colHeaders: headers
    });
}

有了这个，你现在所有的 header 都被标记上了 class 名字。然后，您可以将 css 直接添加到 class 并具有动态 header 定义。希望这对您有所帮助！

Answer 2

第三个选项是 Handsontable 有自己的 CSS th，您需要覆盖它以设置单元格格式。如果你想改变单个 header 你可以像这样修改 CSS:

.handsontable th:nth-child(1){
    background-color:aquamarine;
    font-weight:bold;
}

columns 属性也在标题中使用 HTML 因此您可以添加 span 并在 [=22 中设置文本（但不是单元格）的样式=].

var secondHeader = [
  {title: "Year", type: 'text'},
  {title: "Kia", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "<span class='headerBold'>Nissan</span>", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "Toyota", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "Honda", type: 'numeric', format: '0.0%', renderer: percentRenderer}

];

span.headerBold{
    font-weight:bold;
}

jsfiddle 已更新 http://jsfiddle.net/2z7kboc5/16/

如何格式化Handsontable中的Headers列？

How Do I Format The Column Headers In Handsontable?

javascript

handsontable