如何更改動態更改數據的ag-grid單元格的顏色

我有一個從動態更改的數據加載的表格。它每5秒刷新一次。我使用本實施例中使用AG-網格爲它：https://www.ag-grid.com/javascript-grid-sorting/index.php 如何更改動態更改數據的ag-grid單元格的顏色

是否有可能改變其值有變化，比如假設一個小區值爲100，則變成（小於這即細胞的顏色< 100 ）所以使細胞紅色，id變得更大，使它變成綠色。我試圖用這個例子：https://www.ag-grid.com/javascript-grid-cell-styling/index.php

但我不明白如何做到這一點。

更新：我做這種方式，但它不改變顏色：

var columnDefs = [ 
    {headerName: "Arr Px Slippage", field: "total_wt_arr_slp", width: 100, newValueHandler: compareValues}, 
    {headerName: "IVWAP Slippage", field: "total_wt_ivwap_slp", width: 100} 


]; 

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'}; 
    } 
}

來源

2016-09-22 shek

如果您看到，ag-grid文檔有一個用於刷新（https://www.ag-grid.com/javascript-grid-refresh/）功能的頁面。第二個例子是你可以看看的東西。如果值大於20，則「總計」列中值的顏色會發生更改，具體取決於行中其他列的總和。我無法解決的問題是這些類是如何動態應用的。 – jsmtslch

看起來你應該能夠使用newValueHandler這是每一列的屬性。

從文檔：

如果你想用簡單的文本編輯，但要插入行之前對結果格式以某種方式，那麼你可以提供一個newValueHandler到列。這將允許您將額外的驗證或對話添加到該值。

newValueHandler提供一種params對象具有屬性：

節點：有問題的網格節點。

data：有問題的行數據。

oldValue：如果'field'在列定義中，則包含編輯前數據中的值。

newValue：輸入到默認編輯器中的字符串值。

rowIndex：虛擬行的索引。

colDef：列定義。

上下文：在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} 
}

來源

2016-09-22 21:31:29

嗨，請看我更新的問題。我照你說的做了，但沒有奏效。 – shek

這有什麼更新？ – shek

有任何更新請？ – shek

你所寫的內容大多是正確的：

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'，然後將新值設置爲值。那麼...您可以使用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']; } 
}

爲cellClass params對象訪問行數據，並能夠比較新的和原稿值。

挖掘後有很多選擇。選擇你認爲最好的。

來源

2016-10-18 23:46:36 JohnR

其實我剛剛開始工作。您需要在要更改顏色的每個列上使用「cellClassRules」屬性。例如：

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

規則中的'x'是該列的值。另外，您需要將您的列標記爲voaltile：true。
要使易失性字段動態更改，在刷新數據時需要api.softRefreshView()。
可以在您的html文件中定義css類'bold-and-red'，如： .bold-and-red顏色：darkred; font-weight：bold; }

來源

2016-11-04 19:35:24 jsmtslch

如何更改動態更改數據的ag-grid單元格的顏色

回答

相關問題