diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md index 65f6cc5885..a3ffe6a53c 100644 --- a/components/table/demo/reset-filter.md +++ b/components/table/demo/reset-filter.md @@ -4,6 +4,10 @@ 使用受控属性对筛选和排序状态进行控制。 +> 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。 + +> 2. 只支持同时对一列进行排序,请保证只有一列的 sortOrder 属性是生效的。 + --- ````jsx @@ -34,33 +38,41 @@ const data = [{ const App = React.createClass({ getInitialState() { return { - filteredValue: {}, - sortedValue: {}, + filteredInfo: null, + sortedInfo: null, }; }, handleChange(pagination, filters, sorter) { console.log('各类参数是', pagination, filters, sorter); this.setState({ - filteredValue: filters, - sortedValue: sorter, + filteredInfo: filters, + sortedInfo: sorter, }); }, clearFilters(e) { e.preventDefault(); - this.setState({ filteredValue: {} }); + this.setState({ filteredInfo: null }); + }, + clearAll(e) { + e.preventDefault(); + this.setState({ + filteredInfo: null, + sortedInfo: null, + }); }, setAgeSort(e) { e.preventDefault(); this.setState({ - sortedValue: { + sortedInfo: { order: 'descend', columnKey: 'age', }, }); }, render() { - const { sortedValue, filteredValue } = this.state; - sortedValue.column = sortedValue.column || {}; + let { sortedInfo, filteredInfo } = this.state; + sortedInfo = sortedInfo || {}; + filteredInfo = filteredInfo || {}; const columns = [{ title: '姓名', dataIndex: 'name', @@ -69,16 +81,16 @@ const App = React.createClass({ { text: '姓李的', value: '李' }, { text: '姓胡的', value: '胡' }, ], - filteredValue: filteredValue.name, + filteredValue: filteredInfo.name, onFilter: (value, record) => record.name.indexOf(value) === 0, sorter: (a, b) => a.name.length - b.name.length, - sortOrder: sortedValue.columnKey === 'name' && sortedValue.order, + sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order, }, { title: '年龄', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age, - sortOrder: sortedValue.columnKey === 'age' && sortedValue.order, + sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order, }, { title: '地址', dataIndex: 'address', @@ -87,16 +99,17 @@ const App = React.createClass({ { text: '南湖', value: '南湖' }, { text: '西湖', value: '西湖' }, ], - filteredValue: filteredValue.address, + filteredValue: filteredInfo.address, onFilter: (value, record) => record.address.indexOf(value) === 0, sorter: (a, b) => a.address.length - b.address.length, - sortOrder: sortedValue.columnKey === 'address' && sortedValue.order, + sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order, }]; return (
diff --git a/components/table/index.jsx b/components/table/index.jsx index 5f2652b42b..cc8566c195 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -31,7 +31,7 @@ const Table = React.createClass({ return { // 减少状态 selectedRowKeys: this.props.selectedRowKeys || [], - filters: {}, + filters: this.getFiltersFromColumns(), selectionDirty: false, ...this.getSortStateFromColumns(), radioIndex: null, @@ -113,14 +113,19 @@ const Table = React.createClass({ selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [], }); } - if ('columns' in nextProps) { + if (this.hasSortOrderInColumns(nextProps.columns)) { const sortState = this.getSortStateFromColumns(nextProps.columns); - if (sortState && ( - sortState.sortColumn !== this.state.sortColumn || - sortState.sortOrder !== this.state.sortOrder)) { + if (sortState.sortColumn !== this.state.sortColumn || + sortState.sortOrder !== this.state.sortOrder) { this.setState(sortState); } } + if (this.hasFilteredValueInColumns(nextProps.columns)) { + const filters = this.getFiltersFromColumns(nextProps.columns); + if (this.isFiltersChanged(filters)) { + this.setState({ filters }); + } + } }, setSelectedRowKeys(selectedRowKeys) { @@ -141,6 +146,38 @@ const Table = React.createClass({ return this.props.pagination !== false; }, + isFiltersChanged(filters) { + let filtersChanged = false; + if (Object.keys(filters).length !== Object.keys(this.state.filters).length) { + filtersChanged = true; + } else { + Object.keys(filters).forEach(columnKey => { + if (filters[columnKey] !== this.state.filters[columnKey]) { + filtersChanged = true; + } + }); + } + return filtersChanged; + }, + + hasSortOrderInColumns(columns) { + return (columns || this.props.columns).some(column => 'sortOrder' in column); + }, + + hasFilteredValueInColumns(columns) { + return (columns || this.props.columns).some(column => 'filteredValue' in column); + }, + + getFiltersFromColumns(columns) { + let filters = {}; + (columns || this.props.columns).forEach(col => { + if (col.filteredValue) { + filters[this.getColumnKey(col)] = col.filteredValue; + } + }); + return filters; + }, + getSortedColumn(columns) { return (columns || this.props.columns).filter(col => col.sortOrder)[0]; }, @@ -194,7 +231,7 @@ const Table = React.createClass({ sortColumn, }; // Controlled - if (!this.getSortStateFromColumns()) { + if (!this.hasSortOrderInColumns()) { this.setState(newState); } this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState })); @@ -203,7 +240,7 @@ const Table = React.createClass({ handleFilter(column, nextFilters) { const filters = { ...this.state.filters, - [this.getColumnKey(column)]: nextFilters + [this.getColumnKey(column)]: nextFilters, }; // Remove filters not in current columns const currentColumnKeys = this.props.columns.map(c => this.getColumnKey(c)); @@ -216,8 +253,10 @@ const Table = React.createClass({ selectionDirty: false, filters, }; - this.setState(newState); - this.setSelectedRowKeys([]); + // Controlled + if (!this.hasFilteredValueInColumns()) { + this.setState(newState); + } this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState })); },