如何設置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出現全殲已經通過該表的屬性應用格式，當簡單的東西比如改變單元的背景顏色是必需的。

來源

2017-02-20 Matt W

可能使用香草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.

來源

2017-06-22 03:51:48

如何設置HandOnTable中每個單元格的背景顏色？

回答

相關問題