加入Table 远程模式支持由外界发起请求方法

components/table/demo/advance-ajax.md

@@ -0,0 +1,76 @@
+# 外界触发表格刷新
+
+- order: 8
+
+查询页面大量使用表格，当删除某条目后需要刷新。可直接传入DataSource实例，然后调用其fetch方法刷新表格。
+
+**注意，请打开console调试fetch方法**
+
+---
+
+````jsx
+var Table = antd.Table;
+var DataSource = Table.DataSource;
+
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  filters: [{
+    text: '姓李的',
+    value: '李'
+  }, {
+    text: '姓胡的',
+    value: '胡'
+  }]
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  sorter: true
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+
+function resolve(result) {
+  return result.data;
+}
+
+var dataSource = new DataSource({
+  url: "/components/table/demo/data.json",
+  resolve: function(result) {
+    return result.data;
+  },
+  // 和后台接口返回的分页数据进行适配
+  getPagination: function(result) {
+    return {
+      total: result.totalCount,
+      pageSize: result.pageSize
+    }
+  },
+  // 和后台接口接收的参数进行适配
+  // 参数里提供了分页、筛选、排序的信息
+  getParams: function(pagination, filters, sorter) {
+    console.log('getParams 的参数是：', pagination, filters, sorter);
+    var params = {
+      pageSize: pagination.pageSize,
+      currentPage: pagination.current,
+      sortField: sorter.field,
+      sortOrder: sorter.order
+    };
+    for (let key in filters) {
+      params[key] = filters[key];
+    }
+    console.log('请求参数：', params);
+    return params;
+  }
+});
+
+// 可供外部调用fetch接口刷新表格
+dataSource.fetch();
+
+// 请打开console调试fetch方法
+window.dataSource = dataSource;
+
+React.render(<Table columns={columns} dataSource={dataSource} />
+, document.getElementById('components-table-demo-advance-ajax'));
+````

components/table/demo/nopagination.md

@@ -1,6 +1,6 @@
 # 不显示分页
 
-- order: 8
+- order: 9
 
 传入 pagination 为 false 即可。
 

components/table/index.jsx

@@ -15,7 +15,17 @@ function defaultResolve(data) {
   return data || [];
 }
 
-export default React.createClass({
+class DataSource {
+  constructor(config) {
+    this.url = config.url || "";
+    this.resolve = config.resolve || defaultResolve;
+    this.getParams = config.getParams || noop;
+    this.getPagination = config.getPagination || noop;
+    this.fetch = noop;
+  }
+}
+
+var AntTable = React.createClass({
   getInitialState() {
     return {
       // 减少状态
@@ -75,11 +85,19 @@ export default React.createClass({
   },
 
   getRemoteDataSource() {
-    return objectAssign({
+    // 判断传入DataSource类型
-      resolve: defaultResolve,
+    var dataSource = this.props.dataSource;
-      getParams: noop,
+    if ( dataSource.constructor === DataSource ) {
-      getPagination: noop
+      // 当传入 dataSource Instance 时，对外部DataSource暴露fetch接口
-    }, this.props.dataSource);
+      dataSource.fetch = this.fetch;
+      return dataSource;
+    } else {
+      return objectAssign({
+        resolve: defaultResolve,
+        getParams: noop,
+        getPagination: noop
+      }, this.props.dataSource);
+    }
   },
 
   toggleSortOrder(order, column) {
@@ -450,3 +468,7 @@ export default React.createClass({
     </div>;
   }
 });
+
+AntTable.DataSource = DataSource;
+
+export default AntTable;