Merge pull request #404 from ant-design/feature-table-onchange

Add onChange prop to Table, fix #395

components/table/demo/head.md

@@ -64,6 +64,11 @@ var data = [{
   address: '西湖区湖底公园123号'
 }];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} />
+function onChange(pagination, filters, sorter) {
+  // 点击分页、筛选、排序时触发
+  console.log('各类参数是', pagination, filters, sorter);
+}
+
+ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />
 , document.getElementById('components-table-demo-head'));
 ````

components/table/index.jsx

@@ -65,7 +65,8 @@ let AntTable = React.createClass({
       useFixedHeader: false,
       rowSelection: null,
       size: 'normal',
-      bordered: false
+      bordered: false,
+      onChange: function() {}
     };
   },
 
@@ -153,21 +154,25 @@ let AntTable = React.createClass({
         }
       };
     }
-    this.fetch({
-      sortOrder: sortOrder,
-      sortColumn: sortColumn,
-      sorter: sorter
-    });
+    const newState = {
+      sortOrder,
+      sortColumn,
+      sorter
+    };
+    this.fetch(newState);
+    this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
   },
 
   handleFilter(column, filters) {
     filters = objectAssign({}, this.state.filters, {
       [this.getColumnKey(column)]: filters
     });
-    this.fetch({
+    const newState = {
       selectedRowKeys: [],
-      filters: filters
-    });
+      filters
+    };
+    this.fetch(newState);
+    this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
   },
 
   handleSelect(record, rowIndex, e) {
@@ -251,11 +256,13 @@ let AntTable = React.createClass({
     } else {
       pagination.current = pagination.current || 1;
     }
-    this.fetch({
+    const newState = {
       // 防止内存泄漏，只维持当页
       selectedRowKeys: [],
-      pagination: pagination
-    });
+      pagination
+    };
+    this.fetch(newState);
+    this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
   },
 
   onRadioChange: function (ev) {

components/table/index.md

@@ -66,8 +66,9 @@ var dataSource = new Table.DataSource({
 | size          | 正常或迷你类型           | String          | `normal` or `small` | normal  |
 | dataSource    | 数据源，可以为数组（本地模式）或一个数据源描述对象（远程模式） | Array or Object |                     |         |
 | columns       | 表格列的配置描述，具体项见下表 | Array |                     |    无    |
-| rowKey        | 表格列 key 的取值 | Function(recode,index):string |                     |    record.key    |
+| rowKey        | 表格列 key 的取值 | Function(recode, index):string |                     |    record.key    |
 | expandIconAsCell  | 设置展开 Icon 是否单独一列 | Boolean |                     |    true    |
+| onChange      | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) |                     |       |
 
 ### Column