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

查看handontable 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
                };
            }

在使用该单元格上的更改后回调后，我可以更改桌面上单元格的颜色吗？

2 个答案: