Question

如何在handsontable中格式化列标题？

我有一个jsfiddle来证明我到目前为止所做的事情。我可以格式化第一行数据，将列标题更改为我的标题，但我似乎无法格式化列标题。

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

第三个选项是Handsontable有自己的th CSS，你需要覆盖它来进行单元格格式化。如果您想要更改单个标头，可以像这样修改CSS：

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

columns属性也会在标题中使用HTML，因此您可以在CSS中添加span并设置文本样式（但不是单元格）。

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/

Answer 2

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

.twitter-timeline {
    height: 350px !important;
}

你在这里看到的是他们添加了一个复选框和一些其他HTML节点。这是对标头的动态更改。如果您不关心动态部分，只需在其中定义带有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; } } Handsontable活动中添加活动。在这里，您将调用一个可以像这样更改标题的函数：

var headers = [＆＃39; First col＆＃39;，＆＃39; second col＆＃39;，＆＃39; Third col＆＃39;];

afterChange

通过此操作，您现在可以使用类名标记所有标题。然后，您可以直接将css添加到类中，并具有动态标头定义。希望这有帮助！

如何在Handsontable中格式化列标题？

2 个答案: