HandsOnTableのすべてのセルの背景色を設定するには？

Question

私は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でレンダラー機能を使用するには、テーブルの性質によって適用されたフォーマット、シンプルなものを一掃するように見えるということですセルの背景色を変更するようなことが必要です。

Answer 1

これを達成するにはさまざまな方法があります。しかし、細胞の機能はおそらく最高です。

オプション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.