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步：设置你的动手：

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

步骤2：使用细胞功能更新指板设置。单元格函数将遍历表格中的每一行和单元格

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

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

1 个答案: