From e78bd38d1b3dd004a1143085c864042737b31fb1 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Wed, 19 Aug 2020 12:01:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/crud.md | 172 ++++++++++++++++++++++++++++++++++ docs/start/getting-started.md | 2 +- 2 files changed, 173 insertions(+), 1 deletion(-) 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