如何在数据更改时突出显示 Tabulator 中的单个单元格
How to highlight a single cell in Tabulator when data changes
我正在尝试使用 jQuery .effect() 函数来突出显示从服务器刷新的 Tabulator 数据中的更改。
我仍在使用 Tabulator 3.5,所以认为 jQuery .effect() 是最简单的方法。不强制使用,只要达到预期效果即可。
我尝试在 table 中设置一个简单的计数器,其中值在更改时突出显示(还没有 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 值的变化,那么接下来会简单得多,因为将有一些处理服务器端使用我当前的方法实际找到更改的数据 - 特别是行号和列名......
更新: Fiddle 我试图实现的目标。
我已经设法使用以下代码解决了这个问题。 timer中的counter在完全实现的时候会被一个更长的interval和一次数据库的query代替,显然不是实现changed data高亮的必要条件。注意:制表符版本 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 我试图实现的目标。
您也可以在制表符回调中使用这种简单的方法。更新数据后,在特定单元格上调用触发函数以访问 cellEdited():
Javascript
cellEdited:function(cell){
cell.getElement().style.color= "#ffffff"; //CHANGE CELL WHITE FONT
cell.getElement().style.backgroundColor = "#e68a00"; //CHANGE CELL GOLD COLOR
}
我正在尝试使用 jQuery .effect() 函数来突出显示从服务器刷新的 Tabulator 数据中的更改。
我仍在使用 Tabulator 3.5,所以认为 jQuery .effect() 是最简单的方法。不强制使用,只要达到预期效果即可。
我尝试在 table 中设置一个简单的计数器,其中值在更改时突出显示(还没有 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 值的变化,那么接下来会简单得多,因为将有一些处理服务器端使用我当前的方法实际找到更改的数据 - 特别是行号和列名......
更新: Fiddle 我试图实现的目标。
我已经设法使用以下代码解决了这个问题。 timer中的counter在完全实现的时候会被一个更长的interval和一次数据库的query代替,显然不是实现changed data高亮的必要条件。注意:制表符版本 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 我试图实现的目标。
您也可以在制表符回调中使用这种简单的方法。更新数据后,在特定单元格上调用触发函数以访问 cellEdited():
Javascript
cellEdited:function(cell){
cell.getElement().style.color= "#ffffff"; //CHANGE CELL WHITE FONT
cell.getElement().style.backgroundColor = "#e68a00"; //CHANGE CELL GOLD COLOR
}