在该单元格上使用after change回调后，可以更改表格中单元格的颜色吗？

Question

这是我尝试过的代码，当输入的新值的大小大于6位时，可以更改单元格的颜色吗？

var hot = new Handsontable(example1, {
data: data,
colHeaders: true,
rowHeaders: true,
contextMenu: true,
columns: [{},
                    {type : 'numeric', format: '0,0'},
                    {type : 'numeric', format: '0,0'},
                    {type : 'numeric', format: '0,0'}],
hiddenRows: {
  rows: [3, 5, 9],
  indicators: true
}
});

var logicalErrorsRenderer = function(instance, td, row, col, prop, value,    cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.background = 'red';
};

var rowsWithErrorData = [];
hot.updateSettings({
afterChange: function(changes, source){
        console.log(source);
    if(source === "edit")
        console.log(changes);
    var row = changes[0][0];
    var columnN = changes[0][1];
    var oldValue = changes[0][2];
    var newValue = changes[0][3];
    var lengthofNewValue = newValue.toString().length;
    console.log("length of changed Value"+ lengthofNewValue );
    console.log("lets think A column  is fixed or text field like in our case");
    if(columnN >= 1){
        if(isNaN(newValue) && lengthofNewValue >= 6){//**here I want to change the color of this particular cell**
       renderer: logicalErrorsRenderer
      }
    }
    console.log("In after changes methods" + hot.getDataAtRow(row));
    console.log(rowsWithErrorData);
   }
   }) 

在这里，我使用动手操作表在“ Change之后”进行回调，并进行一些验证（例如值是否为数字），然后将有错误的行推入错误中，我想突出显示没有错误的单元格用红色满足这些约束。

Answer 1

查看handsontable 单元样式文档，建议用一个小jquery代替您的js样式行：

td.style.background = 'red';

使用如下的jquery行：

$('.ht_master').find(td).css({ background: 'white' }); // reset all cells
$('.ht_master tr').eq(row).find('td').eq(td).css({ background: 'red' }); // find and set the appropriate cell

您可能需要在td和row加上或减去，然后再将变量传递到上方以到达正确的单元格。 这是为了自动化等效的CSS选择器方法，如文档中所述：

.ht_master tr:nth-child(2) > td:nth-child(3) {
  background-color: #F00;
}

Answer 2

是的，我们可以通过使用beforeValidate回调表容器上的指针

          beforeValidate: function(val, row, prop){
            console.log(prop);
            if((prop) === "employeeCount"){ //All Employees count length should not exceed 7
                if(isNaN(val) || val.toString().length > 7 || val < 0){
                    return 'invalid'
                }else {
                    return 0
                };
            }