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

如何在handsontable中格式化列标题

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

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

var secondData=[
["2008", -0.5, 2, 2.2, -7],
["2009", -0.1, 3, 4.2, -2.6],
["2010", 3, 2, -1, 1]
];
var secondHeader=[
{标题：“年”，键入：“文本”}，
{标题：“Kia”，类型：“数值”，格式：“0.0%”，渲染器：percentRenderer}，
{标题：“日产”，类型：“数字”，格式：“0.0%”，渲染器：percentRenderer}，
{标题：“Toyota”，类型：'numeric'，格式：'0.0%'，渲染器：percentRenderer}，
{标题：“本田”，类型：“数字”，格式：“0.0%”，渲染器：percentRenderer}
];
$（“#headerGrid”）。可手持({
数据：第二数据，
列：第二个标题，
minSpareCols:0，
行数：0，
行标题：false，
colHeaders：是的，
上下文菜单：正确，
单元格：函数（行、列、属性）{
var cellProperties={}；
如果（行===0）{
cellProperties.renderer=firstRowRenderer；
}
归还财产；
}
});
函数百分比渲染器（实例、td、行、列、属性、值、单元格属性）{
Handsontable.renders.NumericRenderer.apply（这是参数）；
td.style.color=（值<0）？“红色”：绿色；
};
函数firstRowRenderer（实例、td、行、列、属性、值、cellProperties）{
Handsontable.renderers.textrender.apply（这是参数）；
td.style.fontwweight='bold'；
td.style.color='绿色'；
td.style.background='#CEC'；
}

不幸的是，目前自定义渲染器不适用于标题。相反，你可以做两件事中的一件。第一个在文档中显示为在标题中呈现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;
    }
}

---

这样，您就可以用类名标记所有标题了。然后，您可以将css直接添加到类中，并具有动态头定义。希望这有帮助

第三个选项是，Handsontable有自己的用于

th

的CSS，您需要为单元格格式覆盖该CSS。如果您想更改单个标题，可以修改CSS，如下所示：

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

columns

属性也在标题中使用HTML，因此您可以添加

span

并在CSS中设置文本（但不是单元格）的样式

var secondHeader=[
{标题：“年”，键入：“文本”}，
{标题：“Kia”，类型：“数值”，格式：“0.0%”，渲染器：percentRenderer}，
{标题：“日产”，类型：“数字”，格式：“0.0%”，渲染器：percentRenderer}，
{标题：“Toyota”，类型：'numeric'，格式：'0.0%'，渲染器：percentRenderer}，
{标题：“本田”，类型：“数字”，格式：“0.0%”，渲染器：percentRenderer}
];
斯潘·海德伯德{
字体大小：粗体；
}

JSFIDLE已经更新

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

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