React中的网格自动更新

时间:2019-04-19 17:20:43

标签: reactjs

我有一个网格,可以根据搜索条件填充数据。网格还根据特定条件渲染一个编辑按钮。单击编辑按钮后,将打开一个新的弹出窗口,用户可以编辑特定字段并将其保存到服务器。但是在用户关闭弹出窗口后,网格不会自动呈现更改的值。

当网格第一次从服务器获取并具有过滤器时,该网格还将缓存数据。因此,仅当应用过滤器时,我才会在行中看到更新后的值。

在弹出窗口中更新并关闭弹出窗口后,如何立即更新单元格值。

导出类DefaultGrid扩展了React.PureComponent {

getColumns = memoizeOne( (editDefaultEntity,featureFlags: DefaultEntityFeatureFlags) : Array<ColDef> => {
    return[
        {headerName: 'My Last Update', field: 'myLastUpdate', width: 120},
        {headerName: 'Default Reporting Entity Set To', field: 'myReportingSetting', width: 250,
              tooltip:(param)=>'My Default Reporting Entity:'+ param.value},
        {headerName: 'CompanyName', field: 'cpCompanyName', width: 200 ,
            tooltip:(param)=>'CompanyName:'+ param.value},
        {headerName: 'CP Has Default Reporting Entity Set To', field: 'cpReportingSetting', width: 240 },
        {headerName: 'CP Last Update', field: 'cpLastUpdate', width: 150},
        {headerName: 'CP Reporting Role', field: 'cpReportingRole', width: 150 ,
            tooltip:(param)=>'CP Reporting Role:'+ param.value},
        {headerName: 'CP Confirmation Role', field: 'cpConfirmationRole', width: 150 },
        {headerName: 'Edit',  width: 80,
            cellRenderer:'renderer_defaultReportingEntityEdit',
            cellRendererParams:{
                editEntity:editDefaultReportingEntity,
                featureFlags:featureFlags,
            }
        }
    ];

}
)

private static gridComponents = {
    'renderer_defaultEntityEdit':CellRenderer_Edit
};


render(){

    const {entityList,editDefaultReportingEntity,featureFlags} = this.props;
    const columnDefs = this.getColumns(editDefaultReportingEntity,featureFlags);
    return (
        <div className={cx(flexAgGridContainerCss)}>
            <AgDataGrid
                columnDefs={columnDefs}
                frameworkComponents={DefaultEntityGrid.gridComponents}
                suppressMovableColumns
                suppressCellSelection
                suppressRowHoverHighlight
                rowData={entityList}
                deltaRowDataMode
                getRowNodeId={DefaultGrid.getRowNodeId}
                enableCellChangeFlash={true}
            />
        </div>
    );
}

private static getRowNodeId(data: entity) {
    return ''+data.companyId + ','+ data.otherCompanyId;
}

}

0 个答案:

没有答案