Как изменить цвет ячеек ag-grid для динамически изменяющихся данных

На самом деле я только что заработал. Вам нужен атрибут cellClassRules для каждого столбца, цвет которого вы хотите изменить. Что-то вроде:

{headerName: "header", field:"field",suppressMenu: true, volatile: true, suppressMovable: true, cellClassRules: {'bold-and-red': 'x>1'} }

Здесь «x» в правиле - это значение столбца. Кроме того, вам необходимо пометить свой столбец как voaltile: true.
Для динамического изменения изменчивых полей вам понадобится api.softRefreshView() во время обновления данных.
Класс css, выделенный жирным и красным, может быть определен в ваш файл HTML, например: .bold-and-red {color: darkred; font-weight: жирный; }

Вот фрагмент кода, в котором вы можете изменить цвет текста ячейки сетки ag и цвет фона.

 var colDef = {
            name: 'Dynamic Styles',
            field' 'dummyfield',
            cellStyle: function(params) {
                if (params.node.value=='Police') {
        //Here you can check the value and based on that you can change the color
                    //mark police cells as red
                    return {color: 'red', backgroundColor: 'green'};
                } else {
                    return null;
                }
            }
        }

То, что вы написали, в основном правильно:

function compareValues(params) {
if (params.oldValue > params.newValue){ 
return {color: 'green', backgroundColor: 'black'};
console.log(params.newValue);

}
if (params.oldValue < params.newValue){ 
return {color: 'red', backgroundColor: 'black'};
}

И информация, которую Джарод Мозер дал вам об объекте params для этого обратного вызова, точна и важна.

Проблема в том, что вы пытаетесь return {style}, но не можете этого сделать. Вам необходимо иметь доступ к элементу html (содержащему <div>) и установить для него класс (с определением класса с желаемым стилем). Я сделал это в ag-grid, где у меня есть доступ к params.eGridCell, но в этом конкретном обратном вызове eGridCell недоступен. Если я найду хороший способ добраться до <div>, я отредактирую этот пост, используя то, что я нашел.

ИЗМЕНИТЬ - Дополнительная информация

Я не думаю, что буду использовать newValueHandler для того, что вы пытаетесь сделать.

Вы не говорите, как вы обновляете данные, но вы говорите, что они, возможно, обновляются каждые 5 секунд.

Однако вы решаете обновить ячейку, вы можете добавить к объекту rowData свойство origValue и перед обновлением значения ячейки установить текущее значение как origValue, а затем установить новое значение как value. THEN ... вы можете использовать свойство столбца cellClass, используя функцию обратного вызова, и сравнить новое значение с 'origValue' и вернуть желаемый стиль.

Примеры из документации:

// return class based on function
var colDef3 = {
    name: 'Function Returns String',
    field' 'field3',
    cellClass: function(params) { return (params.value==='something'?'my-class-1':'my-class-2'); }
}


// return array of classes based on function
var colDef4 = {
    name: 'Function Returns Array',
    field' 'field4',
    cellClass: function(params) { return ['my-class-1','my-class-2']; }
}

Объект params для cellClass имеет доступ к данным строки и может сравнивать новое и исходное значения.

Когда вы начнете копать, у вас будет много вариантов. Выбирайте то, что считаете лучшим.

Похоже, вы сможете использовать newValueHandler который является атрибутом каждого столбца.

Из документов:

Если вы хотите использовать простое редактирование текста, но хотите каким-то образом отформатировать результат перед вставкой в ​​строку, вы можете предоставить столбцу newValueHandler. Это позволит вам добавить к значению дополнительную проверку или диалог.

newValueHandler предоставляется объект params с атрибутами:

• узел: рассматриваемый узел сетки.
• data: данные строки, о которых идет речь.
• oldValue: если «поле» находится в определении столбца, содержит значение в данных до редактирования.
• newValue: строковое значение, введенное в редактор по умолчанию.
• rowIndex: индекс виртуализированной строки.
• colDef: определение столбца.
• context: контекст, установленный в gridOptions. api: ссылка на ag-Grid API.

Так что что-то вроде:

var colDefs = [{
    header: 'comparing to previous val'
    newValueHandler: compareValues
}]

function compareValues(params){
    if (params.oldValue > params.newValue){ //make it red}
    if (params.oldValue < params.newValue){ //make it green}
}