Как отредактировать таблицу начальной загрузки и сохранить данные после редактирования

как редактировать таблицу прямо на странице браузера и сохранить данные после перезагрузки страницы. Таблица сделана с использованием таблицы реактивной начальной загрузки. Скриншот проекта здесь.

код моего проекта здесь.

onAfterSaveCell(value, name){
axios({
method:'post',
url:'https://something.something.com.somewhere/update_something',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-access-token':this.state.token
},
data:{
name:value[name]
}
})
.then((response)=>{
this .getCustomerData();
})
.catch((error)=>{
throw('error',error);
});
 }

реагирующий бутстрап здесь

<BootstrapTable data={this.state.customer_data} search={true} cellEdit={ {
  mode: "click",
  blurToSave: true,
  afterSaveCell: this.onAfterSaveCell
 } } >
    <TableHeaderColumn dataField="tid" isKey = {true} dataSort={true} width="70">S.No</TableHeaderColumn>
    <TableHeaderColumn dataField="company_name" dataSort={true}>Company Name</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_address" dataSort={true}>Contact Address</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_person" dataSort={true}>Contact Person</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_number" dataSort = {true}>Contact Number</TableHeaderColumn>
 </BootstrapTable>

person Pawan Bhusal    schedule 02.09.2016    source источник


Ответы (2)


Речь о v3.0.0-beta-11 (раньше не пользовался).

Нет проблем.

Но в вашем коде вы не в нужной области.

Так что просто исправьте это так, чтобы onAfterSaveCell вызывался в вашей области компонента:

afterSaveCell: this.onAfterSaveCell.bind(this)
person MacKentoch    schedule 16.02.2017

Вот реализация таблицы с использованием Reactstrap с возможностью редактирования ячеек. Сохранение обновлений происходит с событиями onBlur. Возможность редактирования ячеек включается с помощью html contentEditable=true для соответствующих ячеек.

См. https://github.com/msb1/reactstrap-functional-table.

person barnwaldo    schedule 26.03.2020