Как выделить одну ячейку в Tabulator при изменении данных - PullRequest
Новая
       31

Как выделить одну ячейку в Tabulator при изменении данных

0 голосов
/ 20 мая 2019

Я пытаюсь использовать функцию jQuery .effect () для выделения изменений в моих данных табулятора при их обновлении с сервера.

Я все еще использую 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, было бы намного проще двигаться вперед, так как будет некоторая сторона сервера обработки, чтобы на самом деле найти измененные данные, используя мой текущий подход - в частности, номер строки и имя столбца ...

ОБНОВЛЕНИЕ: Скрипка того, что я пытался достичь.

1 Ответ

0 голосов
/ 21 мая 2019

Мне удалось решить проблему, используя следующий код.Счетчик в таймере будет заменен более длинным интервалом и запросом базы данных, когда он будет полностью реализован, и, очевидно, нет необходимости в выделении измененных данных.ПРИМЕЧАНИЕ: версия табулятора 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);

ОБНОВЛЕНИЕ: Скрипка того, что я пытался достичь.

...