prepare getParams arguments, filters, pagination, sorters

components/table/demo/ajax.md

@@ -2,7 +2,7 @@
 
 - order: 7
 
-`dataSource="/api/data.json"`，列表数据是远程读取的，并有 loading 效果。
+远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
 
 ---
 
@@ -10,10 +10,18 @@
 var Table = antd.Table;
 var columns = [{
   title: '姓名',
-  dataIndex: 'name'
+  dataIndex: 'name',
+  filters: [{
+    text: '姓李的',
+    value: '李'
+  }, {
+    text: '姓胡的',
+    value: '胡'
+  }]
 }, {
   title: '年龄',
-  dataIndex: 'age'
+  dataIndex: 'age',
+  sorter: true
 }, {
   title: '住址',
   dataIndex: 'address'
@@ -34,6 +42,11 @@ var dataSource = {
       total: result.totalCount,
       pageSize: result.pageSize
     }
+  },
+  getParams: function(pagination, filters, sorters) {
+    let params = {};
+    console.log(pagination, filters, sorters);
+    return params;
   }
 };
 

components/table/index.jsx

@@ -40,7 +40,6 @@ let AntTable = React.createClass({
     return {
       selectedRowKeys: [],
       loading: false,
-      selectedFilters: [],
       pagination: pagination,
       data: []
     };
@@ -83,15 +82,16 @@ let AntTable = React.createClass({
     this.fetch();
   },
   handleFilter(column) {
-    this.props.dataSource = this.originDataSource.slice().filter(function(record) {
-      if (column.selectedFilters.length === 0) {
-        return true;
-      }
-      return column.selectedFilters.some(function(value) {
-        var result = column.onFilter.call(this, value, record);
-        return result;
+    if (this.mode === 'local') {
+      this.props.dataSource = this.originDataSource.slice().filter(function(record) {
+        if (column.selectedFilters.length === 0) {
+          return true;
+        }
+        return column.selectedFilters.some(function(value) {
+          return column.onFilter.call(this, value, record);
+        });
       });
-    });
+    }
     this.fetch();
   },
   handleSelectFilter(column, selected) {
@@ -231,6 +231,24 @@ let AntTable = React.createClass({
       onChange={this.handlePageChange}
       {...this.state.pagination} />;
   },
+  prepareParamsArguments() {
+    // 准备筛选、排序、分页的参数
+    let pagination;
+    let filters = {};
+    let sorters = {};
+    pagination = this.state.pagination;
+    this.props.columns.forEach(function(column) {
+      if (column.dataIndex && column.selectedFilters &&
+          column.selectedFilters.length > 0) {
+        filters[column.dataIndex] = column.selectedFilters;
+      }
+      if (column.dataIndex && column.sorter &&
+          column.sortOrder) {
+        sorters[column.dataIndex] = column.sortOrder;
+      }
+    });
+    return [pagination, filters, sorters];
+  },
   fetch: function() {
     let dataSource = this.props.dataSource;
     if (this.mode === 'remote') {
@@ -239,7 +257,7 @@ let AntTable = React.createClass({
       });
       jQuery.ajax({
         url: dataSource.url,
-        params: dataSource.getParams(),
+        params: dataSource.getParams.apply(this, this.prepareParamsArguments()),
         success: (result) => {
           if (this.isMounted()) {
             let pagination = jQuery.extend(