mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-13 21:32:56 +08:00
Fix rowSelection when change dataSource
This commit is contained in:
parent
f2ce959d33
commit
19c385ce58
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user