2

我是 Ag-grid-react 的新手。目前，App 中有一个简单的反应表可以正常工作，但它没有像 Ag-grid 这样的强大功能。我正在考虑切换到 Ag-grid-react。

但是，在实施过程中。我发现当我将外部数据源中的道具更新到 Ag-grid 时。Ag-grid-react 会自动重新渲染整个表格并忘记之前的设置。

我使用 Meteor 1.4 作为平台，React 15.4.2 作为框架。

问题： this.props.data 是我要显示的外部数据源。它适用于第一次渲染，但是当我从外部更改单元格值时。这个道具变了。它会重新渲染表格。如何避免自动重新渲染并仅更改我已更改的单元格值？

我在文档中看到有 API 可以调用并更改 Ag-grid 中的行数据。如果我使用 API，那么每次更改数据时都需要在数据源中进行 prev props 和 current props 检查，并使用 API 将更改发送到 Ag-grid。是否假设 React 会自动检查并仅重新渲染我已更改的子组件？

让我知道是否有任何解决方案可以解决此问题。

部分代码：

class MasterDetailExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rowData: this.props.data,
            columnDefs: this.createColumnDefs(),
        };
        this.onGridReady = this.onGridReady.bind(this);
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
    }

...//Some code for createColumnDefs()

    isFullWidthCell(rowNode) {
        return rowNode.level === 1;
    }

    getRowHeight(params) {
        let rowIsDetailRow = params.node.level === 1;
        return rowIsDetailRow ? 200 : 25;
    }

    getNodeChildDetails(record) {
        if (record.callRecords) {
            return {
                group: true,
                key: record.name,
                children: [record.callRecords],
            };
        } else {
            return null;
        }
    }

    render() {
        return (
            <div style={{height: 1000 , width: "100%" }}
                 className="ag-fresh">
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}

                    isFullWidthCell={this.isFullWidthCell}
                    getRowHeight={this.getRowHeight}
                    getNodeChildDetails={this.getNodeChildDetails}
                    fullWidthCellRendererFramework={DetailPanelComponent}

                    enableSorting
                    enableColResize
                    suppressMenuFilterPanel

                    onGridReady={this.onGridReady}>
                </AgGridReact>
            </div>
        );
    }
};
4

1 回答 1

2

就像@JulienD 已经提到的那样，这deltaRowDataMode是那里的关键。

  • 放deltaRowDataMode={true}
  • 而是在回调和中rowData使用参数setRowData()onGridReadycomponentDidUpdate
  • 不要忘记getRowNodeId={data => data.id}

这将为您比较和更新确切的行。

文档：https ://www.ag-grid.com/javascript-grid-data-update/#delta-row-data

于 2019-03-29T09:31:17.610 回答