如何编辑react bootstrap表并保存编辑后的数据
如何编辑react bootstrap表并保存编辑后的数据
提问于 2016-09-02 20:05:22
如何在浏览器页面上直接编辑表格，并在重新加载页面后保存数据。该表是使用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);
});
}react bootstrap在这里
<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>回答 2
Stack Overflow用户
发布于 2017-02-16 22:36:24
谈论v3.0.0-beta-11 (我以前没有用过它)。
没有问题。
但是在您的代码中，您没有在正确的作用域中。
所以只需修复它，以便在您的组件作用域上调用onAfterSaveCell：
afterSaveCell: this.onAfterSaveCell.bind(this)Stack Overflow用户
发布于 2020-03-27 02:46:05
下面是一个使用Reactstrap实现的具有单元格编辑功能的表。保存更新时会发生onBlur事件。对于适当的单元格，可使用html contentEditable=true启用单元格编辑功能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39292021
复制相关文章
相似问题
腾讯云开发者
