diff --git a/docs/renderers/Table.md b/docs/renderers/Table.md index 6f19c1e23..0ef408792 100644 --- a/docs/renderers/Table.md +++ b/docs/renderers/Table.md @@ -1,6 +1,6 @@ ## Table -表格展示。 +表格展示，不负责拉取数据，所以你需要配置 source 用来关联数据，一般需要搭配其他具备获取接口数据能力的渲染器一起使用，比如: Page 的 initApi 或者 Service 的 api。有了数据后，配置 columns 就能完成渲染了。 | 属性名 | 类型 | 默认值 | 说明 | | ---------------- | ----------------------------- | ------------------------- | ------------------------------------------------------- | @@ -24,44 +24,570 @@ "api": "/api/sample?perPage=5", "body": [ { - "type": "panel", - "title": "简单表格示例1", - "body": { - "type": "table", - "source": "$rows", - "columns": [ - { - "name": "engine", - "label": "Engine" - }, + "type": "table", + "title": "表格1", + "source": "$rows", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, - { - "name": "version", - "label": "Version" - } - ] - } + { + "name": "version", + "label": "Version" + } + ] }, { - "type": "panel", - "title": "简单表格示例2", - "body": { - "type": "table", - "source": "$rows", - "columns": [ - { - "name": "engine", - "label": "Engine" - }, + "type": "table", + "source": "$rows", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, - { - "name": "version", - "label": "Version" - } - ] - } + { + "name": "version", + "label": "Version" + } + ] } ] } ``` + +### 列开关 + +默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个栗子中 ID 这一栏。 + +```schema:height="330" scope="body" +{ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version" + }, + + { + "name": "browser", + "label": "Browser" + }, + + { + "name": "id", + "label": "ID", + "toggled": false + }, + + { + "name": "platform", + "label": "Platform" + } + ] + } + ] +} +``` + +### 嵌套 + +当行数据中存在 children 属性时，可以自动嵌套显示下去。示例：https://baidu.github.io/amis/crud/nested?page=1 + +```schema:height="400" scope="body" +{ + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 1002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 2001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 3001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 3002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 4001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 4002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id": 5, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 5001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 5002 + } + ] + } + ] + }, + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columnsTogglable": false, + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version" + }, + + { + "name": "browser", + "label": "Browser" + }, + + { + "name": "id", + "label": "ID" + }, + + { + "name": "platform", + "label": "Platform" + } + ] + } + ] +} +``` + +### 底部展示 (Footable) + +列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 `footable` 属性，同时将想在底部展示的列加个 `breakpoint` 属性为 `*` 即可。 + +示例：https://baidu.github.io/amis/crud/footable?page=1 + +```schema:height="400" scope="body" +{ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columnsTogglable": false, + "footable": true, + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version", + "breakpoint": "*" + }, + + { + "name": "browser", + "label": "Browser", + "breakpoint": "*" + }, + + { + "name": "id", + "label": "ID", + "breakpoint": "*" + }, + + { + "name": "platform", + "label": "Platform", + "breakpoint": "*" + } + ] + } + ] +} +``` + +默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。 + +```json +{ + "footable": { + "expand": "first" + } +} +``` + +当配置成 `all` 时表示全部展开。 + + +### 合并单元格 + +只需要配置 `combineNum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。 + +示例：https://baidu.github.io/amis/crud/merge-cell + +```schema:height="500" scope="body" +{ + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.2", + "platform": "Win 95+", + "version": "4", + "grade": "A" + }, + { + "engine": "Trident", + "browser": "Internet Explorer 4.2", + "platform": "Win 95+", + "version": "4", + "grade": "B" + }, + { + "engine": "Trident", + "browser": "AOL browser (AOL desktop)", + "platform": "Win 95+", + "version": "4", + "grade": "C" + }, + { + "engine": "Trident", + "browser": "AOL browser (AOL desktop)", + "platform": "Win 98", + "version": "3", + "grade": "A" + }, + { + "engine": "Trident", + "browser": "AOL browser (AOL desktop)", + "platform": "Win 98", + "version": "4", + "grade": "A" + }, + { + "engine": "Gecko", + "browser": "Firefox 1.0", + "platform": "Win 98+ / OSX.2+", + "version": "4", + "grade": "A" + }, + { + "engine": "Gecko", + "browser": "Firefox 1.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "A" + }, + { + "engine": "Gecko", + "browser": "Firefox 2.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "B" + }, + { + "engine": "Gecko", + "browser": "Firefox 2.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "C" + }, + { + "engine": "Gecko", + "browser": "Firefox 2.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "D" + } + ] + }, + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "combineNum": 3, + "columnsTogglable": false, + "columns": [ + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] + } + ] +} +``` + +### 超级表头 + +超级表头意思是，表头还可以再一次进行分组。额外添加个 `groupName` 属性即可。 + +示例：https://baidu.github.io/amis/crud/header-group + +```schema:height="430" scope="body" +{ + "type": "service", + "api": "/api/sample?perPage=5", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columns": [ + { + "name": "engine", + "label": "Engine", + "groupName": "分组1" + }, + + { + "name": "grade", + "label": "Grade", + "groupName": "分组1" + }, + + { + "name": "version", + "label": "Version", + "groupName": "分组2" + }, + + { + "name": "browser", + "label": "Browser", + "groupName": "分组2" + }, + + { + "name": "id", + "label": "ID", + "toggled": false, + "groupName": "分组2" + }, + + { + "name": "platform", + "label": "Platform", + "groupName": "分组2" + } + ] + } + ] +} +``` + +### 固定列 + +列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 `fixed` 属性，配置 `left` 或者 `right`。 + +示例：https://baidu.github.io/amis/crud/fixed + +```schema:height="530" scope="body" +{ + "type": "service", + "api": "/api/sample?perPage=5", + "className": "w-xxl", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columnsTogglable": false, + "columns": [ + { + "name": "engine", + "label": "Engine", + "fixed": "left" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version" + }, + + { + "name": "browser", + "label": "Browser" + }, + + { + "name": "id", + "label": "ID" + }, + + { + "name": "platform", + "label": "Platform", + "fixed": "right" + } + ] + } + ] +} +``` \ No newline at end of file