diff --git a/docs/components/crud.md b/docs/components/crud.md index c6f7e331..237dff50 100755 --- a/docs/components/crud.md +++ b/docs/components/crud.md @@ -93,6 +93,178 @@ CRUD,即增删改查组件,主要用来展现数据列表,并支持各类 如果不需要分页,或者配置了 `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 表格模式。 diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md index 6599be63..0b8f5ca0 100644 --- a/docs/start/getting-started.md +++ b/docs/start/getting-started.md @@ -341,7 +341,7 @@ JSSDK 的代码从以下地址获取: - JS: https://houtai.baidu.com/v2/jssdk - CSS: https://houtai.baidu.com/v2/csssdk -以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动,需要将这两个文件下载到本地,分别命名为 sdk.js 和 sdk.css,然后类似如下的方式使用: +以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动。npm 包里面也包含 sdk 文件,要固定某个版本可以先 amis 安装到本地,然后去 sdk 目录拷贝文件。然后类似如下的方式使用: ```html