我正在使用ag-grid显示数据。但是,并不是网格中的所有数据都来自我传递给gridAPI的rowData。 其中一列是根据行数据和其他数据集计算得出的。当单击一个对话框时,网格还具有编辑按钮,用户可以在其中更改其中一个值并保存到服务器。保存操作完成后,对话框关闭,并将控制权传递给Grid,但是Grid单元格不刷新。我知道为什么网格不刷新。因为我传递的rowData没有直接更新,但是另一组数据已更改,因此我根据该数据计算了一个列值。我的代码如下。如果看到方法getDefaultMArketName用作第二列的valueGetter。这导致网格无法更新。有指针吗?
type Props = {
companiesWithMarket: any;
defaultMarkets:any;
editMyPreferences?:(companyWithMarket:any)=>void;
}
type State = {
}
export class MyGrid extends React.PureComponent<Props, State> {
static contextTypes = {
menuController: PropTypes.object.isRequired,
clipboardService: PropTypes.object.isRequired,
};
getColumns = memoizeOne( (editMyPreferences): Array<ColDef> =>{
return [
{headerName: 'Company', field: 'companyName', width: 500, cellClass:
"fullText", autoHeight: true},
{headerName: 'Default Market', valueGetter: this.getDefaultMarketName,
width: 500, cellClass: "fullText", autoHeight: true},
{headerName: 'Edit', width: 80,
cellRenderer:'renderer_myPreferencesEdit',
cellRendererParams:{
editMyPreferences:editMyPreferences
}
}
];
})
private static gridComponents = {
'renderer_myPreferencesEdit':CellRenderer_EditMyPreferences
};
getDefaultMarketName = (params) => {
let defaultMarkets= this.props.defaultMarkets;
let marketName ,i;
for (i = 0; i < defaultMarkets.length; i++) {
if (params.data.companyId === defaultMarkets[i].companyId) {
marketName = defaultMarkets[i].marketName;
return marketName;
}
else {
marketName = "";
}
}
return null;
};
render(){
const {companiesWithMarket,editMyPreferences,defaultMarkets} =
this.props;
const columnDefs = this.getColumns(editMyPreferences);
return (
<div className={cx(flexAgGridContainerCss)}>
<AgDataGrid
columnDefs={columnDefs}
frameworkComponents={MyGrid.gridComponents}
suppressMovableColumns
suppressCellSelection
suppressRowHoverHighlight
rowData={companiesWithMarket}
deltaRowDataMode
getRowNodeId={MyGrid.getRowNodeId}
onGridReady={MyGrid.onGridReady}
onGridSizeChanged={MyGrid.onGridSizeChanged}
onColumnResized={MyGrid.onColumnResized}
onCellContextMenu={this._onContextMenu}
/>
</div>
);
}
private static onGridReady(params) {
const gridApi = params.api;
gridApi.sizeColumnsToFit(); // for * size columns
}
private static onGridSizeChanged(params) {
const gridApi = params.api;
gridApi.sizeColumnsToFit(); // for * size columns
}
private static onColumnResized(params) {
const gridApi = params.api;
gridApi.resetRowHeights(); // for autoHeight...
}
//this is used to update only one row value instead of updating the
whole
grid. fast performance
private static getRowNodeId(data: CompanyDTO) {
return ''+data.companyId + ','+ data.companyId;
}
//private refreshCells(params){
// let defaultMarkets = this.props.defaultMarkets;
// const gridApi = params.api;
//}
_onContextMenu: (agEvent: CellContextMenuEvent) => void =
createOnGridContextMenu(this,
MyPreferencesGrid.gridComponents,
null,
true);
}