From 7ba8e08b5a815b4c9f8aac9262440ad8ad57d0ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=80=B8=E8=BE=BE?= <dqaria@gmail.com>
Date: Wed, 5 Aug 2015 01:42:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5Table=20=E8=BF=9C=E7=A8=8B?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81=E7=94=B1=E5=A4=96=E7=95=8C?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E8=AF=B7=E6=B1=82=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/table/demo/advance-ajax.md | 76 +++++++++++++++++++++++++++
 components/table/demo/nopagination.md |  2 +-
 components/table/index.jsx            | 34 +++++++++---
 3 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 components/table/demo/advance-ajax.md

diff --git a/components/table/demo/advance-ajax.md b/components/table/demo/advance-ajax.md
new file mode 100644
index 0000000000..23b432eeda
--- /dev/null
+++ b/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'));
+````
diff --git a/components/table/demo/nopagination.md b/components/table/demo/nopagination.md
index 1d11a40bbe..1feabbf1e3 100644
--- a/components/table/demo/nopagination.md
+++ b/components/table/demo/nopagination.md
@@ -1,6 +1,6 @@
 # 不显示分页
 
-- order: 8
+- order: 9
 
 传入 pagination 为 false 即可。
 
diff --git a/components/table/index.jsx b/components/table/index.jsx
index e271d88d35..47c6407859 100644
--- a/components/table/index.jsx
+++ b/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({
-      resolve: defaultResolve,
-      getParams: noop,
-      getPagination: noop
-    }, this.props.dataSource);
+    // 判断传入DataSource类型
+    var dataSource = this.props.dataSource;
+    if ( dataSource.constructor === DataSource ) {
+      // 当传入 dataSource Instance 时，对外部DataSource暴露fetch接口
+      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;
\ No newline at end of file