Merge branch 'master' of github.com:ant-design/ant-design

CHANGELOG.md

@@ -18,6 +18,7 @@
 
 ### Table
 
+* 新增可展开的 table。[#258](https://github.com/ant-design/ant-design/pull/258)
 * 新增无数据的展示样式。[4c54644](https://github.com/ant-design/ant-design/commit/4c54644116d46cb2510d2d475234529bad60e5d5)
 * 修复本地模式 `dataSource` 无法更新的问题。[6d2dcc4](https://github.com/ant-design/ant-design/commit/6d2dcc45393b6ec0ad1ba73caf8b1ec42353743f)
 * 修复远程模式 loading 失效的问题。[9b8abb2](https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf)

components/table/demo/ajax.md

@@ -1,6 +1,6 @@
 # 动态加载数据
 
-- order: 7
+- order: 4
 
 远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
 

components/table/demo/bordered.md

@@ -1,6 +1,6 @@
 # 边框
 
-- order: 11
+- order: 7
 
 添加表格边框线，`bordered={true}`。
 

components/table/demo/expand.md

@@ -0,0 +1,39 @@
+# 可展开
+
+- order: 9
+
+当表格内容较多不能一次性完全展示时。
+
+---
+
+````jsx
+var Table = antd.Table;
+
+function renderAction() {
+  return <a href="javascript:;">删除</a>;
+}
+
+function expandedRowRender(record) {
+  return <p>{record.description}</p>;
+}
+
+var columns = [
+  {title: '姓名', dataIndex: 'name', key: 'name'},
+  {title: '年龄', dataIndex: 'age', key: 'age'},
+  {title: '住址', dataIndex: 'address', key: 'address'},
+  {title: '操作', dataIndex: '', key: 'x', render: renderAction}
+];
+
+var data = [
+  {name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌，今年32岁，住在西湖区湖底公园1号。'},
+  {name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖，今年42岁，住在西湖区湖底公园2号。'},
+  {name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴，今年32岁，住在西湖区湖底公园3号。'}
+];
+
+React.render(
+<Table columns={columns}
+  expandedRowRender={expandedRowRender}
+  dataSource={data}
+  className="table" />
+, document.getElementById('components-table-demo-expand'));
+````

components/table/demo/local-data.md

@@ -1,6 +1,6 @@
 # 外界控制数据
 
-- order: 11
+- order: 8
 
 由父元素控制自身数据展示。
 

components/table/demo/nopagination.md

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

components/table/demo/small.md

@@ -1,6 +1,6 @@
 # 小型列表
 
-- order: 10
+- order: 6
 
 `size="small"`, 用在对话框等空间较小的地方。
 

components/table/index.jsx

@@ -457,6 +457,7 @@ let AntTable = React.createClass({
     let data = this.getCurrentPageData();
     let columns = this.renderRowSelection();
     let classString = '';
+    let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
     if (this.state.loading && !this.isLocalDataSource()) {
       classString += ' ant-table-loading';
     }
@@ -483,6 +484,7 @@ let AntTable = React.createClass({
         data={data}
         columns={columns}
         className={classString}
+        expandIconAsCell={expandIconAsCell}
         />
       {emptyText}
       {this.renderPagination()}

components/table/index.md

@@ -63,10 +63,11 @@ var dataSource = new Table.DataSource({
 |---------------|--------------------------|-----------------|---------------------|---------|
 | rowSelection  | 列表项是否可选择         | Object          |                     | false   |
 | pagination    | 分页器                   | Object   | 配置项参考 [pagination](/components/pagination)，设为 false 时不显示分页 |         |
-| size          | 正常或迷你类型           | string          | `normal` or `small` | normal  |
+| size          | 正常或迷你类型           | String          | `normal` or `small` | normal  |
 | dataSource    | 数据源，可以为数组（本地模式）或一个数据源描述对象（远程模式） | Array or Object |                     |         |
 | columns       | 表格列的配置描述，具体项见下表 | Array |                     |    无    |
 | rowKey        | 表格列 key 的取值 | Function(recode,index):string |                     |    record.key    |
+| expandIconAsCell  | 设置展开 Icon 是否单独一列 | Boolean |                     |    true    |
 
 ### Column
 

package.json

@@ -54,7 +54,7 @@
     "rc-slider": "~1.4.0",
     "rc-steps": "~1.2.3",
     "rc-switch": "~1.2.0",
-    "rc-table": "~3.1.0",
+    "rc-table": "~3.2.0",
     "rc-tabs": "~5.3.2",
     "rc-tooltip": "~2.6.4",
     "rc-tree": "~0.15.4",

style/components/table.less

@@ -1,4 +1,5 @@
 @import "../mixins/index";
+
 @table-prefix-cls: ~"@{css-prefix}table";
 @table-border-color: #e9e9e9;
 @table-head-background-color: #f3f3f3;
@@ -84,7 +85,7 @@
       position: absolute;
       display: inline-block;
       .animation(loadingCircle 1.5s infinite linear);
-      content:"\e610";
+      content: "\e610";
       top: 50%;
       left: 50%;
       margin-top: -10px;
@@ -229,3 +230,30 @@
     }
   }
 }
+
+.@{table-prefix-cls} {
+  &-row, &-expanded-row {
+    &-expand-icon {
+      cursor: pointer;
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      text-align: center;
+      line-height: 16px;
+      border: 1px solid #E9E9E9;
+      -webkit-user-select: none;
+      user-select: none;
+      &-cell {
+        width: 18px;
+      }
+    }
+
+    &-expanded:after {
+      content: '-'
+    }
+
+    &-collapsed:after {
+      content: '+'
+    }
+  }
+}