fix table style and local mode

components/table/demo/ajax.md

@@ -4,7 +4,7 @@
 
 远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
 
-此示例是静态数据模拟，数据可能不准确，请打开网络面板查看请求。
+**注意，此示例是静态数据模拟，数据并不准确，请打开网络面板查看请求。**
 
 ---
 

components/table/demo/basic.md

@@ -12,7 +12,7 @@ var columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="#">{text}</a>;
+    return <a href="javascript:;">{text}</a>;
   }
 }, {
   title: '年龄',
@@ -25,11 +25,11 @@ var columns = [{
   dataIndex: '',
   render: function(text, record) {
     return <span>
-      <a href="#">删除</a>
+      <a href="javascript:;">操作一</a>
       <span className="ant-divider">|</span>
-      <a href="#">操作</a>
+      <a href="javascript:;">操作二</a>
       <span className="ant-divider">|</span>
-      <a href="#" className="ant-dropdown-link">
+      <a href="javascript:;" className="ant-dropdown-link">
         更多 <i className="anticon anticon-down"></i>
       </a>
     </span>;

components/table/demo/head.md

@@ -24,6 +24,9 @@ var columns = [{
   // 这里是名字中第一个字是 value
   onFilter: function(value, record) {
     return record.name.indexOf(value) === 0;
+  },
+  sorter: function(a, b) {
+    return a.name.length - b.name.length;
   }
 }, {
   title: '年龄',
@@ -40,7 +43,7 @@ var columns = [{
 }];
 
 var data = [{
-  name: '胡彦斌',
+  name: '胡斌',
   age: 32,
   address: '西湖区湖底公园1号'
 }, {
@@ -51,6 +54,10 @@ var data = [{
   name: '李大嘴',
   age: 32,
   address: '西湖区湖底公园123号'
+}, {
+  name: '李秀莲大嘴哥',
+  age: 32,
+  address: '西湖区湖底公园123号'
 }];
 
 React.render(<Table columns={columns} dataSource={data} />

components/table/demo/paging.md

@@ -13,7 +13,7 @@ var columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="#">{text}</a>;
+    return <a href="javascript:;">{text}</a>;
   }
 }, {
   title: '年龄',

components/table/demo/row-selection.md

@@ -12,7 +12,7 @@ var columns = [{
   title: '姓名',
   dataIndex: 'name',
   render: function(text) {
-    return <a href="#">{text}</a>;
+    return <a href="javascript:;">{text}</a>;
   }
 }, {
   title: '年龄',

components/table/index.jsx

@@ -53,6 +53,7 @@ let AntTable = React.createClass({
   toggleSortOrder(order, column) {
     let sortColumn = this.state.sortColumn;
     let sortOrder = this.state.sortOrder;
+    let sorter;
     // 同时允许一列进行排序，否则会导致排序顺序的逻辑问题
     if (sortColumn) {
       sortColumn.className = '';
@@ -71,7 +72,7 @@ let AntTable = React.createClass({
       }
     }
     if (this.mode === 'local') {
-      let sorter = function() {
+      sorter = function() {
         let result = column.sorter.apply(this, arguments);
         if (sortOrder === 'ascend') {
           return result;
@@ -79,29 +80,29 @@ let AntTable = React.createClass({
           return -result;
         }
       };
-      if (sortOrder) {
-        this.props.dataSource = this.props.dataSource.sort(sorter);
-      } else {
-        this.props.dataSource = this.originDataSource.slice();
-      }
     }
     this.setState({
       sortOrder: sortOrder,
-      sortColumn: sortColumn
+      sortColumn: sortColumn,
+      sorter: sorter
     }, this.fetch);
   },
   handleFilter(column) {
+    let columnIndex = this.props.columns.indexOf(column);
+    let filterFns = [];
     if (this.mode === 'local') {
-      this.props.dataSource = this.originDataSource.slice().filter(function(record) {
+      filterFns[columnIndex] = function(record) {
         if (column.selectedFilters.length === 0) {
           return true;
         }
         return column.selectedFilters.some(function(value) {
           return column.onFilter.call(this, value, record);
         });
-      });
+      };
     }
-    this.fetch();
+    this.setState({
+      filterFns: filterFns
+    }, this.fetch);
   },
   handleSelect(rowIndex, e) {
     let checked = e.target.checked;
@@ -285,15 +286,33 @@ let AntTable = React.createClass({
         }
       });
     } else {
-      let pageSize = this.state.pagination.pageSize;
-      let current = this.state.pagination.current;
-      this.setState({
-        data: this.props.dataSource.filter(function(item, i) {
-          if (i >= (current - 1) * pageSize &&
-              i < current * pageSize) {
-            return item;
+      var data = this.props.dataSource;
+      var pageSize = this.state.pagination.pageSize;
+      var current = this.state.pagination.current;
+      // 排序
+      if (this.state.sortOrder && this.state.sorter) {
+        data = data.sort(this.state.sorter);
+      } else {
+        data = this.originDataSource.slice();
+      }
+      // 筛选
+      if (this.state.filterFns) {
+        this.state.filterFns.forEach(function(filterFn) {
+          if (typeof filterFn === 'function') {
+            data = data.filter(filterFn);
           }
-        })
+        });
+      }
+      // 分页
+      data = data.filter(function(item, i) {
+        if (i >= (current - 1) * pageSize &&
+            i < current * pageSize) {
+          return item;
+        }
+      });
+      // 完成数据
+      this.setState({
+        data: data
       });
     }
   },

style/components/table.less

@@ -22,7 +22,9 @@
     transition: background .3s ease;
 
     .anticon-bars {
-      margin-left: 8px;
+      margin-left: 4px;
+      position: relative;
+      top: -1px;
       font-size: ~"10px \9"; // ie8-9
       .scale(0.83);
       cursor: pointer;
@@ -35,6 +37,7 @@
 
     .@{tablePrefixClass}-filter-dropdown {
       min-width: 88px;
+      margin-left: -8px;
       .ant-dropdown-menu-item {
         overflow: hidden;
         padding: 7px 8px;
@@ -129,7 +132,7 @@
   }
 
   &-column-sorter {
-    margin-left: 8px;
+    margin-left: 4px;
     display: inline-block;
     width: 12px;
     height: 14px;