Question

我正尝试使用jQuery .effect（）函数突出显示从服务器刷新的Tabulator数据中的更改。

我仍在使用Tabulator 3.5，因此认为jQuery .effect（）是最简单的方法。只要获得期望的结果，就不必强制使用。

我尝试在表中设置一个简单的计数器，该表中的值随其变化而突出显示（尚无ajax），但只能使整个行，列或行和列突出显示，而不能该单元格。

var i = 1;
var timer = setInterval(function(){
    if(i<=5){
        var id = 12345;
        var row = $("#live-table").tabulator("getRow", id);

        // Manually updated for now - from ajax later
        $("#live-table").tabulator("updateData", [{playerId:id, blah:i}]);

        // Successfully highlights the col on value change
        $("#live-table .tabulator-cell[tabulator-field=blah]").effect( "highlight",{color: '#329cff'},3000);
        // Successfully highlights the row on value change
        $("#live-table .tabulator-row:nth-child(1)").effect( "highlight",{color: '#329cff'},3000);

        i++;
    }else{
        clearInterval(timer);
        console.log("cleared");
    }
}, 3000);

我尝试将两行组合成一个具有不同语法的.effect（），以仅突出显示单元格，但这并没有成功。

我已经在文档中搜索了我可以使用的回调（例如dataEdited等），但目前还找不到。如果有可用的东西检测到CELL值的变化，则将更加简单，因为将有一些处理服务器端使用我当前的方法来实际查找更改的数据-特别是行号和列名... < / p>

更新：Fiddle是我试图实现的目标。

Answer 1

我已经使用以下代码设法解决了该问题。计时器中的计数器在完全实现后将被更长的时间间隔和对数据库的查询所代替，并且显然不需要突出显示已更改的数据。注意：制表器版本3.5 ...

var i = 1;
var timer = setInterval(function(){
    if(i<=5){
        var id = 12345;
        var row = $("#live-table").tabulator("getRow", id);
        var cell = row.getCell("blah");
        // Manually updated for now - from ajax DB query later
        $("#live-table").tabulator("updateData", [{playerId:id, blah:i}]);
        cell.getElement().effect( "highlight",{color: '#329cff'},3000);
        i++;
    }else{
        clearInterval(timer);
    }
}, 3000);

更新：Fiddle是我试图实现的目标。

Answer 2

您还可以在制表符回调中使用此简单方法。更新数据后，在特定单元格上调用触发函数以访问cellEdited（）：

JavaScript

cellEdited:function(cell){             
cell.getElement().style.color= "#ffffff";              //CHANGE CELL WHITE FONT
cell.getElement().style.backgroundColor = "#e68a00";   //CHANGE CELL GOLD COLOR
}

数据更改时如何在制表器中突出显示单个单元格

2 个答案: