添加 Transfer 的相关文档

This commit is contained in:
2betop 2020-05-27 15:35:30 +08:00
parent 94dfac07d7
commit 068fce75f0
4 changed files with 373 additions and 111 deletions

View File

@ -2,97 +2,99 @@
title: 渲染器手册
---
amis 页面是通过 JSON 配置出来的,是由一个一个渲染模型组成的,掌握他们规则,就能灵活配置出各种页面。
amis 页面是通过 JSON 配置出来的,是由一个一个渲染模型组成的,掌握他们规则,就能灵活配置出各种页面。
开始之前,请您一定要先阅读[基本用法](./basic.md)。
- [Definitions](./renderers/Definitions.md): 建立当前页面公共的配置项
- [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出
- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器
- [Form](./renderers/Form/Form.md): 表单渲染器
- [FormItem](./renderers/Form/FormItem.md): Form 中主要是由各种 FormItem 组成
- [List](./renderers/Form/List.md): 简单的列表选择框
- [Button-Group](./renderers/Form/Button-Group.md): 按钮集合
- [Service](./renderers/Form/Service.md): 动态配置,配置项由接口决定
- [Tabs](./renderers/Form/Tabs.md): 多个输入框通过选项卡来分组
- [Table](./renderers/Form/Table.md): 可以用来展示数组类型的数据
- [HBox](./renderers/Form/HBox.md): 支持 form 内部再用 HBox 布局
- [Grid](./renderers/Form/Grid.md): 支持 form 内部再用 grid 布局
- [Panel](./renderers/Form/Panel.md): 还是为了布局,可以把一部分 FormItem 合并到一个 panel 里面单独展示
- [Hidden](./renderers/Form/Hidden.md): 隐藏字段类型
- [Text](./renderers/Form/Text.md): 普通的文本输入框
- [Textarea](./renderers/Form/Textarea.md): 多行文本输入框
- [Url](./renderers/Form/Url.md): URL 输入框
- [Email](./renderers/Form/Email.md): Email 输入框
- [Password](./renderers/Form/Password.md): 密码输入框
- [Number](./renderers/Form/Number.md): 数字输入框
- [Tag](./renderers/Form/Tag.md): 标签输入框
- [Select](./renderers/Form/Select.md): 选项表单
- [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉
- [Checkbox](./renderers/Form/Checkbox.md): 勾选框
- [Checkboxes](./renderers/Form/Checkboxes.md): 复选框
- [Radios](./renderers/Form/Radios.md): 单选框
- [City](./renderers/Form/City.md): 城市选择
- [Rating](./renderers/Form/Rating.md): 评分
- [Switch](./renderers/Form/Switch.md): 可选框,和 checkbox 完全等价
- [Date](./renderers/Form/Date.md): 日期类型
- [Datetime](./renderers/Form/Datetime.md): 日期时间类型
- [Time](./renderers/Form/Time.md): 时间类型
- [Date-Range](./renderers/Form/Date-Range.md): 日期范围类型
- [Color](./renderers/Form/Color.md): 颜色选择器
- [Range](./renderers/Form/Range.md): 范围输入框
- [Image](./renderers/Form/Image.md): 图片输入
- [File](./renderers/Form/File.md): 文件输入
- [Matrix](./renderers/Form/Matrix.md): 矩阵类型的输入框
- [Tree](./renderers/Form/Tree.md): 树形结构输入框
- [TreeSelect](./renderers/Form/TreeSelect.md): 树形结构选择框
- [NestedSelect](./renderers/Form/NestedSelect.md): 树形结构选择框
- [Button](./renderers/Form/Button.md): 按钮, 包含 button、submit 和 reset
- [Button-Toolbar](./renderers/Form/Button-Toolbar.md): 让多个按钮在一起放置
- [Combo](./renderers/Form/Combo.md): 组合模式
- [Array](./renderers/Form/Array.md): 数组输入框配置
- [SubForm](./renderers/Form/SubForm.md): formItem 还可以是子表单类型
- [Picker](./renderers/Form/Picker.md): 列表选取
- [Formula](./renderers/Form/Formula.md): 公式类型
- [Group](./renderers/Form/Group.md): 表单项集合
- [FieldSet](./renderers/Form/FieldSet.md): 多个输入框可以通过 fieldSet 捆绑在一起
- [Repeat](./renderers/Form/Repeat.md): 可用来设置重复频率
- [Rich-Text](./renderers/Form/Rich-Text.md): 富文本编辑器
- [Editor](./renderers/Form/Editor.md): 编辑器
- [Static](./renderers/Static.md): 纯用来展现数据的
- [Wizard](./renderers/Wizard.md): 表单向导
- [Each](./renderers/Each.md): 基于现有变量循环输出渲染器
- [Plain](./renderers/Plain.md): 单纯的文字输出
- [Html](./renderers/Html.md): html, 当需要用到变量时,请用 Tpl 代替
- [Action](./renderers/Action.md): 一种特殊的渲染器,它本身是一个按钮,同时它能触发事件
- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发
- [Divider](./renderers/Divider.md): 分割线
- [CRUD](./renderers/CRUD.md): 增删改查模型,主要用来展现列表
- [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table
- [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards
- [CRUD-List](./renderers/CRUD-List.md): 请参考 List
- [Panel](./renderers/Panel.md): 可以把相关信息以盒子的形式展示到一块。
- [Wrapper](./renderers/Wrapper.md): 简单的一个容器。
- [Service](./renderers/Service.md): 功能型容器,自身不负责展示内容,主要职责在于通过配置的 api 拉取数据
- [Chart](./renderers/Chart.md): 图表渲染器
- [Collapse](./renderers/Collapse.md): 折叠器
- [Carousel](./renderers/Carousel.md): 轮播图
- [Alert](./renderers/Alert.md): 提示框
- [Audio](./renderers/Audio.md): 音频播放器
- [Video](./renderers/Video.md): 视频播放器
- [Table](./renderers/Table.md): 表格展示
- [Column](./renderers/Column.md): 表格中的列配置
- [List](./renderers/List.md): 列表展示
- [Card](./renderers/Card.md): 卡片的展示形式
- [Cards](./renderers/Cards.md): 卡片集合
- [Field](./renderers/Field.md): 主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中
- [Tabs](./renderers/Tabs.md): 标签页
- [Grid](./renderers/Grid.md): Grid 布局
- [HBox](./renderers/HBox.md): HBox 布局
- [Button-Group](./renderers/Button-Group.md) 按钮集合
- [iFrame](./renderers/iFrame.md) 如果需要内嵌外部站点,可用 iframe 来实现
- [Nav](./renderers/Nav.md): 菜单栏
- [Tasks](./renderers/Tasks.md): 任务操作集合,类似于 orp 上线
- [QRCode](./renderers/QRCode.md): 二维码显示组件
- [Types](./renderers/Types.md): 类型说明文档
- [Definitions](./renderers/Definitions.md): 建立当前页面公共的配置项
- [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出
- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器
- [Form](./renderers/Form/Form.md): 表单渲染器
- [FormItem](./renderers/Form/FormItem.md): Form 中主要是由各种 FormItem 组成
- [List](./renderers/Form/List.md): 简单的列表选择框
- [Button-Group](./renderers/Form/Button-Group.md): 按钮集合
- [Service](./renderers/Form/Service.md): 动态配置,配置项由接口决定
- [Tabs](./renderers/Form/Tabs.md): 多个输入框通过选项卡来分组
- [Table](./renderers/Form/Table.md): 可以用来展示数组类型的数据
- [HBox](./renderers/Form/HBox.md): 支持 form 内部再用 HBox 布局
- [Grid](./renderers/Form/Grid.md): 支持 form 内部再用 grid 布局
- [Panel](./renderers/Form/Panel.md): 还是为了布局,可以把一部分 FormItem 合并到一个 panel 里面单独展示
- [Hidden](./renderers/Form/Hidden.md): 隐藏字段类型
- [Text](./renderers/Form/Text.md): 普通的文本输入框
- [Textarea](./renderers/Form/Textarea.md): 多行文本输入框
- [Url](./renderers/Form/Url.md): URL 输入框
- [Email](./renderers/Form/Email.md): Email 输入框
- [Password](./renderers/Form/Password.md): 密码输入框
- [Number](./renderers/Form/Number.md): 数字输入框
- [Tag](./renderers/Form/Tag.md): 标签输入框
- [Select](./renderers/Form/Select.md): 选项表单
- [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉
- [Checkbox](./renderers/Form/Checkbox.md): 勾选框
- [Checkboxes](./renderers/Form/Checkboxes.md): 复选框
- [Radios](./renderers/Form/Radios.md): 单选框
- [City](./renderers/Form/City.md): 城市选择
- [Rating](./renderers/Form/Rating.md): 评分
- [Switch](./renderers/Form/Switch.md): 可选框,和 checkbox 完全等价
- [Date](./renderers/Form/Date.md): 日期类型
- [Datetime](./renderers/Form/Datetime.md): 日期时间类型
- [Time](./renderers/Form/Time.md): 时间类型
- [Date-Range](./renderers/Form/Date-Range.md): 日期范围类型
- [Transfer](./renderers/Form/Transfer.md): 穿梭器,用来勾选选项。
- [TabsTransfer](./renderers/Form/TabsTransfer.md): 组合穿梭器,用来勾选选项。
- [Color](./renderers/Form/Color.md): 颜色选择器
- [Range](./renderers/Form/Range.md): 范围输入框
- [Image](./renderers/Form/Image.md): 图片输入
- [File](./renderers/Form/File.md): 文件输入
- [Matrix](./renderers/Form/Matrix.md): 矩阵类型的输入框
- [Tree](./renderers/Form/Tree.md): 树形结构输入框
- [TreeSelect](./renderers/Form/TreeSelect.md): 树形结构选择框
- [NestedSelect](./renderers/Form/NestedSelect.md): 树形结构选择框
- [Button](./renderers/Form/Button.md): 按钮, 包含 button、submit 和 reset
- [Button-Toolbar](./renderers/Form/Button-Toolbar.md): 让多个按钮在一起放置
- [Combo](./renderers/Form/Combo.md): 组合模式
- [Array](./renderers/Form/Array.md): 数组输入框配置
- [SubForm](./renderers/Form/SubForm.md): formItem 还可以是子表单类型
- [Picker](./renderers/Form/Picker.md): 列表选取
- [Formula](./renderers/Form/Formula.md): 公式类型
- [Group](./renderers/Form/Group.md): 表单项集合
- [FieldSet](./renderers/Form/FieldSet.md): 多个输入框可以通过 fieldSet 捆绑在一起
- [Repeat](./renderers/Form/Repeat.md): 可用来设置重复频率
- [Rich-Text](./renderers/Form/Rich-Text.md): 富文本编辑器
- [Editor](./renderers/Form/Editor.md): 编辑器
- [Static](./renderers/Static.md): 纯用来展现数据的
- [Wizard](./renderers/Wizard.md): 表单向导
- [Each](./renderers/Each.md): 基于现有变量循环输出渲染器
- [Plain](./renderers/Plain.md): 单纯的文字输出
- [Html](./renderers/Html.md): html, 当需要用到变量时,请用 Tpl 代替
- [Action](./renderers/Action.md): 一种特殊的渲染器,它本身是一个按钮,同时它能触发事件
- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发
- [Divider](./renderers/Divider.md): 分割线
- [CRUD](./renderers/CRUD.md): 增删改查模型,主要用来展现列表
- [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table
- [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards
- [CRUD-List](./renderers/CRUD-List.md): 请参考 List
- [Panel](./renderers/Panel.md): 可以把相关信息以盒子的形式展示到一块。
- [Wrapper](./renderers/Wrapper.md): 简单的一个容器。
- [Service](./renderers/Service.md): 功能型容器,自身不负责展示内容,主要职责在于通过配置的 api 拉取数据
- [Chart](./renderers/Chart.md): 图表渲染器
- [Collapse](./renderers/Collapse.md): 折叠器
- [Carousel](./renderers/Carousel.md): 轮播图
- [Alert](./renderers/Alert.md): 提示框
- [Audio](./renderers/Audio.md): 音频播放器
- [Video](./renderers/Video.md): 视频播放器
- [Table](./renderers/Table.md): 表格展示
- [Column](./renderers/Column.md): 表格中的列配置
- [List](./renderers/List.md): 列表展示
- [Card](./renderers/Card.md): 卡片的展示形式
- [Cards](./renderers/Cards.md): 卡片集合
- [Field](./renderers/Field.md): 主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中
- [Tabs](./renderers/Tabs.md): 标签页
- [Grid](./renderers/Grid.md): Grid 布局
- [HBox](./renderers/HBox.md): HBox 布局
- [Button-Group](./renderers/Button-Group.md) 按钮集合
- [iFrame](./renderers/iFrame.md) 如果需要内嵌外部站点,可用 iframe 来实现
- [Nav](./renderers/Nav.md): 菜单栏
- [Tasks](./renderers/Tasks.md): 任务操作集合,类似于 orp 上线
- [QRCode](./renderers/QRCode.md): 二维码显示组件
- [Types](./renderers/Types.md): 类型说明文档

View File

@ -0,0 +1,118 @@
### 组合穿梭器TabsTransfer
在[穿梭器Transfer](./Transfer.md)的基础上扩充了左边的展示形式,支持 Tabs 的形式展示。对应的 options 的顶级数据,顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。
比如:
```schema:height="450" scope="form"
[
{
"label": "组合穿梭器",
"type": "tabs-transfer",
"name": "a",
"sortable": true,
"selectMode": "tree",
"searchable": true,
"options": [
{
"label": "成员",
"selectMode": "tree",
"children": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao"
},
{
"label": "钟无艳",
"value": "zhongwuyan"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai"
},
{
"label": "韩信",
"value": "hanxin"
},
{
"label": "云中君",
"value": "yunzhongjun"
}
]
}
]
},
{
"label": "用户",
"selectMode": "chained",
"children": [
{
"label": "法师",
"children": [
{
"label": "诸葛亮",
"value": "zhugeliang2"
}
]
},
{
"label": "战士",
"children": [
{
"label": "曹操",
"value": "caocao2"
},
{
"label": "钟无艳",
"value": "zhongwuyan2"
}
]
},
{
"label": "打野",
"children": [
{
"label": "李白",
"value": "libai2"
},
{
"label": "韩信",
"value": "hanxin2"
},
{
"label": "云中君",
"value": "yunzhongjun2"
}
]
}
]
}
]
},
{
"type": "static",
"name": "transfer",
"label": "当前值"
}
]
```
更多配置请参考[穿梭器Transfer](./Transfer.md)。

View File

@ -0,0 +1,123 @@
### 穿梭器Transfer
适用于需选择的数据/信息源较多时,用户可直观的知道自己所选择的数据/信息的场景,一般左侧框为数据/信息源,右侧为已选数据/信息,被选中信息同时存在于 2 个框内。
- `type` 请设置成 `transfer`
- `options` 选项配置,类型为数组,成员格式如下。
- `label` 文字
- `value`
- `children` 说明可以嵌套。
- `value` 设置默认值,如果想要默认选中某个,请设置默认值。
- `source` Api 地址,如果选项不固定,可以通过配置 `source` 动态拉取。另外也可以用 `${xxxx}` 来获取当前作用域中的变量。
- `joinValues` 默认为 `true`
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 `value` 的值封装为数组,作为当前表单项的值。
- `delimiter` 默认为 `,`
- `searchable` 默认为 `false`,当设置为 `true` 时表示可以通过输入部分内容检索出选项。
- `searchApi` 可选,如果想通过接口检索,可以设置个 api。
- `statistics` 是否显示统计数据,设置为 `false` 不显示,默认为显示。
- `selectTitle` 默认为 `请选择`,左侧的标题文字。
- `resultTitle` 默认为 `当前选择`,右侧结果的标题文字。
- `sortable` 默认为 `false`,开启后,结果可以进行拖拽排序。
- `selectMode` 默认为 `list` 可选:`list`、`table`、`tree`、`chained`。分表为:列表形式、表格形式、树形选择形式和级联选择形式。
- `searchResultMode` 如果不设置将采用 `selectMode` 的值,可以单独配置,参考 `selectMode`,决定搜索结果的展示形式。
- `columns` 当展示形式为 `table` 可以用来配置展示哪些列,跟 table 中的 columns 配置相似,只是不能设置 `type` 选择渲染器类型。
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
```schema:height="450" scope="form"
[
{
"type": "transfer",
"name": "transfer",
"label": "穿梭器",
"options": [
{
"label": "Option A",
"value": "a"
},
{
"label": "Option B",
"value": "b"
}
]
},
{
"type": "static",
"name": "transfer",
"label": "当前值"
}
]
```
[更多示例](/examples/form/transfer)
### 接口说明
开始之前请你先阅读[整体要求](../api.md)。
#### source
**发送**
默认 GET不携带数据可从上下文中取数据设置进去。
**响应**
格式要求如下:
```json
{
"status": 0,
"msg": "",
"data": {
"options": [
{
"label": "描述",
"value": "值" // ,
// "children": [] // 可以嵌套
},
{
"label": "描述2",
"value": "值2"
}
],
"value": "值" // 默认值,可以获取列表的同时设置默认值。
}
}
```
#### searchApi
**发送**
默认 GET携带 term 变量,值为搜索框输入的文字,可从上下文中取数据设置进去。
**响应**
格式要求如下:
```json
{
"status": 0,
"msg": "",
"data": {
"options": [
{
"label": "描述",
"value": "值" // ,
// "children": [] // 可以嵌套
},
{
"label": "描述2",
"value": "值2"
}
],
"value": "值" // 默认值,可以获取列表的同时设置默认值。
}
}
```

View File

@ -17,7 +17,7 @@ export default {
label: '默认',
type: 'transfer',
name: 'transfer1',
showArrow: true,
// showArrow: true,
options: [
{
label: '诸葛亮',
@ -299,19 +299,29 @@ export default {
selectMode: 'tree',
children: [
{
label: '诸葛亮',
value: 'zhugeliang'
label: '法师',
children: [
{
label: '诸葛亮',
value: 'zhugeliang'
}
]
},
{
label: '曹操',
value: 'caocao'
label: '战士',
children: [
{
label: '曹操',
value: 'caocao'
},
{
label: '钟无艳',
value: 'zhongwuyan'
}
]
},
{
label: '钟无艳',
value: 'zhongwuyan'
},
{
label: '野核',
label: '打野',
children: [
{
label: '李白',
@ -335,20 +345,29 @@ export default {
selectMode: 'chained',
children: [
{
label: '诸葛亮',
value: 'zhugeliang2'
label: '法师',
children: [
{
label: '诸葛亮',
value: 'zhugeliang2'
}
]
},
{
label: '曹操',
value: 'caocao2'
label: '战士',
children: [
{
label: '曹操',
value: 'caocao2'
},
{
label: '钟无艳',
value: 'zhongwuyan2'
}
]
},
{
label: '钟无艳',
value: 'zhongwuyan2'
},
{
label: '野核',
subTitle: '就是打野的',
label: '打野',
children: [
{
label: '李白',