как удалить строку ag-grid с помощью кнопки в рендерере ячеек

сетка для приложения CRUD. У меня есть данные, которые показаны в таблице ag-grid, например, 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"}
]
        }

и передал это в реквизитах rowData ag-grid:

<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?


reactjs ag-grid-react
person Necrofantaisie    schedule 18.04.2019    source источник
comment
Отсутствует много информации. Как вы загружаете данные строк. Если вы нажмете на «Удалить», будут ли они удалены данные строк из состояния или из базы данных или чего-то еще, откуда они были извлечены. поделитесь дополнительной информацией, такой как определения столбцов, средство визуализации ячеек и т. д., тогда я мог бы вам помочь   -  person Sameer Reza Khan    schedule 18.04.2019
comment
эй, я добавил подробный код и условия @SameerRezaKhan, пожалуйста, помогите   -  person Necrofantaisie    schedule 22.04.2019
comment
Я просто хочу удалить данные из состояния, есть ли другой подход к удалению строки?   -  person Necrofantaisie    schedule 22.04.2019
comment
Вызов функции нажатием кнопки и передача данных строки, поскольку данные строки являются объектом, вы можете найти и удалить объект из this.state.rewData   -  person Sameer Reza Khan    schedule 22.04.2019

Ответы (1)


arrow_upward
2
arrow_downward

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
    };
person Rajat    schedule 09.10.2019