时间戳

首页 > 解决方案 > 数据更改时如何在制表器中突出显示单个单元格

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

问题描述

我正在尝试使用 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 值的变化，那么前进会简单得多，因为会有一些处理服务器端使用我当前的方法实际找到更改的数据 - 特别是行号和列名......

更新： 摆弄我想要实现的目标。

标签： jquerytabulator

解决方案

我已经设法使用以下代码解决了这个问题。定时器中的计数器在完全实现后会被替换为更长的时间间隔和数据库的一次查询，显然没有必要实现改变数据的高亮。注意：制表器版本 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);

更新： 摆弄我想要实现的目标。

推荐阅读