如何设置HandOnTable中每个单元格的背景颜色？

问题描述：

我有一个HandsOnTable表，想设置每个单元的背景颜色，而不提供渲染函数等。我试图复制它们的Science demo使用的过程，但我的表格对这些值进行了格式设置，并且它们的渲染函数代码会丢失。如何设置HandOnTable中每个单元格的背景颜色？

我的渲染器的版本：

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出现全歼已经通过该表的属性应用格式，当简单的东西比如改变单元的背景颜色是必需的。

可能使用香草js？ – levi

不知道如何识别我正在寻找的特定元素。 –

此外，这似乎没有记录：Handsontable.renderers.TextRenderer.apply –

答

有多种方法可以实现这一点。但是，细胞功能可能是最好的。

选项1

第1步：设置您的handsontable：

var container = document.getElementById('Element_ID'); 
hot = new Handsontable(container, { 
    data: <yourdataArray>, 
    autoRowSize:false, 
    autoWrapRow:true, 
    autoRowSize: false 
});

第2步：更新使用细胞功能handsontable设置。细胞功能将通过每一行和单元表中的

// 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.

如何设置HandOnTable中每个单元格的背景颜色？

相关推荐