完善文档
This commit is contained in:
2betop
parent
fd431d338c
commit
e3223fa7ab
|
|
@ -93,6 +93,178 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
|
||||||
|
|
||||||
如果不需要分页，或者配置了 `loadDataOnce` 则可以忽略掉 `total` 和 `hasNext` 参数。
|
如果不需要分页，或者配置了 `loadDataOnce` 则可以忽略掉 `total` 和 `hasNext` 参数。
|
||||||
|
|
||||||
|
## 功能
|
||||||
|
|
||||||
|
既然这个渲染器叫增删改查，那接下来分开介绍这几个功能吧。
|
||||||
|
|
||||||
|
### 增
|
||||||
|
|
||||||
|
其实这个渲染器并不没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 CRUD 刷新如：
|
||||||
|
|
||||||
|
```schema:height="600" scope="body"
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"label": "新增",
|
||||||
|
"type": "button",
|
||||||
|
"actionType": "dialog",
|
||||||
|
"level": "primary",
|
||||||
|
"className": "m-b-sm",
|
||||||
|
"dialog": {
|
||||||
|
"title": "新增表单",
|
||||||
|
"body": {
|
||||||
|
"type": "form",
|
||||||
|
"api": "post:/api/sample?waitSeconds=1",
|
||||||
|
"controls": [
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"name": "engine",
|
||||||
|
"label": "Engine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"name": "browser",
|
||||||
|
"label": "Browser"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "crud",
|
||||||
|
"api": "/api/sample?waitSeconds=1&orderBy=id&orderDir=desc",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
当然如果你不想要自动刷新，那么给按钮配置 reload: "none" 就行了。
|
||||||
|
|
||||||
|
### 删
|
||||||
|
|
||||||
|
删除功能主要有三种实现：[单条操作](#单条操作)、[批量操作](#批量操作)或者直接添加一个操作栏，在里面放个类型为 ajax 类型的按钮即可。在这个按钮里面能获得对应的行数据，而且完成后也会自动刷新这个 CRUD 列表。
|
||||||
|
|
||||||
|
```schema:height="600" scope="body"
|
||||||
|
{
|
||||||
|
"type": "crud",
|
||||||
|
"api": "/api/sample?waitSeconds=1&orderBy=id&orderDir=desc",
|
||||||
|
"columns": [
|
||||||
|
{
|
||||||
|
"name": "id",
|
||||||
|
"label": "ID"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "engine",
|
||||||
|
"label": "Rendering engine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "browser",
|
||||||
|
"label": "Browser"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "operation",
|
||||||
|
"label": "操作",
|
||||||
|
"buttons": [
|
||||||
|
{
|
||||||
|
"label": "删除",
|
||||||
|
"type": "button",
|
||||||
|
"actionType": "ajax",
|
||||||
|
"level": "danger",
|
||||||
|
"confirmText": "确认要删除？",
|
||||||
|
"api": "delete:/api/sample/${id}?waitSeconds=1"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 改
|
||||||
|
|
||||||
|
改和删其实是差不多的，唯一的区别在于，配置不同的 api，按钮类型改成弹框。
|
||||||
|
|
||||||
|
```schema:height="600" scope="body"
|
||||||
|
{
|
||||||
|
"type": "crud",
|
||||||
|
"api": "/api/sample?waitSeconds=1&orderBy=id&orderDir=desc",
|
||||||
|
"columns": [
|
||||||
|
{
|
||||||
|
"name": "id",
|
||||||
|
"label": "ID"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "engine",
|
||||||
|
"label": "Rendering engine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "browser",
|
||||||
|
"label": "Browser"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "operation",
|
||||||
|
"label": "操作",
|
||||||
|
"buttons": [
|
||||||
|
{
|
||||||
|
"label": "修改",
|
||||||
|
"type": "button",
|
||||||
|
"actionType": "drawer",
|
||||||
|
"drawer": {
|
||||||
|
"title": "新增表单",
|
||||||
|
"body": {
|
||||||
|
"type": "form",
|
||||||
|
"initApi": "/api/sample/${id}",
|
||||||
|
"api": "post:/api/sample/${id}?waitSeconds=1",
|
||||||
|
"controls": [
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"name": "engine",
|
||||||
|
"label": "Engine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "text",
|
||||||
|
"name": "browser",
|
||||||
|
"label": "Browser"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
弹框里面可用数据自动就是点击的那一行的行数据，如果列表没有返回，可以在 form 里面再配置个 initApi 初始化数据，如果行数据里面有倒是不需要再拉取了。表单项的 name 跟数据 key 对应上便自动回显了。默认发送给表单的保存接口只会包含配置了的表单项，如果不够，请在 api 上配置数据映射，或者直接添加 hidden 类型的表单项（即隐藏域 input[type=hidden]）。
|
||||||
|
|
||||||
|
### 查
|
||||||
|
|
||||||
|
查，就不单独介绍了，这个文档绝大部分都是关于查的。
|
||||||
|
|
||||||
## 展示模式
|
## 展示模式
|
||||||
|
|
||||||
CRUD 支持下面 3 种展示模式，默认为 Table 表格模式。
|
CRUD 支持下面 3 种展示模式，默认为 Table 表格模式。
|
||||||
|
|
|
||||||
|
|
@ -341,7 +341,7 @@ JSSDK 的代码从以下地址获取：
|
||||||
- JS： https://houtai.baidu.com/v2/jssdk
|
- JS： https://houtai.baidu.com/v2/jssdk
|
||||||
- CSS： https://houtai.baidu.com/v2/csssdk
|
- CSS： https://houtai.baidu.com/v2/csssdk
|
||||||
|
|
||||||
以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，需要将这两个文件下载到本地，分别命名为 sdk.js 和 sdk.css，然后类似如下的方式使用:
|
以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动。npm 包里面也包含 sdk 文件，要固定某个版本可以先 amis 安装到本地，然后去 sdk 目录拷贝文件。然后类似如下的方式使用:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue