Question

我通过redux将一个ag-grid通过react绑定到我的数据集，并且通过在网格选项上使用deltaRowDataMode，它应该只重新渲染发生变化的项目。

但是我将这些行分组，并为全宽分组行提供了一个自定义渲染器。此自定义标题提供了组中项目状态的摘要。当您将deltaRowDataMode设置为true时，尽管内容是从子节点驱动的，但该组标头不会重新呈现，因为它认为它没有更改。

当子项更改时，如何强制网格重新渲染组标题行？

我的网格选项

deltaRowDataMode: true,
  enableColResize: true,
  enableFilter: true,
  enableSorting: true,
  frameworkComponents: { groupRowInnerRenderer: GroupRowInnerRenderer },
  getRowNodeId: (data:any) => {
    return data.EntryId;
  },
  groupDefaultExpanded: 1,
  groupRowInnerRenderer: "groupRowInnerRenderer",
  groupRowRendererParams: { suppressCount: true, checkbox: true },
  groupSelectsChildren: true,
  groupSelectsFiltered: true,
  groupUseEntireRow: true,
  rememberGroupStateWhenNewData: true,
  rowHeight: 35,
  rowSelection: "multiple"

和我的组行渲染器（当启用增量模式时，当单个数据更新时不会调用

import * as React from 'react';
import { SIGNOFF_STATE_REJECTED, SIGNOFF_STATE_SIGNEDOFF, SIGNOFF_STATE_WAITING } from '../constants/signoff-constants';

interface IGroupRowInnerRendererState {
    groupName: string,
    signedOffCount: number,
    awaitingCount: number,
    rejectedCount: number
}

export default class GroupRowInnerRenderer extends React.Component<{}, IGroupRowInnerRendererState> {
    constructor(props:any) {
        super(props);

        props.reactContainer.style.display = "inline-block";

        const node = props.node;
        const children = props.node.childrenAfterFilter;
        const signoffs = children.map((d:any) => d.data.Signoffs).reduce((acc:any, value:any) => acc.concat(value), []);

        this.state = {
            awaitingCount: signoffs.filter((s:any) => s.SignoffState === SIGNOFF_STATE_WAITING).length,
            groupName: node.key,
            rejectedCount: signoffs.filter((s:any) => s.SignoffState === SIGNOFF_STATE_REJECTED).length,
            signedOffCount: signoffs.filter((s:any) => s.SignoffState === SIGNOFF_STATE_SIGNEDOFF).length,            
        };
    }

    public render() {
        let waitingClass = "Header-Signoff-Item Signoff-Waiting ";
        if (this.state.awaitingCount === 0) { waitingClass += "Signoff-Hidden"} else { waitingClass += "Signoff-Visible"}

        let signedOffClass = "Header-Signoff-Item Signoff-SignedOff ";
        if (this.state.signedOffCount === 0) { signedOffClass += "Signoff-Hidden"} else { signedOffClass += "Signoff-Visible"}

        let rejectedClass = "Header-Signoff-Item Signoff-Rejected ";
        if (this.state.rejectedCount === 0) { rejectedClass += "Signoff-Hidden"} else { rejectedClass += "Signoff-Visible"}

        return (
            <div className="Header-Signoff-Cell">
                <div style={{width:1100, marginLeft:5}}>{this.state.groupName}</div>
                <div style={{width:20}} />
                <div className={waitingClass}>
                    <div className="Signoff-Item-Part">
                        <div className="Signoff-Item-Part">{this.state.awaitingCount} Awaiting signoff</div>                            
                    </div>                            
                </div>
                <div className={signedOffClass}>
                    <div className="Signoff-Item-Part">
                        <div className="Signoff-Item-Part">{this.state.signedOffCount} Signed off</div>                            
                    </div>                            
                </div>
                <div className={rejectedClass}>
                    <div className="Signoff-Item-Part">
                        <div className="Signoff-Item-Part">{this.state.rejectedCount} Rejected</div>                            
                    </div>                            
                </div>
            </div>
        );
    }
};

Answer 1

我正在处理的项目遇到相同的问题。通过编写删除方法，然后每次发生更新时将分组重新应用于列状态，我就能够解决它（请参见下文）。不幸的是，这会导致网格闪烁，因此并非万无一失。如果有人有更好的解决方案，将不胜感激。

import { GridOptions } from "ag-grid";

/** Helper function for AG Grid to set row grouping. Columns will be grouped in the order they are passed */
export function setRowGroups(gridOptions: GridOptions, fields: string[]) {
    if (gridOptions && gridOptions.columnApi) {
        const state = gridOptions.columnApi.getColumnState();
        let rowGroupIndex = 0;
        for (const field of fields) {
            const column = state.filter(c => c['colId'] === field)[0];
            if (column) { column['rowGroupIndex'] = rowGroupIndex++; }
        }
        gridOptions.columnApi.setColumnState(state);
    }
}

/** Helper function for AG Grid to clear row grouping */
export function clearRowGroups(gridOptions: GridOptions) {
    if (gridOptions && gridOptions.columnApi) {
        const state = gridOptions.columnApi.getColumnState();
        for (const column of state) {
            column['rowGroupIndex'] = null;
        }
        gridOptions.columnApi.setColumnState(state);
    }
}

启用增量行模式时，React Ag-Grid不重新渲染组行

1 个答案: