Ag-grid 可編輯網格動態添加新行

Question

我的功能組件中有一個可編輯的 AgGrid，如下所示。 在最后一列，我有添加/刪除行的按鈕。 現在我希望只為最后一行顯示添加行。 我在最后一列使用 cellRenderer。

通過以下更改，我在初始渲染時獲得了最后一行（即在我的情況下為第二行）的添加按鈕。 但是，如果我單擊第二行的添加，而我得到新的第三行的添加按鈕，但它不會被第二行刪除。 不確定我是否以錯誤的方式實現了這一點。

const MyCmp = (props) => {

    const getData = () => {
        return [{
            id: 0,
            firstName: 'F1',
            lastName: 'L1'
        }, {
            id: 1,
            firstName: 'F2',
            lastName: 'L2',
        }];
    }

    const [myCols, setMyCols] = useState(null);
    const [gridData, setGridData] = useState(getData());

    const [gridApi, setGridApi] = useState('');  

    let cellRules = {
        'rag-red': params => {
            if (params.data.lastName === 'INVALID_VAL') {
                return true;
            }
        }
    };

    const handleGridReady = (params) => {
        setGridApi(params.api);
        setMyCols([{
            headerName: 'F Name',
            field: 'firstName',
            editable: true
        }, {
            headerName: 'L Name',
            field: 'lastName',
            cellClassRules: cellRules,
            editable: true
        }, {
            headerName: '',
            field: 'buttonCol',
            cellRenderer: 'customColRenderer',
            cellRendererParams: {
                addItems: addItems
            }
        }]
        );
    };

    const createNewRowData = () => {
        const newData = {
            id: newCount,
            firstName: '',
            lastName: ''
        };
        newCount++;
        return newData;
    }

    let newCount = getData().length;

    const addItems = (addIndex, props) => {
        const newItems = [createNewRowData()];
        const res = props.api.applyTransaction({
            add: newItems,
            addIndex: addIndex,
        });

        setGridData(...gridData, res.add[0].data); // IS THIS CORRECT ?

        if (props.api.getDisplayedRowCount() > props.api.paginationGetPageSize()) {
            props.api.paginationGoToPage(parseInt((props.api.getDisplayedRowCount() / props.api.paginationGetPageSize())) + 1);
        }
    }

    const onCellClicked = (e) => {
    }

    const frameworkComponents = () => {
        return {customColRenderer: customColRenderer}
    }

    return (
        <>
            <MyAgGrid
                    id="myGrid"
                    columnDefs={myCols}
                    rowData={gridData}
                    frameworkComponents={{customColRenderer: customColRenderer}}
                    {...props}
                />
        </>
    )
}

我的 customColRenderer 如下；

export default (props) => {
        let isLastRow = (props.rowIndex === (props.api.getDisplayedRowCount() -1)) ? true: false;
        const addItems = (addIndex) => {
            props.addItems(addIndex, props);
        }

        return (
            <span>
                {isLastRow ? <button onClick={() => addItems()}>Add</button> : null}
                <span><button onClick={() => props.api.applyTransaction({remove: props.api.getSelectedRows()})}>Remove</button>
            </span>
        );
};

Answer 1

在 AgGrid React 內部，當您的 rowData 更新時會自動生成一個事務，因此您可以選擇通過 api 或通過更新您的狀態來應用事務 - 您不需要同時執行這兩個操作（因為您目前正在做）。 通常使用 React，我建議更新狀態以使您的狀態與網格中顯示的數據保持一致，但這可能取決於用例。

至於您的單元格未更新的進一步問題 - 這是因為 AgGrid 檢測到單元格的“值”沒有變化，因為它試圖減少不必要的單元格渲染量。

您可以嘗試致電：

api.refreshCells({ force: true });

在應用事務的 api 調用之后（我不確定使用 setState 方法需要在哪里發生）。