ブラウザページでテーブルを直接編集し、ページをリロードした後にデータを保存する方法。テーブルはreact bootstrap tableを使って作成しています。プロジェクトのスクリーンショットはこちら。スクリーンショットのように編集して保存する
私のプロジェクトのコードはこちらです。
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>