基于动态条件的ag

本文介绍了基于动态条件的ag-grid单元格样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在寻找基于可设置阈值的 ag-grid 中单元格的动态渲染，高于该阈值，单元格将呈现绿色或红色.

我尝试了以下方法:

并输入阈值(设置状态).但是，即使状态发生变化，columnDefs 中也不会发生变化.

我使用 .applyTransactionAsync() 进行高频更新.因此，在使用 .setColumnDefs() 时，表格不显示任何数据.

有没有办法根据动态数据的动态条件而不是固定条件来实现这种单元格样式?

解决方案

您可以使用 AgGrid 的

I am looking for dynamic rendering of cells in ag-grid based on a settable threshold value above which the cell is rendered green else red.

I tried the following:

<AgGridReact onGridReady={onGridReady} pagination={true} columnDefs={[ { headerName: "SYMBOL", field: "symbol" }, { headerName: "PRICE", field: "price", volatile: true, cellStyle: function (params) { if (params.value < threshold) { return { backgroundColor: "red" }; } else { return { backgroundColor: "green" }; } } } ]} />

and take input for threshold (which sets the state). However, even though the state changes no change happen in the columnDefs.

I am using .applyTransactionAsync() for high frequency updates. Hence upon using .setColumnDefs() the table does not show any data.

Is there any way that this cell styling happens based on a dynamic condition on dynamic data instead of a fixed one?

解决方案

You can use AgGrid's context to update dynamic value that can then be used to pass around the grid. Here is how you can reference the context object in your cellStyle callback.

{ headerName: "PRICE", field: "price", cellStyle: (params) => { if (params.value < params.context.threshold) { return { backgroundColor: "lightCoral" }; } else { return { backgroundColor: "deepSkyBlue" }; } } }

Setting up context is easy

<AgGridReact columnDefs={columnDefs} rowData={rowData} context={{ threshold }} ... />

Where threshold is a dynamic value that you can get from redux store or an API response for example. In the demo code below, you can update threshold locally using the value from the input.

const [threshold, setThreshold] = React.useState(20); const updateThreshold = () => { const inputEl = document.getElementById("thresholdInput"); const newValue = parseFloat((inputEl as HTMLInputElement).value); setThreshold(newValue); }; return ( <> <input id="thresholdInput" defaultValue={threshold} /> <button onClick={updateThreshold}>Update threshold</button> ... </> );

Live Demo