如何使用单元格渲染器中的按钮删除 ag-grid 行答案

【问题标题】：how to delete ag-grid row with a button in cell renderer如何使用单元格渲染器中的按钮删除 ag-grid 行
【发布时间】：2019-09-08 18:31:08
【问题描述】：

用于 CRUD 应用程序的网格。我有一些像这样在 ag-grid 表中显示的数据

我使用 ag-grid 单元格渲染器来渲染那个按钮

import React, { Component } from 'react';

export default class DeleteButton extends Component {
    render() {
        return (
            <span><button onClick={}>X</button></span>
        );
    }
}

我像这样将数据和列定义存储在组件的状态中

    this.state = {
        rewData : [
            {make: "Toyota", model: "Celica", qty:12, price: 35000,  test:"", image:""},
            {make: "Ford", model: "Mondeo", qty:1, price: 32000,  test:"", image:""},
            {make: "Porsche", model: "Boxter", qty:8, price: 72000, test:"", image:""},
            {make: "Porsche", model: "Boxter", qty:8, price: 72000,  test:"", image:""}
        ],
    columnDefs:[
{"headerName":"Make","field":"make","cellEditor":"textCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Model","field":"model","cellEditor":"multiLineTextCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Qty","field":"qty","cellEditor":"numericCellEditor","cellEditorParams":{"required":true}},
{"headerName":"Price","field":"price","cellEditor":"numericCellEditor","cellRenderer":"currencyCellRenderer","cellEditorParams":{"required":true}},
{"headerName":"test","field":"test","cellEditor":"manyToOneCellEditor","cellEditorParams":{"model":"account","host":"http://localhost:8282","fieldAsLabel":"name","fieldAsValue":"id","required":true}},
{"headerName":"image","field":"image","cellEditor":"fileUploadCellEditor","cellRenderer":"imageCellRenderer","cellEditorParams":{"required":true}},
{"headerName":"Delete","cellRenderer":"deleteButton"}
]
        }

并将其传递给 ag-grid 的 rowData 道具：

<AgGridReact
    defaultColDef={defaultColDef}
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}
    onGridReady={this.onGridReady}
    onCellValueChanged={this.handleChange}
    frameworkComponents={this.state.frameworkComponents}
    singleClickEdit={true}
    stopEditingWhenGridLosesFocus={true}
    reactNext={true}
/>

当我单击删除按钮时，我想删除相应的行以及其他内容，例如验证或向用户显示通知等

如何使该按钮能够改变 rowData 的状态？

我应该把改变rowData状态的方法放在哪里？

【问题讨论】：

很多信息丢失。你是如何加载行数据的，如果你点击删除，它会从状态或数据库中删除行数据，还是从它被提取的地方删除行数据。分享更多信息，如列定义、单元格渲染器等。然后我可以帮助你
嘿，我已经添加了一些详细的代码和条件@SameerRezaKhan 请帮助
我只是想从状态中删除数据，有没有其他方法可以删除行？
点击按钮调用函数并传递行数据，因为行数据是一个对象，你可以从this.state.rewData中找到并删除对象

标签： reactjs ag-grid-react

【解决方案1】：

this.gridApi.updateRowData 将接收对象数组中的rowNode

export default class DeleteButton extends Component {
    render() {
        return (
            <span><button onClick={() => this.buttonClick(this.props.node)}>X</button></span>
        );
    }
}

buttonClick = (e) => {

*// e is getting the current node (Row Node)*

        this.setState({
            visible:true
        })
        let deletedRow = this.props.node.data;
        e.gridApi.updateRowData({ remove: [deletedRow] })  // It will update the row
    };

【讨论】：

我查看了ag-grid.com/react-data-grid/grid-api 的文档，没有“e.gridApi.updateRowData”，有变化吗？
此 api 现在已更改为 - gridOptions.api.applyTransaction({ remove: selectedData });