Browse Source

docs: fix table demo format

pull/2731/head
Benjy Cui 8 years ago
parent
commit
63941ae665
  1. 12
      components/table/demo/ajax.md
  2. 8
      components/table/demo/basic.md
  3. 8
      components/table/demo/bordered.md
  4. 12
      components/table/demo/colspan-rowspan.md
  5. 12
      components/table/demo/expand-children.md
  6. 8
      components/table/demo/expand.md
  7. 16
      components/table/demo/fixed-columns-header.md
  8. 16
      components/table/demo/fixed-columns.md
  9. 12
      components/table/demo/fixed-header.md
  10. 12
      components/table/demo/head.md
  11. 8
      components/table/demo/loading.md
  12. 8
      components/table/demo/nopagination.md
  13. 8
      components/table/demo/paging-columns.md
  14. 8
      components/table/demo/paging.md
  15. 20
      components/table/demo/reset-filter.md
  16. 7
      components/table/demo/row-selection-and-operation.md
  17. 8
      components/table/demo/row-selection-props.md
  18. 8
      components/table/demo/row-selection.md
  19. 8
      components/table/demo/size.md

12
components/table/demo/ajax.md

@ -5,12 +5,6 @@ title:
zh-CN: 远程加载数据
---
## en-US
This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
**Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
## zh-CN
这个例子通过简单的 ajax 读取方式,演示了如何从服务端读取并展现数据,具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
@ -19,6 +13,12 @@ This example shows how to fetch and present data from remote server, and how to
**注意,此示例使用 [模拟接口](https://randomuser.me),展示数据可能不准确,请打开网络面板查看请求。**
## en-US
This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
**Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
````jsx
import { Table } from 'antd';
import reqwest from 'reqwest';

8
components/table/demo/basic.md

@ -5,14 +5,14 @@ title:
zh-CN: 基本用法
---
## en-US
Simple table with operations.
## zh-CN
简单的表格,最后一列是各种操作。
## en-US
Simple table with operations.
````jsx
import { Table, Icon } from 'antd';

8
components/table/demo/bordered.md

@ -5,14 +5,14 @@ title:
zh-CN: 基本用法
---
## en-US
Add border, title and footer for table.
## zh-CN
添加表格边框线,页头和页脚。
## en-US
Add border, title and footer for table.
````jsx
import { Table } from 'antd';

12
components/table/demo/colspan-rowspan.md

@ -5,18 +5,18 @@ title:
zh-CN: 表格行/列合并
---
## en-US
Table column title supports `colSpan` that set in `column`.
Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered.
## zh-CN
表头只支持列合并,使用 column 里的 colSpan 进行设置。
表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。
## en-US
Table column title supports `colSpan` that set in `column`.
Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered.
````jsx
import { Table } from 'antd';

12
components/table/demo/expand-children.md

@ -5,18 +5,18 @@ title:
zh-CN: 树形数据展示
---
## en-US
Display tree structure data in Table, control the indent width by setting `indentSize`.
> Note, no support for recursive selection of tree structure data table yet.
## zh-CN
表格支持树形数据的展示,可以通过设置 `indentSize` 以控制每一层的缩进宽度。
> 注:暂不支持父子数据递归关联选择。
## en-US
Display tree structure data in Table, control the indent width by setting `indentSize`.
> Note, no support for recursive selection of tree structure data table yet.
````jsx
import { Table } from 'antd';

8
components/table/demo/expand.md

@ -5,13 +5,13 @@ title:
zh-CN: 可展开
---
## en-US
## zh-CN
When there's too much information to show and the table can't display all at once.
当表格内容较多不能一次性完全展示时。
# zh-CN
## en-US
当表格内容较多不能一次性完全展示时。
When there's too much information to show and the table can't display all at once.
````jsx
import { Table } from 'antd';

16
components/table/demo/fixed-columns-header.md

@ -5,21 +5,21 @@ title:
zh-CN: 固定头和列
---
## en-US
## zh-CN
Suitable for large amounts of data with long columns.
适合同时展示有大量数据和数据列。
> Specify the width of each column if header and cell do not align properly.
> 若列头与内容不对齐,请指定每列宽度 `width`
> A fixed width for `scroll.x` is recommended.
> 建议指定 scroll.x 为固定宽度。
# zh-CN
## en-US
适合同时展示有大量数据和数据列。
Suitable for large amounts of data with long columns.
> 若列头与内容不对齐,请指定每列宽度 `width`
> Specify the width of each column if header and cell do not align properly.
> 建议指定 scroll.x 为固定宽度。
> A fixed width for `scroll.x` is recommended.
````jsx
import { Table } from 'antd';

16
components/table/demo/fixed-columns.md

@ -5,21 +5,21 @@ title:
zh-CN: 固定列
---
## en-US
## zh-CN
Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile.
对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 `scroll.x` 配合使用。
> Specify the width of each column if header and cell do not align properly.
> 若列头与内容不对齐,请指定每列宽度 `width`
> A fixed width for `scroll.x` is recommended.
> 建议指定 scroll.x 为固定宽度。
# zh-CN
## en-US
对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 `scroll.x` 配合使用。
Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile.
> 若列头与内容不对齐,请指定每列宽度 `width`
> Specify the width of each column if header and cell do not align properly.
> 建议指定 scroll.x 为固定宽度。
> A fixed width for `scroll.x` is recommended.
````jsx
import { Table } from 'antd';

12
components/table/demo/fixed-header.md

@ -5,17 +5,17 @@ title:
zh-CN: 固定表头
---
## en-US
## zh-CN
Display large amounts of data in scrollable view.
方便一页内展示大量数据。
> Specify the width of each column if header and cell do not align properly.
需要指定 column 的 `width` 属性,否则列头和内容可能不对齐。
# zh-CN
## en-US
方便一页内展示大量数据。
Display large amounts of data in scrollable view.
需要指定 column 的 `width` 属性,否则列头和内容可能不对齐。
> Specify the width of each column if header and cell do not align properly.
````jsx
import { Table } from 'antd';

12
components/table/demo/head.md

@ -5,17 +5,17 @@ title:
zh-CN: 筛选和排序
---
## en-US
## zh-CN
Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
对某一列数据进行筛选,使用列的 `filters` 属性来指定需要筛选菜单的列,`onFilter` 用于筛选当前数据,`filterMultiple` 用于指定多选和单选。
Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally.
对某一列数据进行排序,通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`, a、b 为比较的两个列数据。
# zh-CN
## en-US
对某一列数据进行筛选,使用列的 `filters` 属性来指定需要筛选菜单的列,`onFilter` 用于筛选当前数据,`filterMultiple` 用于指定多选和单选。
Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
对某一列数据进行排序,通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`, a、b 为比较的两个列数据。
Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally.
````jsx
import { Table } from 'antd';

8
components/table/demo/loading.md

@ -5,13 +5,13 @@ title:
zh-CN: 加载中的表格
---
## en-US
## zh-CN
Controll loading states by `loading` property.
用属性 `loading` 控制表格加载中状态。
# zh-CN
## en-US
用属性 `loading` 控制表格加载中状态。
Controll loading states by `loading` property.
````jsx
import { Table, Button } from 'antd';

8
components/table/demo/nopagination.md

@ -5,13 +5,13 @@ title:
zh-CN: 不显示分页
---
## en-US
## zh-CN
Set `pagination={false}`, then no data paging and pagination will be shown.
传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据,不进行任何分页。
# zh-CN
## en-US
传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据,不进行任何分页。
Set `pagination={false}`, then no data paging and pagination will be shown.
````jsx
import { Table } from 'antd';

8
components/table/demo/paging-columns.md

@ -6,13 +6,13 @@ title:
zh-CN: 列分页
---
## en-US
## zh-CN
You can split long columns to switchable views.
对于列数很多的数据,可以进行横向的分页,通过切换符切换当前展现的列。
# zh-CN
## en-US
对于列数很多的数据,可以进行横向的分页,通过切换符切换当前展现的列。
You can split long columns to switchable views.
````jsx
import { Table } from 'antd';

8
components/table/demo/paging.md

@ -5,13 +5,13 @@ title:
zh-CN: 分页
---
## en-US
## zh-CN
when use pagination in table.
数据项较多时显示分页。
# zh-CN
## en-US
数据项较多时显示分页。
when use pagination in table.
````jsx
import { Table } from 'antd';

20
components/table/demo/reset-filter.md

@ -5,25 +5,25 @@ title:
zh-CN: 可控的筛选和排序
---
## en-US
## zh-CN
Controll filters and sorters by `fileredValue` and `sortOrder`.
使用受控属性对筛选和排序状态进行控制。
> 1. Defining `fileredValue` or `sortOrder` means that it is in the controlled mode.
> 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。
> 2. Make sure `sortOrder` is assigned for only one column.
> 2. 只支持同时对一列进行排序,请保证只有一列的 sortOrder 属性是生效的。
> 3. `column.key` is required.
> 3. 务必指定 `column.key`
# zh-CN
## en-US
使用受控属性对筛选和排序状态进行控制。
Controll filters and sorters by `fileredValue` and `sortOrder`.
> 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。
> 1. Defining `fileredValue` or `sortOrder` means that it is in the controlled mode.
> 2. 只支持同时对一列进行排序,请保证只有一列的 sortOrder 属性是生效的。
> 2. Make sure `sortOrder` is assigned for only one column.
> 3. 务必指定 `column.key`
> 3. `column.key` is required.
````jsx
import { Table } from 'antd';

7
components/table/demo/row-selection-and-operation.md

@ -5,13 +5,14 @@ title:
zh-CN: 选择和操作
---
## zh-CN
选择后进行操作,完成后清空选择,通过 `rowSelection.selectedRowKeys` 来控制选中项。
## en-US
To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
# zh-CN
选择后进行操作,完成后清空选择,通过 `rowSelection.selectedRowKeys` 来控制选中项。
````jsx
import { Table, Button } from 'antd';

8
components/table/demo/row-selection-props.md

@ -5,13 +5,13 @@ title:
zh-CN: 选择框属性
---
## en-US
## zh-CN
Set props to Checkbox or Radio.
配置选择框的默认属性。
# zh-CN
## en-US
配置选择框的默认属性。
Set props to Checkbox or Radio.
````jsx
import { Table } from 'antd';

8
components/table/demo/row-selection.md

@ -5,13 +5,13 @@ title:
zh-CN: 可选择
---
## en-US
## zh-CN
Rows can be selectable by making fisrt column as a selectable column.
第一列是联动的选择框。
# zh-CN
## en-US
第一列是联动的选择框。
Rows can be selectable by making fisrt column as a selectable column.
````jsx
import { Table } from 'antd';

8
components/table/demo/size.md

@ -5,13 +5,13 @@ title:
zh-CN: 紧凑型
---
## en-US
## zh-CN
Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
两种紧凑型的列表,小型列表只用于对话框内。
# zh-CN
## en-US
两种紧凑型的列表,小型列表只用于对话框内。
Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
````jsx
import { Table } from 'antd';

Loading…
Cancel
Save