制表单元格不在视图中时不会格式化/滚动到视图之外时会丢失格式

Question

我想突出显示表格中已编辑的单元格。它在大多数情况下都有效，直到大约 50 行标记，此时似乎没有应用任何格式更改。如果我将窗口向下滚动到表格底部，然后将其保留一段时间然后返回并向上滚动，那么以前具有突出显示背景的一些行也会丢失其格式。我希望突出显示的效果适用于表中的所有行，并持续到重新加载表为止。

我执行此操作的代码是：

var cellEditHighlight = function(cell){
    var cellInitialValue = cell.getInitialValue();
    var cellValue = cell.getValue();
    if (!(cellInitialValue == null && cellValue == "") && (cellValue != cellInitialValue)) {
        cell.getElement().style.backgroundColor = "#FFFF00";
    }
};
table.on("cellEdited", cellEditHighlight);

还有一个用于一次更新多行的表单。它的提交函数如下所示：

const inputValue = document.getElementById('itemNumberInput').value;
const rows = table.getSelectedRows();
rows.forEach(function(row) {
    if (row.getData().status != "Complete") {
        if (inputValue) { 
            row.update({"itemNumber":inputValue});
            cellEditHighlight(row.getCell("itemNumber")); //row.update does not trigger cellEdited event
        }
    }
}

Answer 1

发生这种情况是因为 Tabulator 使用虚拟 DOM，这意味着行在滚动时被创建和销毁，因此您的更改不会通过 UI 刷新而保留。

正确的方法是使用设置颜色的自定义格式化程序，当单元格值更新时，这将自动触发运行。

//define custom formatter
var customFormatter = function(cell){
    var cellValue  = cell.getValue();

    if (!(cellInitialValue == null && cellValue == "") && (cellValue != cellInitialValue)) {
        cell.getElement().style.backgroundColor = "#FFFF00";
    }else{
        //ensure you can remove the background if the value changes back to empty
        cell.getElement().style.backgroundColor = "";
    }
    
    // make sure you return the value of the cell for display
    return cellValue;
}

//use formatter in column definition for editable cell
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Example", field:"example", editor:"input", formatter:customFormatter}
    ]
});