2016-09-02 39 views
5

cách chỉnh sửa bảng trực tiếp trên trang trình duyệt và lưu dữ liệu sau khi tải lại trang. Bảng được thực hiện bằng cách sử dụng phản ứng bootstrap table.screenshot của dự án là ở đây. edit and save like in screenshotCách chỉnh sửa bảng phản ứng khởi động và lưu dữ liệu sau khi chỉnh sửa

mã dự án của tôi ở đây.

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); 
}); 
} 

phản ứng bootstrap là ở đây

<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> 

Trả lời

1

Nói về v3.0.0-beta-11 (tôi không sử dụng nó trước đó).

Không có vấn đề gì.

Nhưng trong mã của bạn, bạn không ở đúng phạm vi.

Vì vậy, chỉ sửa chữa nó để onAfterSaveCell được gọi là trên phạm vi Component của bạn:

afterSaveCell: this.onAfterSaveCell.bind(this) 
Các vấn đề liên quan