From d84337900837373f77bd94ea4e624af8dfd2a534 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 13 Jul 2015 16:22:02 +0800 Subject: [PATCH] finish sort function --- components/table/demo/ajax.md | 1 - components/table/demo/filter.md | 41 ++++++++++++++++++++ components/table/demo/sort.md | 56 +++++++++++++-------------- components/table/index.jsx | 68 ++++++++++++++++++++++++++++++--- style/components/table.less | 49 ++++++++++++++++++++++++ 5 files changed, 179 insertions(+), 36 deletions(-) create mode 100644 components/table/demo/filter.md diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 338680394..f762eb552 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -20,7 +20,6 @@ var columns = [{ }]; function resolve(result) { - console.log(this.loadData); return result.data; } diff --git a/components/table/demo/filter.md b/components/table/demo/filter.md new file mode 100644 index 000000000..76a326346 --- /dev/null +++ b/components/table/demo/filter.md @@ -0,0 +1,41 @@ +# 筛选 + +- order: 6 + +对某一列数据进行筛选。 + +--- + +````jsx +var Table = antd.Table; +var columns = [{ + title: '姓名', + dataIndex: 'name' +}, { + title: '年龄', + dataIndex: 'age', + filter: function() { + return [{ + text: '选项一', + value: 'value1' + }, { + text: '选项二', + value: 'value2' + }]; + }, + onFilter: function(key) { + console.log(key); + this.fetch(this.props.dataSource + '?age=' + key); + } +}, { + title: '地址', + dataIndex: 'address' +}]; + +function resolve(result) { + return result.data; +} + +React.render( +, document.getElementById('components-table-demo-filter')); +```` diff --git a/components/table/demo/sort.md b/components/table/demo/sort.md index 64ad1d2ef..d9e4abfbe 100644 --- a/components/table/demo/sort.md +++ b/components/table/demo/sort.md @@ -1,49 +1,45 @@ -# 排序和筛选 +# 排序 - order: 5 -按某一列对列表进行排序和筛选。 +对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。支持前台排序和后台排序，后台排序会发送请求。 + +`sorter: function(order) { ... }`， order 为排序方向：升序 `ascend`、降序 `descend` 或空字符串。 --- ````jsx var Table = antd.Table; var columns = [{ - title: '姓名', - dataIndex: 'name' + title: '姓名(后端排序)', + dataIndex: 'name', + sorter: function(order) { + this.fetch(this.props.dataSource + (order && '?sort=name&order=' + order)); + } }, { - title: '年龄', + title: '年龄(前端排序)', dataIndex: 'age', - filter: function() { - return [{ - text: '选项一' - value: 'value1' - }, { - text: '选项二' - value: 'value2' - }]; - }, - onFilter: function(item) { - this.props.dataSource += '?age=' + item.value; - this.loadData(); - }, - onSorter: function(a, b) { - return a > b; + sorter: function(order) { + if (!order) { + return; + } + this.state.data = this.state.data.sort(function(a, b) { + return (order === 'ascend') ? + (a.age - b.age) : (b.age - a.age); + }); + this.setState({ + data: this.state.data + }); } }, { title: '地址', dataIndex: 'address' }]; -var data = [{ - name: '胡彦斌', - age: 32, - address: '西湖区湖底公园1号' -}, { - name: '胡彦祖', - age: 42, - address: '西湖区湖底公园1号' -}]; -React.render(
+function resolve(result) { + return result.data; +} + +React.render(
, document.getElementById('components-table-demo-sort')); ```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 58164787c..d741e4a8c 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -3,6 +3,8 @@ import React from 'react'; import jQuery from 'jquery'; import Table from 'rc-table'; +import Menu from 'rc-menu'; +import Dropdown from '../dropdown'; let AntTable = React.createClass({ getInitialState() { @@ -20,6 +22,61 @@ let AntTable = React.createClass({ size: 'normal' }; }, + renderMenus(items) { + let menuItems = items.map((item) => { + return + {item.text} + ; + }); + return menuItems; + }, + toggleSortOrder(order, column) { + if (column.sortOrder === order) { + column.sortOrder = ''; + } else { + column.sortOrder = order; + } + if (column.sorter) { + column.sorter.call(this, column.sortOrder); + } + }, + renderColumnsDropdown() { + this.props.columns.forEach((column) => { + if (!column.originTitle) { + column.originTitle = column.title; + } + let filterDropdown, menus, sortButton; + if (column.filter) { + menus = + {this.renderMenus(column.filter())} + ; + filterDropdown = + + ; + } + if (column.sorter) { + sortButton =
+ + + + + + +
; + } + column.title = [ + column.originTitle, + sortButton, + filterDropdown + ]; + }); + }, handleSelect(e) { let checked = e.currentTarget.checked; let currentRowIndex = e.currentTarget.parentElement.parentElement.rowIndex; @@ -54,16 +111,17 @@ let AntTable = React.createClass({ let checkbox = ; return checkbox; }, - loadData: function() { + fetch: function(url) { this.props.resolve = this.props.resolve || function(data) { return data || []; }; - if (this.props.dataSource) { + let dataSource = url || this.props.dataSource; + if (dataSource) { this.setState({ loading: true }); jQuery.ajax({ - url: this.props.dataSource, + url: dataSource, success: (result) => { result = this.props.resolve.call(this, result); if (this.isMounted()) { @@ -81,7 +139,7 @@ let AntTable = React.createClass({ } }, componentDidMount() { - this.loadData(); + this.fetch(); }, render() { if (this.props.rowSelection) { @@ -109,7 +167,7 @@ let AntTable = React.createClass({ if (this.props.size === 'small') { classString += ' ant-table-small'; } - // 'message message-important message-read' + this.renderColumnsDropdown(); return
; diff --git a/style/components/table.less b/style/components/table.less index 745d991cd..9149fad55 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -19,6 +19,18 @@ background: @table-head-background-color; text-align: left; font-weight: bold; + + .anticon-bars { + margin-left: 8px; + font-size: ~"10px \9"; // ie8-9 + .scale(0.83); + cursor: pointer; + color: #aaa; + transition: all 0.3s ease; + &:hover { + color: #666; + } + } } td { @@ -57,4 +69,41 @@ border-bottom: 0; } } + + &-column-sorter { + margin-left: 8px; + display: inline-block; + width: 12px; + height: 14px; + vertical-align: middle; + text-align: center; + cursor: pointer; + &-up, + &-down { + line-height: 6px; + height: 6px; + display: block; + width: 12px; + &.on { + .anticon-caret-up, + .anticon-caret-down { + color: @primary-color; + } + } + } + .anticon-caret-up, + .anticon-caret-down { + font-size: ~"6px \9"; // ie8-9 + .scale(0.5); + line-height: 6px; + height: 6px; + color: #aaa; + &:hover { + color: #666; + } + &:before { + -moz-transform-origin: 53% 50%; /* fix firefox position */ + } + } + } }