如何在 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';
}
最佳答案
第三个选项是 Handsontable 有它自己的 th
CSS,您需要为单元格格式覆盖它。如果您想要更改单个标题,您可以像这样修改 CSS:
.handsontable th:nth-child(1){
background-color:aquamarine;
font-weight:bold;
}
columns
属性还在标题中采用 HTML,因此您可以添加 span
并在 CSS 中设置文本(但不是单元格)的样式。
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/
关于javascript - 如何在 Handsontable 中格式化列标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33173850/