我有一个 HandsOnTable 表,想设置每个单元格的背景颜色,而不提供渲染器函数等。我尝试复制他们的 Science demo 的过程使用,但我的表对值进行了格式化,并且它们的渲染器函数代码丢失了。
我的渲染器版本:
var footerRenderer = function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.backgroundColor = '#EEE';
td.style.textAlign = 'right';
}
需要澄清的是:这里的问题是,当需要更改单元格的背景颜色等简单操作时,将渲染器函数与 HandsOnTable 一起使用似乎会清除表格属性所应用的格式。
最佳答案
有多种方法可以实现此目的。不过,细胞功能可能是最好的。
选项 1
第 1 步:设置您的手持设备:
var container = document.getElementById('Element_ID');
hot = new Handsontable(container, {
data: <yourdataArray>,
autoRowSize:false,
autoWrapRow:true,
autoRowSize: false
});
第 2 步:使用单元格功能更新手动设置。 cells 函数将遍历表格中的每一行和单元格
// update spreadsheet setting
hot.updateSettings({
cells: function (row, col, prop) {
var cell = hot.getCell(row,col); // get the cell for the row and column
cell.style.backgroundColor = "#EEE"; // set the background color
}
});
选项 2
我建议细胞功能优于此,但这确实演示了做同样事情的其他方法。
var hot = new Handsontable(document.getElementById('example1'), options);
var rows=hot.countRows(); // get the count of the rows in the table
var cols=hot.countCols(); // get the count of the columns in the table.
for(var row=0; row<rows; row++){ // go through each row of the table
for(var col=0; col<cols; col++){ // go through each column of the row
var cell = hot.getCell(row,col);
cell.style.background = "#00FF90";
}
}
hot.render(); // ensure the table is refreshed.
关于javascript - 如何设置 HandsOnTable 中每个单元格的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42350523/