Fix rowSelection when change dataSource

This commit is contained in:
afc163 2015-11-05 17:30:24 +08:00
parent f2ce959d33
commit 19c385ce58

View File

@ -47,7 +47,7 @@ let AntTable = React.createClass({
data: [], data: [],
dataSource: this.props.dataSource, dataSource: this.props.dataSource,
filters: {}, filters: {},
dirty: false, selectionDirty: false,
loading: this.props.loading, loading: this.props.loading,
sortColumn: '', sortColumn: '',
sortOrder: '', sortOrder: '',
@ -102,9 +102,17 @@ let AntTable = React.createClass({
} }
// dataSource // dataSource
if ('dataSource' in nextProps && if ('dataSource' in nextProps &&
nextProps.dataSource !== this.props.dataSource) { nextProps.dataSource !== this.props.dataSource) {
let selectedRowKeys = this.state.selectedRowKeys;
//
if (this.isLocalDataSource()) {
let currentPageRowKeys = this.getLocalDataPaging(nextProps.dataSource);
selectedRowKeys = selectedRowKeys.filter((key) => {
return currentPageRowKeys.indexOf(key) >= 0;
});
}
this.setState({ this.setState({
selectedRowKeys: [], selectionDirty: false,
dataSource: nextProps.dataSource, dataSource: nextProps.dataSource,
loading: true loading: true
}, this.fetch); }, this.fetch);
@ -178,6 +186,7 @@ let AntTable = React.createClass({
}); });
const newState = { const newState = {
selectedRowKeys: [], selectedRowKeys: [],
selectionDirty: false,
filters filters
}; };
this.fetch(newState); this.fetch(newState);
@ -187,7 +196,7 @@ let AntTable = React.createClass({
handleSelect(record, rowIndex, e) { handleSelect(record, rowIndex, e) {
let checked = e.target.checked; let checked = e.target.checked;
let defaultSelection = []; let defaultSelection = [];
if (!this.state.dirty) { if (!this.state.selectionDirty) {
defaultSelection = this.getDefaultSelection(); defaultSelection = this.getDefaultSelection();
} }
let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
@ -201,7 +210,7 @@ let AntTable = React.createClass({
} }
this.setState({ this.setState({
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
dirty: true selectionDirty: true
}); });
if (this.props.rowSelection.onSelect) { if (this.props.rowSelection.onSelect) {
let data = this.getCurrentPageData(); let data = this.getCurrentPageData();
@ -215,7 +224,7 @@ let AntTable = React.createClass({
handleRadioSelect: function (record, rowIndex, e) { handleRadioSelect: function (record, rowIndex, e) {
let checked = e.target.checked; let checked = e.target.checked;
let defaultSelection = []; let defaultSelection = [];
if (!this.state.dirty) { if (!this.state.selectionDirty) {
defaultSelection = this.getDefaultSelection(); defaultSelection = this.getDefaultSelection();
} }
let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
@ -224,7 +233,7 @@ let AntTable = React.createClass({
this.setState({ this.setState({
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
radioIndex: record.key, radioIndex: record.key,
dirty: true selectionDirty: true
}); });
if (this.props.rowSelection.onSelect) { if (this.props.rowSelection.onSelect) {
let data = this.getCurrentPageData(); let data = this.getCurrentPageData();
@ -248,7 +257,7 @@ let AntTable = React.createClass({
}) : []; }) : [];
this.setState({ this.setState({
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
dirty: true selectionDirty: true
}); });
if (this.props.rowSelection.onSelectAll) { if (this.props.rowSelection.onSelectAll) {
let selectedRows = data.filter((row, i) => { let selectedRows = data.filter((row, i) => {
@ -268,6 +277,7 @@ let AntTable = React.createClass({
const newState = { const newState = {
// //
selectedRowKeys: [], selectedRowKeys: [],
selectionDirty: false,
pagination pagination
}; };
this.fetch(newState); this.fetch(newState);
@ -286,14 +296,26 @@ let AntTable = React.createClass({
if (this.props.rowSelection.getCheckboxProps) { if (this.props.rowSelection.getCheckboxProps) {
props = this.props.rowSelection.getCheckboxProps.call(this, record); props = this.props.rowSelection.getCheckboxProps.call(this, record);
} }
const checked = this.state.dirty ? this.state.radioIndex === record.key : this.getDefaultSelection().indexOf(rowIndex) >= 0; let checked;
if (this.state.selectionDirty) {
checked = this.state.radioIndex === record.key;
} else {
checked = (this.state.radioIndex === record.key ||
this.getDefaultSelection().indexOf(rowIndex) >= 0);
}
return <Radio disabled={props.disabled} onChange={this.handleRadioSelect.bind(this, record, rowIndex)} return <Radio disabled={props.disabled} onChange={this.handleRadioSelect.bind(this, record, rowIndex)}
value={record.key} checked={checked}/>; value={record.key} checked={checked}/>;
}, },
renderSelectionCheckBox(value, record, index) { renderSelectionCheckBox(value, record, index) {
let rowIndex = this.getRecordKey(record, index); // 1 let rowIndex = this.getRecordKey(record, index); // 1
let checked = this.state.dirty ? this.state.selectedRowKeys.indexOf(rowIndex) >= 0 : this.getDefaultSelection().indexOf(rowIndex) >= 0; let checked;
if (this.state.selectionDirty) {
checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0;
} else {
checked = (this.state.selectedRowKeys.indexOf(rowIndex) >= 0 ||
this.getDefaultSelection().indexOf(rowIndex) >= 0);
}
let props = {}; let props = {};
if (this.props.rowSelection.getCheckboxProps) { if (this.props.rowSelection.getCheckboxProps) {
props = this.props.rowSelection.getCheckboxProps.call(this, record); props = this.props.rowSelection.getCheckboxProps.call(this, record);
@ -490,7 +512,7 @@ let AntTable = React.createClass({
dataSource.getPagination.call(this, result) dataSource.getPagination.call(this, result)
); );
this.setState({ this.setState({
dirty: false, selectionDirty: false,
loading: false, loading: false,
data: dataSource.resolve.call(this, result), data: dataSource.resolve.call(this, result),
pagination: pagination pagination: pagination
@ -513,8 +535,8 @@ let AntTable = React.createClass({
})[0]; })[0];
}, },
getLocalDataPaging() { getLocalDataPaging(dataSource) {
let data = this.getLocalData(); let data = this.getLocalData(dataSource);
let current, pageSize; let current, pageSize;
let state = this.state; let state = this.state;
// //
@ -540,9 +562,9 @@ let AntTable = React.createClass({
return data; return data;
}, },
getLocalData() { getLocalData(dataSource) {
let state = this.state; let state = this.state;
let data = this.state.dataSource; let data = dataSource || this.state.dataSource;
// //
if (state.sortOrder && state.sorter) { if (state.sortOrder && state.sorter) {
data = data.sort(state.sorter); data = data.sort(state.sorter);