刷新网格

时间:2019-06-18 16:19:16

标签: reactjs ag-grid

我正在使用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);
    }

0 个答案:

没有答案