mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
refined docs for remote cell edit
This commit is contained in:
AllenFang
parent
beafef9661
commit
d5f7ae5edb
@ -40,7 +40,13 @@ This is a chance that you can connect to your remote server or database to manip
|
||||
For flexibility reason, you can control what functionality should be handled on remote via a object return:
|
||||
|
||||
```js
|
||||
remote={ { filter: true } }
|
||||
remote={ {
|
||||
filter: true,
|
||||
pagination: true,
|
||||
filter: true,
|
||||
sort: true,
|
||||
cellEdit: true
|
||||
} }
|
||||
```
|
||||
|
||||
In above case, only column filter will be handled on remote.
|
||||
@ -53,7 +59,7 @@ A special case for remote pagination:
|
||||
remote={ { pagination: true, filter: false, sort: false } }
|
||||
```
|
||||
|
||||
In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort` etc) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
|
||||
In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort`) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
|
||||
|
||||
### <a name='loading'>loading - [Bool]</a>
|
||||
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
|
||||
@ -250,6 +256,7 @@ There's only two arguments will be passed to `onTableChange`: `type` and `newSta
|
||||
* `filter`
|
||||
* `pagination`
|
||||
* `sort`
|
||||
* `cellEdit`
|
||||
|
||||
Following is a shape of `newState`
|
||||
|
||||
@ -260,6 +267,11 @@ Following is a shape of `newState`
|
||||
sortField, // newest sort field
|
||||
sortOrder, // newest sort order
|
||||
filters, // an object which have current filter status per column
|
||||
data // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
|
||||
data, // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
|
||||
cellEdit: { // You can only see this prop when type is cellEdit
|
||||
rowId,
|
||||
dataField,
|
||||
newValue
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -5,8 +5,6 @@
|
||||
* [timeToCloseMessage](#timeToCloseMessage)
|
||||
* [beforeSaveCell](#beforeSaveCell)
|
||||
* [afterSaveCell](#afterSaveCell)
|
||||
* [onUpdate](#onUpdate)
|
||||
* [editing](#editing)
|
||||
* [errorMessage](#errorMessage)
|
||||
* [onErrorMessageDisappear](#onErrorMessageDisappear)
|
||||
|
||||
@ -21,9 +19,7 @@ Following is the shape of `cellEdit` object:
|
||||
mode: 'click',
|
||||
blurToSave: true,
|
||||
timeToCloseMessage: 2500,
|
||||
editing: false|true,
|
||||
errorMessage: '',
|
||||
onUpdate: (rowId, dataField, newValue) => { ... },
|
||||
beforeSaveCell: (oldValue, newValue, row, column) => { ... },
|
||||
afterSaveCell: (oldValue, newValue, row, column) => { ... },
|
||||
onErrorMessageDisappear: () => { ... },
|
||||
@ -63,73 +59,8 @@ const cellEdit = {
|
||||
};
|
||||
```
|
||||
|
||||
### <a name='onUpdate'>cellEdit.onUpdate - [Function]</a>
|
||||
If you want to control the cell updating process by yourself, for example, connect with `Redux` or saving data to backend database, `cellEdit.onUpdate` is a great chance you can work on it.
|
||||
|
||||
Firsylt, `react-bootstrap-table2` allow `cellEdit.onUpdate` to return a promise:
|
||||
|
||||
```js
|
||||
const cellEdit = {
|
||||
// omit...
|
||||
onUpdate: (rowId, dataField, newValue) => {
|
||||
return apiCall().then(response => {
|
||||
console.log('update cell to backend successfully');
|
||||
// Actually, you dont do any thing here, we will update the new value when resolve your promise
|
||||
})
|
||||
.catch(err => throw new Error(err.message));
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
If your promise is resolved successfully, `react-bootstrap-table2` will default help you to update the new cell value.
|
||||
If your promise is resolved failure, you can throw an `Error` instance, `react-bootstrap-table2` will show up the error message (Same behavior like [`column.validator`](./columns.md#validator)).
|
||||
|
||||
In some case, backend will return a new value to client side and you want to apply this new value instead of the value that user input. In this situation, you can return an object which contain a `value` property:
|
||||
|
||||
```js
|
||||
const cellEdit = {
|
||||
// omit...
|
||||
onUpdate: (rowId, dataField, newValue) => {
|
||||
return apiCall().then(response => {
|
||||
return { value: response.value }; // response.value is from your backend api
|
||||
})
|
||||
.catch(err => throw new Error(err.message));
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
If your application integgrate with `Redux`, you may need to dispatch an action in `cellEdit.onUpdate` callback. In this circumstances, you need to return `false` explicity which `react-bootstrap-table2` will stop any operation internally and wait rerender by your application.
|
||||
|
||||
In a simple redux application, you probably need to handle those props by your application:
|
||||
|
||||
* [`cellEdit.editing`](#editing): Is cell still on editing or not? This value should always be `true` when saving cell failure.
|
||||
* [`cellEdit.errorMessage`](#errorMessage): Error message when save the cell failure.
|
||||
* [`cellEdit.onErrorMessageDisappear`](#onErrorMessageDisappear): This callback will be called when error message alert closed automatically.
|
||||
* `cellEdit.onUpdate`
|
||||
|
||||
```js
|
||||
const cellEdit = {
|
||||
editing: this.props.editing,
|
||||
errorMessage: this.props.errorMessage,
|
||||
onErrorMessageDisappear: () => {
|
||||
// cleanErrorMessage is an action creator
|
||||
this.props.dispatch(cleanErrorMessage());
|
||||
},
|
||||
onUpdate: (rowId, dataField, newValue) => {
|
||||
// updateCell is an action creator
|
||||
this.props.dispatch(updateCell(rowId, dataField, newValue)));
|
||||
return false; // Have to return false here
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Please check [this](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/develop/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js) exmaple to learn how use `cellEdit` with a redux application
|
||||
|
||||
### <a name='editing'>cellEdit.editing - [Bool]</a>
|
||||
This only used when you want to control cell saving externally, `cellEdit.editing` will be a flag to tell `react-bootstrap-table2` whether currecnt editing cell is still editing or not. Because, it's possible that some error happen when you saving cell, in this situation, you need to configre this value as `false` to keep the cell as edtiable and show up an error message.
|
||||
|
||||
### <a name='errorMessage'>cellEdit.errorMessage - [String]</a>
|
||||
Same as [`cellEdit.editing`](#editing). This prop is not often used. Only used when you keep the error message in your application state.
|
||||
This prop is not often used. Only used when you keep the error message in your application state and also handle the cell editing on remote mode.
|
||||
|
||||
### <a name='onErrorMessageDisappear'>cellEdit.onErrorMessageDisappear - [Function]</a>
|
||||
This callback function will be called when error message discard.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user