mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-04 21:19:01 +08:00
Merge remote-tracking branch 'baidu/master'
This commit is contained in:
2betop
commit
75f747f56d
@ -338,6 +338,48 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
|
||||
如果想前端实现过滤功能，请看[前端一次性加载](#前端一次性加载)部分。
|
||||
|
||||
## 配置默认请求参数
|
||||
|
||||
可以配置`defaultParams`，来指定拉取接口时的默认参数：
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "https://houtai.baidu.com/api/sample",
|
||||
"defaultParams": {
|
||||
"perPage": 50
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
例如上例中，配置`{ perPage: 50 }`，指定分页的默认每页数据条数为 50 条。
|
||||
|
||||
## 数据源接口轮训
|
||||
|
||||
可以配置`interval`来实现数据接口轮训功能，默认最低为`3000`毫秒，
|
||||
|
||||
@ -415,6 +415,79 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
}
|
||||
```
|
||||
|
||||
### 静态初始化数据域
|
||||
|
||||
我们也可以手动设置 form 的数据域来初始化多个表单项值
|
||||
|
||||
```schema:height="330" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"data": {
|
||||
"name": "rick",
|
||||
"email": "rick@gmail.com"
|
||||
},
|
||||
"title": "用户信息",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "name",
|
||||
"label": "姓名"
|
||||
},
|
||||
{
|
||||
"type": "email",
|
||||
"name": "email",
|
||||
"label": "邮箱"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 数据格式一致性问题
|
||||
|
||||
当表单来初始化表单项值时，需要保持数据格式的一致性。
|
||||
|
||||
如果表单初始化的值与表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，也许会导致不一致性的问题，我们看一个例子：
|
||||
|
||||
```schema:height="260" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"data": {
|
||||
"select": ["a", "c"]
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"multiple": true,
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
上例中， `select` 我们配置了`"multiple": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`"a,c"`，但是我们表单数据域中，`select`默认值为`"value": ["a", "c"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：
|
||||
|
||||
1. 有可能不会默认选中 `A` 和 `C` 选项；
|
||||
2. 当不操作该表单项，直接提交时，预期是：`"a,c"`，但提交给后端的数据为：`["a", "c"]`，导致了不一致性的问题。
|
||||
|
||||
> 通过 `initApi` 配置默认值同理，不再赘述
|
||||
|
||||
因此一定确保默认值与选择器表单项数据格式配置相匹配。
|
||||
|
||||
## 表单提交
|
||||
|
||||
配置`api`属性，当表单执行提交行为时，会默认将当前表单数据域中的数据使用`post`方式发送给所配置`api`
|
||||
|
||||
@ -12,7 +12,7 @@ order: 2
|
||||
|
||||
它派生自 [表单项](./formitem)，拥有表单项所有的特性。
|
||||
|
||||
## 静态选项组 options
|
||||
## 选项组格式
|
||||
|
||||
选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：
|
||||
|
||||
@ -45,9 +45,7 @@ order: 2
|
||||
|
||||
`options`属性配置的对象数组就是`select`选择器组件的选项组。
|
||||
|
||||
### 选项组格式
|
||||
|
||||
##### 标准格式
|
||||
### 标准格式
|
||||
|
||||
```json
|
||||
{
|
||||
@ -104,7 +102,7 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
##### 简单格式
|
||||
### 简单格式
|
||||
|
||||
也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致
|
||||
|
||||
@ -123,6 +121,37 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
## 静态选项组 options
|
||||
|
||||
可以使用静态方式，配置一组选项组：
|
||||
|
||||
```schema:height="260" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 动态选项组 source
|
||||
|
||||
### 通过数据域中变量配置
|
||||
@ -205,7 +234,7 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
## 自动选中
|
||||
## 默认值/自动选中 value
|
||||
|
||||
我们知道表单项可以通过配置`value`属性来设置默认值
|
||||
|
||||
@ -273,6 +302,50 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
### 数据格式一致性问题
|
||||
|
||||
当使用 `source` 或 `value` 配置默认值的时候，需要保持数据格式的一致性。
|
||||
|
||||
如果使用 `source` 或 `value` 配置的默认值与当前表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，可能会导致不一致性的问题，我们看一个例子：
|
||||
|
||||
```schema:height="260" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"multiple": true,
|
||||
"value": ["a", "c"],
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
上例中， `select` 我们配置了`"multiple": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`"a,c"`，但是我们设置了`"value": ["a", "c"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：
|
||||
|
||||
1. 有可能不会默认选中 `A` 和 `C` 选项；
|
||||
2. 当不操作该表单项，直接提交时，预期是：`"a,c"`，但提交给后端的数据为：`["a", "c"]`，导致了不一致性的问题。
|
||||
|
||||
> 通过 `source` 配置默认值同理，不再赘述
|
||||
|
||||
因此一定确保默认值与选择器表单项数据格式配置相匹配。
|
||||
|
||||
## 多选 multiple
|
||||
|
||||
大部分选择器组件默认是单选的，可以配置`"multiple": true`支持多选。
|
||||
|
||||
@ -16,7 +16,7 @@ function filterUrl(url: string) {
|
||||
}
|
||||
|
||||
(window as any).MonacoEnvironment = {
|
||||
getWorkerUrl: function(moduleId: string, label: string) {
|
||||
getWorkerUrl: function (moduleId: string, label: string) {
|
||||
let url = '/pkg/editor.worker.js';
|
||||
|
||||
if (label === 'json') {
|
||||
@ -202,7 +202,7 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||
});
|
||||
|
||||
// json 默认开启验证。
|
||||
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
||||
monaco.languages.json?.jsonDefaults.setDiagnosticsOptions({
|
||||
enableSchemaRequest: true,
|
||||
validate: true,
|
||||
allowComments: true
|
||||
|
||||
Loading…
Reference in New Issue
Block a user