From 7ba8e08b5a815b4c9f8aac9262440ad8ad57d0ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=B8=E8=BE=BE?= Date: Wed, 5 Aug 2015 01:42:37 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=8A=A0=E5=85=A5Table=20=E8=BF=9C?= =?UTF-8?q?=E7=A8=8B=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81=E7=94=B1=E5=A4=96?= =?UTF-8?q?=E7=95=8C=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( +, 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({ ; } }); + +AntTable.DataSource = DataSource; + +export default AntTable; \ No newline at end of file From b97d01f288770f1e5332ea26e084b314eaed47c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=B8=E8=BE=BE?= Date: Wed, 5 Aug 2015 01:44:21 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E9=81=B5=E5=BE=AA=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E8=A6=81=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/table/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 47c6407859..827576b856 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -17,7 +17,7 @@ function defaultResolve(data) { class DataSource { constructor(config) { - this.url = config.url || ""; + this.url = config.url || ''; this.resolve = config.resolve || defaultResolve; this.getParams = config.getParams || noop; this.getPagination = config.getPagination || noop; @@ -471,4 +471,4 @@ var AntTable = React.createClass({ AntTable.DataSource = DataSource; -export default AntTable; \ No newline at end of file +export default AntTable;