Question

如何直接在浏览器页面上编辑表格并在重新加载页面后保存数据。该表是使用react bootstrap table。项目的screenshot在这里。edit and save like in screenshot

我项目的代码就在这里。

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>

Answer 1

谈论v3.0.0-beta-11（之前我没有使用过它）。

没有问题。

但是在你的代码中，你并没有在合适的范围内。

所以只需修复它，以便在Component范围上调用onAfterSaveCell：

afterSaveCell: this.onAfterSaveCell.bind(this)

Answer 2

这是使用带有单元格编辑功能的Reactstrap的表的实现。保存更新与onBlur事件一起发生。通过html contentEditable = true为适当的单元格启用单元格编辑功能。

请参见https://github.com/msb1/reactstrap-functional-table

如何编辑反应引导表并在编辑后保存数据

2 个答案: