diff --git a/components/table/demo/locale.md b/components/table/demo/locale.md new file mode 100644 index 0000000000000000000000000000000000000000..bcefcb4ce6083f9ef3eb9a5f5410c8792d5f18fa --- /dev/null +++ b/components/table/demo/locale.md @@ -0,0 +1,65 @@ +# 国际化 + +- order: 15 + +用 `locale` 设置表格的排序、过滤按钮的文字或 `title`。 + +--- + +````jsx +import { Table } from 'antd'; + +const columns = [{ + title: 'Name', + dataIndex: 'name', + filters: [{ + text: 'Starts with A', + value: '^[aA]' + }, { + text: 'Starts with B', + value: '^[bB]' + }], + onFilter: function(value, record) { + return new RegExp(value).test(record.name); + }, +}, { + title: 'Age', + dataIndex: 'age', + sorter: function(a, b) { + return a.age - b.age; + } +}, { + title: 'Address', + dataIndex: 'address' +}]; + +const data = [{ + key: '1', + name: 'Alice', + age: 32, + address: 'Somewhere' +}, { + key: '2', + name: 'Bob', + age: 42, + address: 'Somewhere' +}, { + key: '3', + name: 'Candy', + age: 32, + address: 'Somewhere' +}]; + +const locale = { + sortAscend: 'Sort ascending', + sortDescend: 'Sort descending', + filterTitle: 'Filter', + filterConfirm: 'Confirm', + filterReset: 'Reset' +}; + +ReactDOM.render( + , + document.getElementById('components-table-demo-locale') +); +```` diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx index cdf8b00f81411c07fb5893f652206b54332c37b8..ae778278e974c0b45ae7b3ae1e7d8dde9423dc11 100644 --- a/components/table/filterDropdown.jsx +++ b/components/table/filterDropdown.jsx @@ -48,7 +48,7 @@ let FilterMenu = React.createClass({ return menuItems; }, render() { - let column = this.props.column; + let {column, locale} = this.props; // default multiple selection in filter dropdown let multiple = true; if ('filterMultiple' in column) { @@ -69,7 +69,7 @@ let FilterMenu = React.createClass({ pointerEvents: 'visible' }} onClick={this.handleConfirm}> - 确定 + {locale.filterConfirm} - 重置 + {locale.filterReset} ; @@ -92,7 +92,7 @@ let FilterMenu = React.createClass({ visible={this.state.visible} onVisibleChange={this.onVisibleChange} closeOnSelect={false}> - + ; } }); diff --git a/components/table/index.jsx b/components/table/index.jsx index 6ea271d39a866d4fa4dc757b5995b03e86df1cd3..ec2cfb0073b01db2320002d4dc8ed89c39d2be20 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -16,6 +16,15 @@ function defaultResolve(data) { return data || []; } +const defaultLocale = { + sortAscend: '升序排序', + sortDescend: '降序排序', + + filterTitle: '筛选', + filterConfirm: '确定', + filterReset: '重置' +}; + class DataSource { init(config) { this.config = config; @@ -69,8 +78,8 @@ let AntTable = React.createClass({ size: 'default', loading: false, bordered: false, - onChange: function () { - } + onChange: noop, + locale: {} }; }, @@ -398,6 +407,7 @@ let AntTable = React.createClass({ }, renderColumnsDropdown(columns) { + let locale = objectAssign({}, defaultLocale, this.props.locale); return columns.map((column, i) => { column = objectAssign({}, column); let key = this.getColumnKey(column, i); @@ -405,7 +415,7 @@ let AntTable = React.createClass({ if (column.filters && column.filters.length > 0) { let colFilters = this.state.filters[key] || []; filterDropdown = - ; } @@ -417,16 +427,17 @@ let AntTable = React.createClass({ column.className += ' ant-table-column-sort'; } } + sortButton =
diff --git a/components/table/index.md b/components/table/index.md index 3f1b67cad472cc0ccbe1c90fed5fd73609a34bac..4814b4c1d72a2f069b45036bc51beccfc1b1940a 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -72,6 +72,7 @@ var dataSource = new Table.DataSource({ | expandIconAsCell | 设置展开 Icon 是否单独一列 | Boolean | | true | | onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | | | | loading | 页面是否加载中 | Boolean | | false | +| locale | 设置排序、过滤按钮的文字或 `title` | Object | | [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | ### Column