Могу ли я изменить цвет ячейки в руках на столе после использования обратного вызова после изменения в этой ячейке?

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); 
    } 
    }) 

Здесь я использую руки на стол обратного вызова «после изменения» и делать некоторые валидаций как если значение является числом или нет, и толкая те строки, которые имеют ошибки в ошибку, и я хочу высокие свет, который клетка не удовлетворяет этим ограничениям красным цветом.

Answer 1

глядя на handsontable cell styling документации, предложить подставляя немного 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 
       }; 
      }