From c6889fa2599d3b4e31029022725c8e376d055280 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 12 Jul 2015 17:10:06 +0800
Subject: [PATCH] load datasource in table

---
 components/table/demo/ajax.md   | 14 ++++++++++++++
 components/table/demo/data.json | 13 +++++++++++++
 components/table/index.jsx      | 33 +++++++++++++++++++++++++++++++--
 style/components/table.less     |  5 +++++
 webpack.config.js               |  3 ++-
 5 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 components/table/demo/data.json

diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index 2ff7b3c384..8d21b53cf9 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -7,4 +7,18 @@
 ---
 
 ````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+
+React.render(<Table columns={columns} dataSource="/components/table/demo/data.json" />
+, document.getElementById('components-table-demo-ajax'));
 ````
diff --git a/components/table/demo/data.json b/components/table/demo/data.json
new file mode 100644
index 0000000000..7aae7b6825
--- /dev/null
+++ b/components/table/demo/data.json
@@ -0,0 +1,13 @@
+[{
+  "name": "胡彦斌ajax",
+  "age": 32,
+  "address": "西湖区湖底公园1号"
+}, {
+  "name": "胡彦祖ajax",
+  "age": 42,
+  "address": "西湖区湖底公园1号"
+}, {
+  "name": "李大嘴ajax",
+  "age": 32,
+  "address": "西湖区湖底公园1号"
+}]
diff --git a/components/table/index.jsx b/components/table/index.jsx
index b636d87230..b505189fc8 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -1,12 +1,15 @@
 'use strict';
 
 import React from 'react';
+import jQuery from 'jquery';
 import Table from 'rc-table';
 
 let AntTable = React.createClass({
   getInitialState() {
     return {
-      selectedRowKeys: []
+      selectedRowKeys: [],
+      loading: false,
+      data: []
     };
   },
   getDefaultProps() {
@@ -51,6 +54,32 @@ let AntTable = React.createClass({
     let checkbox = <input type="checkbox" checked={checked} onChange={this.handleSelect} />;
     return checkbox;
   },
+  loadData: function() {
+    if (this.props.dataSource) {
+      this.setState({
+        loading: true
+      });
+      jQuery.ajax({
+        url: this.props.dataSource,
+        success: (result) => {
+          result = result || [];
+          if (this.isMounted()) {
+            this.setState({
+              data: result
+            });
+          }
+        },
+        complete: () => {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+    }
+  },
+  componentDidMount() {
+    this.loadData();
+  },
   render() {
     if (this.props.rowSelection) {
       let checked = this.props.data.every(function(item, i) {
@@ -69,7 +98,7 @@ let AntTable = React.createClass({
         this.props.columns.unshift(selectionColumn);
       }
     }
-    return <Table {...this.props} />;
+    return <Table data={this.state.data} className={this.state.loading ? 'ant-table-loading' : ''} {...this.props} />;
   }
 });
 
diff --git a/style/components/table.less b/style/components/table.less
index 3d0790f6b9..906839ada3 100644
--- a/style/components/table.less
+++ b/style/components/table.less
@@ -35,4 +35,9 @@
   th, td {
     padding: 16px 8px;
   }
+
+  &-loading {
+    opacity: 0.7;
+    min-height: 150px;
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 3bce141149..0bd99851b4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,7 +21,8 @@ module.exports = {
   },
 
   externals: {
-    react: "React"
+    react: "React",
+    jquery: 'jQuery'
   },
 
   module: {