finish sort function

components/table/demo/ajax.md

@@ -20,7 +20,6 @@ var columns = [{
 }];
 
 function resolve(result) {
-  console.log(this.loadData);
   return result.data;
 }
 

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(<Table columns={columns} dataSource="/components/table/demo/data.json" resolve={resolve} />
+, document.getElementById('components-table-demo-filter'));
+````

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(<Table columns={columns} data={data} />
+function resolve(result) {
+  return result.data;
+}
+
+React.render(<Table columns={columns} dataSource="/components/table/demo/data.json" resolve={resolve} />
 , document.getElementById('components-table-demo-sort'));
 ````

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 <Menu.Item key={item.value}>
+        {item.text}
+      </Menu.Item>;
+    });
+    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 = <Menu multiple={true} onSelect={column.onFilter.bind(this)}>
+          {this.renderMenus(column.filter())}
+        </Menu>;
+        filterDropdown = <Dropdown trigger="click" closeOnSelect={false} overlay={menus}>
+          <i className="anticon anticon-bars"></i>
+        </Dropdown>;
+      }
+      if (column.sorter) {
+        sortButton = <div className="ant-table-column-sorter">
+          <span className={'ant-table-column-sorter-up ' +
+                           (column.sortOrder === 'ascend' ? 'on' : 'off')}
+            title="升序排序"
+            onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
+            <i className="anticon anticon-caret-up"></i>
+          </span>
+          <span className={'ant-table-column-sorter-down ' +
+                           (column.sortOrder === 'descend' ? 'on' : 'off')}
+            title="降序排序"
+            onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
+            <i className="anticon anticon-caret-down"></i>
+          </span>
+        </div>;
+      }
+      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 = <input type="checkbox" checked={checked} onChange={this.handleSelect} />;
     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 <Table data={this.state.data}
       className={classString}
       {...this.props} />;

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 */
+      }
+    }
+  }
 }