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

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

0 голосов
/ 18 апреля 2019

сетка для применения 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'sсостояние

...