CRUD 增删改查

CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。

注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 Table。

基本用法

最基本的用法是配置 数据源接口(api) 以及 展示列(columns)

```schema: scope=”body” { “type”: “crud”, “api”: “/api/mock2/sample”, “syncLocation”: false, “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” }, { “type”: “operation”, “label”: “操作”, “buttons”: [ { “label”: “详情”, “type”: “button”, “level”: “link”, “actionType”: “dialog”, “dialog”: { “title”: “查看详情”, “body”: { “type”: “form”, “body”: [ { “type”: “input-text”, “name”: “engine”, “label”: “Engine” }, { “type”: “input-text”, “name”: “browser”, “label”: “Browser” }, { “type”: “input-text”, “name”: “platform”, “label”: “platform” }, { “type”: “input-text”, “name”: “version”, “label”: “version” }, { “type”: “control”, “label”: “grade”, “body”: { “type”: “tag”, “label”: “${grade}”, “displayMode”: “normal”, “color”: “active” } } ] } } }, { “label”: “删除”, “type”: “button”, “level”: “link”, “className”: “text-danger”, “disabledOn”: “this.grade === ‘A’” } ] } ] }

  2. ## 数据源接口数据结构要求
  4. - `items`或`rows`：用于返回数据源数据，格式是数组
  5. - `total`: 用于返回数据库中一共有多少条数据，用于生成分页
  7. ```json
  8. {
  9.   "status": 0,
  10.   "msg": "",
  11.   "data": {
  12.     "items": [
  13.       {
  14.         // 每一行的数据
  15.         "id": 1,
  16.         "xxx": "xxxx"
  17.       }
  18.     ],
  20.     "total": 200 // 注意！！！这里不是当前请求返回的 items 的长度，而是数据库中一共有多少条数据，用于生成分页组件
  21.     // 如果你不想要分页，把这个不返回就可以了。
  22.   }
  23. }

如果无法知道数据总数，只能知道是否有下一页，请返回如下格式，amis 会简单生成一个简单版本的分页控件。

  1. {
  2.   "status": 0,
  3.   "msg": "",
  4.   "data": {
  5.     "items": [
  6.       {
  7.         // 每个成员的数据。
  8.         "id": 1,
  9.         "xxx": "xxxx"
  10.       }
  11.     ],
  13.     "hasNext": true // 是否有下一页。
  14.   }
  15. }

如果不需要分页，或者配置了 loadDataOnce 则可以忽略掉 total 和 hasNext 参数。

如果 api 地址中有变量，比如 /api/mock2/sample/${id}，amis 就不会自动加上分页参数，需要自己加上，改成 /api/mock2/sample/${id}?page=${page}&perPage=${perPage}

分页参数

默认的分页参数是 page 和 perPage，page 代表页数，比如第一页，perPage 代表每页显示几行。

如果要其它格式，比如转成 limit 和 offset，可以使用公式来转换，比如

/api/mock2/sample?limit=${perPage}&offset=${(page - 1) * perPage}

功能

既然这个渲染器叫增删改查，那接下来分开介绍这几个功能吧。

增

其实这个渲染器并没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 CRUD 刷新如：

```schema: scope=”body” [ { “label”: “新增”, “type”: “button”, “actionType”: “dialog”, “level”: “primary”, “className”: “m-b-sm”, “dialog”: { “title”: “新增表单”, “body”: { “type”: “form”, “api”: “post:/api/mock2/sample”, “body”: [ { “type”: “input-text”, “name”: “engine”, “label”: “Engine” }, { “type”: “input-text”, “name”: “browser”, “label”: “Browser” } ] } } }, { “type”: “crud”, “api”: “/api/mock2/sample?orderBy=id&orderDir=desc”, “syncLocation”: false, “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” } ] } ]

  2. 当然如果你不想要自动刷新，那么给按钮配置 reload: "none" 就行了。
  4. ### 删
  6. 删除功能主要有三种实现：[单条操作](#单条操作)、[批量操作](#批量操作)或者直接添加一个操作栏，在里面放个类型为 ajax 类型的按钮即可。在这个按钮里面能获得对应的行数据，而且完成后也会自动刷新这个 CRUD 列表。
  8. ```schema: scope="body"
  9. {
  10.     "type": "crud",
  11.     "api": "/api/mock2/sample?orderBy=id&orderDir=desc",
  12.     "syncLocation": false,
  13.     "columns": [
  14.         {
  15.             "name": "id",
  16.             "label": "ID"
  17.         },
  18.         {
  19.             "name": "engine",
  20.             "label": "Rendering engine"
  21.         },
  22.         {
  23.             "name": "browser",
  24.             "label": "Browser"
  25.         },
  26.         {
  27.             "type": "operation",
  28.             "label": "操作",
  29.             "buttons": [
  30.                 {
  31.                     "label": "删除",
  32.                     "type": "button",
  33.                     "actionType": "ajax",
  34.                     "level": "danger",
  35.                     "confirmText": "确认要删除？",
  36.                     "api": "delete:/api/mock2/sample/${id}"
  37.                 }
  38.             ]
  39.         }
  40.     ]
  41. }

改

改和删其实是差不多的，唯一的区别在于，配置不同的 api，按钮类型改成弹框。

```schema: scope=”body” { “type”: “crud”, “api”: “/api/mock2/sample?orderBy=id&orderDir=desc”, “syncLocation”: false, “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/mock2/sample/${id}”, “api”: “post:/api/mock2/sample/${id}”, “body”: [ { “type”: “input-text”, “name”: “engine”, “label”: “Engine” }, { “type”: “input-text”, “name”: “browser”, “label”: “Browser” } ] } } } ] } ] }

  2. 弹框里面可用数据自动就是点击的那一行的行数据，如果列表没有返回，可以在 form 里面再配置个 initApi 初始化数据，如果行数据里面有倒是不需要再拉取了。表单项的 name 跟数据 key 对应上便自动回显了。默认发送给表单的保存接口只会包含配置了的表单项，如果不够，请在 api 上配置数据映射，或者直接添加 hidden 类型的表单项（即隐藏域 input[type=hidden]）。
  4. ### 查
  6. 查，就不单独介绍了，这个文档绝大部分都是关于查的。
  8. ## 展示模式
  10. CRUD 支持下面 3 种展示模式，默认为 Table 表格模式。
  12. ### Table 表格模式
  14. Table 模式支持 [Table]($docs-zh-CN-components-table) 中的所有功能。
  16. ```schema: scope="body"
  17. {
  18.     "type": "crud",
  19.     "api": "/api/mock2/sample",
  20.     "syncLocation": false,
  21.     "columns": [
  22.         {
  23.             "name": "id",
  24.             "label": "ID"
  25.         },
  26.         {
  27.             "name": "engine",
  28.             "label": "Rendering engine"
  29.         },
  30.         {
  31.             "name": "browser",
  32.             "label": "Browser"
  33.         },
  34.         {
  35.             "name": "platform",
  36.             "label": "Platform(s)"
  37.         },
  38.         {
  39.             "name": "version",
  40.             "label": "Engine version"
  41.         }
  42.     ]
  43. }

这个模式下会默认开启固定表头功能，如果不需要可以使用 "affixHeader": false 关闭。

List 列表模式

List 模式支持 List 中的所有功能。

```schema: scope=”body” { “type”: “crud”, “api”: “/api/mock2/crud/permissions”, “mode”: “list”, “placeholder”: “当前组内, 还没有配置任何权限.”, “syncLocation”: false, “title”: null, “listItem”: { “title”: “$name”, “subTitle”: “$description”, “actions”: [ { “icon”: “fa fa-edit”, “tooltip”: “编辑”, “actionType”: “dialog”, “dialog”: { “title”: “编辑能力（权限）”, “body”: { “type”: “form”, “body”: [ { “type”: “hidden”, “name”: “id” }, { “name”: “name”, “label”: “权限名称”, “type”: “input-text”, “disabled”: true }, { “type”: “divider” }, { “name”: “description”, “label”: “描述”, “type”: “textarea” } ] } } }, { “tooltip”: “删除”, “disabledOn”: “~[\”admin:permission\”, \”admin:user\”, \”admin:role\”, \”admin:acl\”, \”admin:page\”, \”page:readAll\”, \”admin:settings\”].indexOf(name)”, “icon”: “fa fa-times”, “confirmText”: “您确定要移除该权限?”, “actionType”: “ajax”, “api”: “delete:/api/mock2/notFound” } ] } }

  2. ### Cards 卡片模式
  4. Cards 模式支持 [Cards]($docs-zh-CN-components-cards) 中的所有功能。
  6. ```schema: scope="body"
  7. {
  8.   "type": "crud",
  9.   "api": "/api/mock2/crud/users",
  10.   "syncLocation": false,
  11.   "mode": "cards",
  12.   "defaultParams": {
  13.     "perPage": 6
  14.   },
  15.   "switchPerPage": false,
  16.   "placeholder": "没有用户信息",
  17.   "columnsCount": 2,
  18.   "card": {
  19.     "header": {
  20.       "className": "bg-white",
  21.       "title": "$name",
  22.       "subTitle": "$realName",
  23.       "description": "$email",
  24.       "avatar": "${avatar | raw}",
  25.       "highlight": "$isSuperAdmin",
  26.       "avatarClassName": "pull-left thumb-md avatar b-3x m-r"
  27.     },
  28.     "bodyClassName": "padder",
  29.     "body": "\n      <% if (this.roles && this.roles.length) { %>\n        <% this.roles.map(function(role) { %>\n          <span class=\"label label-default\"><%- role.name %></span>\n        <% }) %>\n      <% } else { %>\n        <p class=\"text-muted\">没有分配角色</p>\n      <% } %>\n      ",
  30.     "actions": [
  31.       {
  32.         "label": "编辑",
  33.         "actionType": "dialog",
  34.         "dialog": {
  35.           "title": null,
  36.           "body": {
  37.             "api": "",
  38.             "type": "form",
  39.             "tabs": [
  40.               {
  41.                 "title": "基本信息",
  42.                 "body": [
  43.                   {
  44.                     "type": "hidden",
  45.                     "name": "id"
  46.                   },
  47.                   {
  48.                     "name": "name",
  49.                     "label": "帐号",
  50.                     "disabled": true,
  51.                     "type": "input-text"
  52.                   },
  53.                   {
  54.                     "type": "divider"
  55.                   },
  56.                   {
  57.                     "name": "email",
  58.                     "label": "邮箱",
  59.                     "type": "input-text",
  60.                     "disabled": true
  61.                   },
  62.                   {
  63.                     "type": "divider"
  64.                   },
  65.                   {
  66.                     "name": "isAmisOwner",
  67.                     "label": "管理员",
  68.                     "description": "设置是否为超级管理",
  69.                     "type": "switch"
  70.                   }
  71.                 ]
  72.               },
  73.               {
  74.                 "title": "角色信息",
  75.                 "body": []
  76.               },
  77.               {
  78.                 "title": "设置权限",
  79.                 "body": []
  80.               }
  81.             ]
  82.           }
  83.         }
  84.       },
  85.       {
  86.         "label": "移除",
  87.         "confirmText": "您确定要移除该用户?",
  88.         "actionType": "ajax",
  89.         "api": "delete:/api/mock2/notFound"
  90.       }
  91.     ]
  92.   }
  93. }

查询条件表单

大部分表格展示有对数据进行检索的需求，CRUD 自身支持通过配置filter，实现查询条件过滤表单

filter 配置实际上同 Form 组件，因此支持绝大部分form的功能。

```schema: scope=”body” { “type”: “crud”, “name”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “filter”: { “title”: “条件搜索”, “body”: [ { “type”: “flex”, “justify”: “space-between”, “alignItems”: “center”, “items”: [ { “type”: “input-text”, “name”: “keywords”, “placeholder”: “通过关键字搜索”, “size”: “sm” }, { “type”: “button”, “actionType”: “drawer”, “icon”: “fa fa-plus”, “label”: “创建记录”, “target”: “crud”, “closeOnOutside”: true, “drawer”: { “title”: “创建记录”, “body”: { “type”: “form”, “api”: “post:/api/mock2/sample”, “body”: [ { “type”: “input-text”, “name”: “engine”, “label”: “Engine” }, { “type”: “input-text”, “name”: “browser”, “label”: “Browser” } ] } } } ] }

  1.     ]
  2. },
  3. "columns": [
  4.     {
  5.         "name": "id",
  6.         "label": "ID"
  7.     },
  8.     {
  9.         "name": "engine",
  10.         "label": "Rendering engine"
  11.     },
  12.     {
  13.         "name": "browser",
  14.         "label": "Browser"
  15.     },
  16.     {
  17.         "name": "platform",
  18.         "label": "Platform(s)"
  19.     },
  20.     {
  21.         "name": "version",
  22.         "label": "Engine version"
  23.     },
  24.     {
  25.         "name": "grade",
  26.         "label": "CSS grade"
  27.     }
  28. ]

}

  2. **请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作
  4. 如果想前端实现过滤功能，请看[前端一次性加载](#前端一次性加载)部分。
  6. ### 自动生成查询区域
  8. 通过设置`"autoGenerateFilter": true`开启查询区域，会根据列元素的 `searchable` 属性值，自动生成查询条件表单，只有 `searchable` 属性值为合法的组件 Schema 时才会生成查询条件。注意这个属性和 `filter` 冲突，开启 `filter` 后 `autoGenerateFilter` 将会失效。
  10. ```schema: scope="body"
  11. {
  12.     "type": "crud",
  13.     "api": "/api/mock2/sample",
  14.     "syncLocation": false,
  15.     "autoGenerateFilter": true,
  16.     "headerToolbar": [
  17.         {
  18.             "type": "columns-toggler",
  19.             "align": "right",
  20.             "draggable": true,
  21.             "icon": "fas fa-cog",
  22.             "overlay": true,
  23.             "footerBtnSize": "sm"
  24.         }
  25.     ],
  26.     "columns": [
  27.         {
  28.             "name": "id",
  29.             "label": "ID",
  30.             "searchable": {
  31.               "type": "input-text",
  32.               "name": "id",
  33.               "label": "主键",
  34.               "placeholder": "输入id"
  35.             }
  36.         },
  37.         {
  38.             "name": "engine",
  39.             "label": "Rendering engine"
  40.         },
  41.         {
  42.             "name": "browser",
  43.             "label": "Browser",
  44.             "searchable": {
  45.               "type": "select",
  46.               "name": "browser",
  47.               "label": "浏览器",
  48.               "placeholder": "选择浏览器",
  49.               "options": [
  50.                 {
  51.                   "label": "Internet Explorer ",
  52.                   "value": "ie"
  53.                 },
  54.                 {
  55.                   "label": "AOL browser",
  56.                   "value": "aol"
  57.                 },
  58.                 {
  59.                   "label": "Firefox",
  60.                   "value": "firefox"
  61.                 }
  62.               ]
  63.             }
  64.         },
  65.         {
  66.             "name": "platform",
  67.             "label": "Platform(s)"
  68.         },
  69.         {
  70.             "name": "version",
  71.             "label": "Engine version",
  72.             "searchable": {
  73.               "type": "input-number",
  74.               "name": "version",
  75.               "label": "版本号",
  76.               "placeholder": "输入版本号",
  77.               "mode": "horizontal"
  78.             }
  79.         },
  80.         {
  81.             "name": "grade",
  82.             "label": "CSS grade"
  83.         }
  84.     ]
  85. }

配置默认请求参数

可以配置defaultParams，来指定拉取接口时的默认参数：

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/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” } ] }

  2. 例如上例中，配置`{ perPage: 50 }`，指定分页的默认每页数据条数为 50 条。
  4. ## 数据源接口轮询
  6. 可以配置`interval`来实现数据接口轮询功能，最低为`1000`毫秒：
  8. ```schema: scope="body"
  9. {
  10.     "type": "crud",
  11.     "syncLocation": false,
  12.     "api": "/api/mock2/sample",
  13.     "interval": 3000,
  14.     "columns": [
  15.         {
  16.             "name": "id",
  17.             "label": "ID"
  18.         },
  19.         {
  20.             "name": "engine",
  21.             "label": "Rendering engine"
  22.         },
  23.         {
  24.             "name": "browser",
  25.             "label": "Browser"
  26.         },
  27.         {
  28.             "name": "platform",
  29.             "label": "Platform(s)"
  30.         },
  31.         {
  32.             "name": "version",
  33.             "label": "Engine version"
  34.         },
  35.         {
  36.             "name": "grade",
  37.             "label": "CSS grade"
  38.         }
  39.     ]
  40. }

配置stopAutoRefreshWhen表达式，来实现满足条件，停止轮询

列配置

除了支持 Table 中的列配置 以外，crud 还支持下面这些配置，帮助更好的操作数据

排序检索

可以在列上配置"sortable": true，该列表头右侧会渲染一个可点击的排序图标，可以切换正序和倒序。

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “engine”, “label”: “Rendering engine”, “sortable”: true } ] }

  2. amis 只负责生成排序组件，并将排序参数传递给接口，而不会在前端对数据进行排序处理。参数格式如下：
  4. ```json
  5. {
  6.   "orderBy": "engine", // 这里为所配置列的 name
  7.   "orderDir": "asc" // asc 为升序，desc 为降序
  8. }

你可以通过数据映射，在api中获取这些参数。

快速搜索

可以在列上配置"searchable": true，该列表头右侧会渲染一个可点击的搜索图标，点击可以输入关键字进行该列的搜索：

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “engine”, “label”: “Rendering engine”, “searchable”: true } ] }

  2. amis 只负责生成搜索组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：
  4. ```json
  5. {
  6.   "engine": "xxx" // 这里的key是列的 name，value是输入的关键字
  7. }

你可以通过数据映射，在api中获取这些参数。

快速过滤

可以在列上配置filterable属性，该列表头右侧会渲染一个可点击的过滤图标，点击显示下拉框，选中进行过滤：

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “grade”, “label”: “CSS grade”, “filterable”: { “options”: [ “A”, “B”, “C”, “D”, “X” ] } } ] }

  2. amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：
  4. ```json
  5. {
  6.   "grade": "xxx" // 这里的key是列的 name，value是选中项的value值
  7. }

你可以通过数据映射，在api中获取这些参数。

快速编辑

可以通过给列配置："quickEdit":true和quickSaveApi 可以实现表格内快速编辑并批量保存的功能。

如下Rendering engine列的每一行中，会生成可编辑图标，点击后会显示弹框，用于编辑该列的值，

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “quickSaveApi”: “/api/mock2/sample/bulkUpdate”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “engine”, “label”: “Rendering engine”, “quickEdit”:true } ] }

  2. #### 指定编辑表单项类型
  4. `quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`"type": "select"`：
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "syncLocation": false,
  10.     "api": "/api/mock2/sample",
  11.     "quickSaveApi": "/api/mock2/sample/bulkUpdate",
  12.     "columns": [
  13.         {
  14.             "name": "id",
  15.             "label": "ID"
  16.         },
  17.         {
  18.             "name": "grade",
  19.             "label": "CSS grade",
  20.             "quickEdit": {
  21.                 "type": "select",
  22.                 "options": [
  23.                     "A",
  24.                     "B",
  25.                     "C",
  26.                     "D",
  27.                     "X"
  28.                 ]
  29.             }
  30.         }
  31.     ]
  32. }

快速编辑多个表单项

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “quickSaveApi”: “/api/mock2/sample/bulkUpdate”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “grade”, “label”: “CSS grade”, “quickEdit”: { “body”: [ { “type”: “select”, “name”: “grade”, “options”: [ “A”, “B”, “C”, “D”, “X” ] },

  1.                 {
  2.                     "label": "id",
  3.                     "type": "input-text",
  4.                     "name": "id"
  5.                 }
  6.             ]
  7.         }
  8.     }
  9. ]

}

  2. #### 内联模式
  4. 配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "syncLocation": false,
  10.     "api": "/api/mock2/sample",
  11.     "quickSaveApi": "/api/mock2/sample/bulkUpdate",
  12.     "columns": [
  13.         {
  14.             "name": "id",
  15.             "label": "ID"
  16.         },
  17.         {
  18.             "name": "grade",
  19.             "label": "CSS grade",
  20.             "quickEdit": {
  21.                 "mode": "inline",
  22.                 "type": "select",
  23.                 "size": "xs",
  24.                 "options": [
  25.                     "A",
  26.                     "B",
  27.                     "C",
  28.                     "D",
  29.                     "X"
  30.                 ]
  31.             }
  32.         },
  33.         {
  34.             "name": "switch",
  35.             "label": "switch",
  36.             "quickEdit": {
  37.                 "mode": "inline",
  38.                 "type": "switch",
  39.                 "onText": "开启",
  40.                 "offText": "关闭"
  41.             }
  42.         }
  43.     ]
  44. }

即时保存

如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置 quickEdit 中的 "saveImmediately": true，然后配置接口quickSaveItemApi，可以直接将编辑表单项渲染至表格内操作。

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “quickSaveItemApi”: “/api/mock2/sample/$id”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “grade”, “label”: “CSS grade”, “quickEdit”: { “mode”: “inline”, “type”: “select”, “size”: “xs”, “options”: [ “A”, “B”, “C”, “D”, “X” ], “saveImmediately”: true } }, { “name”: “switch”, “label”: “switch”, “quickEdit”: { “mode”: “inline”, “type”: “switch”, “onText”: “开启”, “offText”: “关闭”, “saveImmediately”: true } } ] }

  2. 你也可以在`saveImmediately`中配置 api，实现即时保存
  4. ```schema: scope="body"
  5. {
  6.     "type": "crud",
  7.     "syncLocation": false,
  8.     "api": "/api/mock2/sample",
  9.     "columns": [
  10.         {
  11.             "name": "id",
  12.             "label": "ID"
  13.         },
  14.         {
  15.             "name": "grade",
  16.             "label": "CSS grade",
  17.             "quickEdit": {
  18.                 "mode": "inline",
  19.                 "type": "select",
  20.                 "size": "xs",
  21.                 "options": [
  22.                     "A",
  23.                     "B",
  24.                     "C",
  25.                     "D",
  26.                     "X"
  27.                 ],
  28.                 "saveImmediately": {
  29.                     "api": "/api/mock2/sample/$id"
  30.                 }
  31.             }
  32.         },
  33.         {
  34.             "name": "grade",
  35.             "label": "CSS grade",
  36.             "quickEdit": {
  37.                 "mode": "inline",
  38.                 "type": "switch",
  39.                 "onText": "开启",
  40.                 "offText": "关闭",
  41.                 "saveImmediately": true
  42.             }
  43.         }
  44.     ]
  45. }

配置快速编辑启动条件

通过 quickEditEnabledOn 配置表达式来实现，如下，只有 id 小于 5 的数据可以编辑 engine。

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “quickSaveApi”: “/api/mock2/sample/bulkUpdate”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “engine”, “label”: “Rendering engine”, “quickEdit”:true, “quickEditEnabledOn”: “this.id < 5” } ] }

  2. ## 顶部和底部工具栏
  4. crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在表格顶部和底部渲染组件，
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "syncLocation": false,
  10.     "api": "/api/mock2/sample",
  11.     "headerToolbar": [
  12.         {
  13.             "type": "tpl",
  14.             "tpl": "一共有${count}条数据"
  15.         }
  16.     ],
  17.     "footerToolbar": [
  18.         {
  19.             "type": "action",
  20.             "actionType": "dialog",
  21.             "label": "底部工具栏按钮",
  22.             "dialog": {
  23.                 "title": "一个弹框",
  24.                 "body": {
  25.                     "type": "tpl",
  26.                     "tpl": "一个简单的弹框"
  27.                 }
  28.             }
  29.         }
  30.     ],
  31.     "columns": [
  32.         {
  33.             "name": "id",
  34.             "label": "ID"
  35.         },
  36.         {
  37.             "name": "engine",
  38.             "label": "Rendering engine"
  39.         },
  40.         {
  41.             "name": "browser",
  42.             "label": "Browser"
  43.         },
  44.         {
  45.             "name": "platform",
  46.             "label": "Platform(s)"
  47.         },
  48.         {
  49.             "name": "version",
  50.             "label": "Engine version"
  51.         },
  52.         {
  53.             "name": "grade",
  54.             "label": "CSS grade"
  55.         }
  56.     ]
  57. }

上例中我们在顶部渲染了一段模板，通过${count}取到数据域中，CRUD 返回的count变量值；然后我们在底部渲染了一个按钮。

从上面一些例子中你可能已经发现，当我们不配置该属性时，crud 默认会在顶部和底部渲染一些组件，实际上，headerToolbar和footerToolbar默认会有下面这些配置：

  1. {
  2.   "headerToolbar": ["bulkActions", "pagination"],
  3.   "footerToolbar": ["statistics", "pagination"]
  4. }
  • 在顶部工具栏中：渲染批量操作按钮（如果在 crud 中，配置了 bulkActions 的话）和 分页组件
  • 在底部工具栏中：渲染数据统计组件 和 分页组件

如果你不希望在顶部或者底部渲染默认组件，你可以设置headerToolbar和footerToolbar为空数组[]

这些组件还能设置 align 来控制位置，有 left 和 right 两种，比如

  1. {
  2.   "headerToolbar": [
  3.     {
  4.       "type": "bulkActions",
  5.       "align": "right"
  6.     }
  7.   ]
  8. }

其它 amis 组件

在 headerToolbar 和 footerToolbar 中可以配置各种 amis 其它组件，比如按钮和 tpl：

```schema: scope=”body” { “type”: “crud”, “name”: “myCRUD”, “syncLocation”: false, “api”: “/api/mock2/sample”, “headerToolbar”: [ { “label”: “点击弹框”, “type”: “button”, “actionType”: “dialog”, “icon”: “fa fa-plus”, “level”: “primary”, “dialog”: { “title”: “弹框标题”, “body”: “这是一个弹框” } }, { “type”: “tpl”, “tpl”: “自定义模板” }, { “label”: “”, “icon”: “fa fa-repeat”, “type”: “button”, “actionType”: “reload”, “target”: “myCRUD”, “align”: “right” } ], “footerToolbar”: [], “columns”: [ { “name”: “id”, “label”: “ID” } ] }

  2. ### 分页
  4. 在`headerToolbar`或者`footerToolbar`数组中添加`pagination`字符串，并且在数据源接口中返回了数据总数`count`，即可以渲染分页组件；添加`switch-per-page`字符串，可以渲染切换每页条数组件
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "syncLocation": false,
  10.     "api": "/api/mock2/sample",
  11.     "headerToolbar": [],
  12.     "footerToolbar": ["switch-per-page", "pagination"],
  13.     "columns": [
  14.         {
  15.             "name": "id",
  16.             "label": "ID"
  17.         },
  18.         {
  19.             "name": "grade",
  20.             "label": "CSS grade",
  21.             "quickEdit": {
  22.                 "mode": "inline",
  23.                 "type": "select",
  24.                 "size": "xs",
  25.                 "options": [
  26.                     "A",
  27.                     "B",
  28.                     "C",
  29.                     "D",
  30.                     "X"
  31.                 ],
  32.                 "saveImmediately": {
  33.                     "api": "/api/mock2/sample/$id"
  34.                 }
  35.             }
  36.         }
  37.     ]
  38. }

crud默认不会处理数据分页，只是会把分页参数传给后端，由后端实现分页，并返回需要展示的数据 和 总数据数total变量：

默认传给后端的分页参数格式为：

  1. {
  2.   "page": 1,
  3.   "perPage": 10
  4. }

你可以通过配置pageField和perPageField来修改传给后端的分页数据格式，如：

  1. {
  2.   "pageField": "pageNo",
  3.   "perPageField": "pageSize"
  4. }

这样传给后端的参数格式将为：

  1. {
  2.   "pageNo": 1,
  3.   "pageSize": 10
  4. }

你可以通过数据映射，在api中获取这些参数。

  1. {
  2.     "type": "crud",
  3.     "api": {
  4.         "method": "get",
  5.         "url": "xxxxxx",
  6.         "data": {
  7.             "pageNo": "${page}",
  8.             "pageSize": "${perPage}",
  9.             ... // 一些其他参数
  10.         }
  11.     }
  12. }

分页有两种模式：

1. 知道数据总数

如果后端可以知道数据总数时，接口返回格式如下：

  1. {
  2.   "status": 0,
  3.   "msg": "",
  4.   "data": {
  5.     "items": [
  6.       {
  7.         // 每一行的数据。
  8.         "id": 1,
  9.         "xxx": "xxxx"
  10.       }
  11.     ],
  13.     "total": 200 // 注意这里不是当前请求返回的 items 的长度，而是数据库一共有多少条数据，用于生成分页，
  14.   }
  15. }

该模式下，会自动计算总页码数，渲染出有页码的分页组件

2. 不知道数据总数

如果后端无法知道数据总数，那么可以返回hasNext字段，来标识是否有下一页。

  1. {
  2.   "status": 0,
  3.   "msg": "",
  4.   "data": {
  5.     "items": [
  6.       {
  7.         // 每个成员的数据。
  8.         "id": 1,
  9.         "xxx": "xxxx"
  10.       }
  11.     ],
  13.     "hasNext": true // 标识是否有下一页。
  14.   }
  15. }

这样 amis 会在配置分页组件的地方，渲染出一个简单的页面跳转控件。

如果总数据只够展示一页，则默认不显示该分页组件

批量操作

在headerToolbar或者footerToolbar数组中添加bulkActions字符串，并且在 crud 上配置bulkActions行为按钮数组，可以实现选中表格项并批量操作的功能。

需要设置primaryField用于标识选中状态，配置当前行数据中的某一唯一标识字段，例如id，否则可能会出现无法选中的问题

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “headerToolbar”: [ “bulkActions” ], “bulkActions”: [ { “label”: “批量删除”, “actionType”: “ajax”, “api”: “delete:/api/mock2/sample/${ids|raw}”, “confirmText”: “确定要批量删除?” }, { “label”: “批量修改”, “actionType”: “dialog”, “dialog”: { “title”: “批量编辑”, “body”: { “type”: “form”, “api”: “/api/mock2/sample/bulkUpdate2”, “body”: [ { “type”: “hidden”, “name”: “ids” }, { “type”: “input-text”, “name”: “engine”, “label”: “Engine” } ] } } } ], “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” } ] }

  2. 批量操作会默认将下面数据添加到数据域中以供按钮行为使用
  4. - `items` `Array<object>` selectedItems 的别名
  5. - `rows` items 的别名，推荐用 items。
  6. - `selectedItems` `Array<object>` 选中的行数据集合
  7. - `unSelectedItems` `Array<object>` 没选中的行数据也可获取。
  8. - `ids` `string` 多个 id 值用英文逗号隔开，前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。
  9. - `第一行所有行数据` 还有第一行的所有行数据也会包含进去。
  11. 你可以通过[数据映射]($docs-docs-concepts-data-mapping)，在`api`中获取这些参数。
  13. **约束批量操作**
  15. 有时候并不是勾选了就能支持批量操作的，比如想约束如果勾选了某条数据 owner 值不是当前用户的就不可以操作。
  17. 有两种方式来约束。
  19. 1. 批量操作按钮上配置 `disabledOn` 值为 `this.selectedItems.some(item => item.owner === this.amisUser.name)`
  20. 2. 给表格加上 `itemCheckableOn` 值为 `this.owner === this.amisUser.name` 表示只有 owner 是自己的才可以打勾。
  22. **保留条目选择**
  24. 默认分页、搜素后，用户选择条目会被清空，配置`keepItemSelectionOnPageChange`属性后会保留用户选择，可以实现跨页面批量操作。
  25. 同时可以通过配置`maxKeepItemSelectionLength`属性限制最大勾选数
  27. ```schema: scope="body"
  28. {
  29.     "type": "crud",
  30.     "syncLocation": false,
  31.     "api": "/api/mock2/sample",
  32.     "headerToolbar": [
  33.         "bulkActions"
  34.     ],
  35.     "keepItemSelectionOnPageChange": true,
  36.     "maxKeepItemSelectionLength": 4,
  37.     "bulkActions": [
  38.         {
  39.             "label": "批量删除",
  40.             "actionType": "ajax",
  41.             "api": "delete:/api/mock2/sample/${ids|raw}",
  42.             "confirmText": "确定要批量删除?"
  43.         },
  44.         {
  45.             "label": "批量修改",
  46.             "actionType": "dialog",
  47.             "dialog": {
  48.                 "title": "批量编辑",
  49.                 "body": {
  50.                     "type": "form",
  51.                     "api": "/api/mock2/sample/bulkUpdate2",
  52.                     "body": [
  53.                         {
  54.                             "type": "hidden",
  55.                             "name": "ids"
  56.                         },
  57.                         {
  58.                             "type": "input-text",
  59.                             "name": "engine",
  60.                             "label": "Engine"
  61.                         }
  62.                     ]
  63.                 }
  64.             }
  65.         }
  66.     ],
  67.     "columns": [
  68.         {
  69.             "name": "id",
  70.             "label": "ID"
  71.         },
  72.         {
  73.             "name": "engine",
  74.             "label": "Rendering engine"
  75.         },
  76.         {
  77.             "name": "browser",
  78.             "label": "Browser"
  79.         },
  80.         {
  81.             "name": "platform",
  82.             "label": "Platform(s)"
  83.         },
  84.         {
  85.             "name": "version",
  86.             "label": "Engine version"
  87.         },
  88.         {
  89.             "name": "grade",
  90.             "label": "CSS grade"
  91.         }
  92.     ]
  93. }

还可以设置 "checkOnItemClick": true 属性来支持点击一行的触发选中状态切换

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “checkOnItemClick”: true, “headerToolbar”: [ “bulkActions” ], “bulkActions”: [ { “label”: “批量删除”, “actionType”: “ajax”, “api”: “delete:/api/mock2/sample/${ids|raw}”, “confirmText”: “确定要批量删除?” }, { “label”: “批量修改”, “actionType”: “dialog”, “dialog”: { “title”: “批量编辑”, “body”: { “type”: “form”, “api”: “/api/mock2/sample/bulkUpdate2”, “body”: [ { “type”: “hidden”, “name”: “ids” }, { “type”: “input-text”, “name”: “engine”, “label”: “Engine” } ] } } } ], “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” } ] }

  2. ### 数据统计
  4. 在`headerToolbar`或者`footerToolbar`数组中添加`statistics`字符串，可以实现简单的数据统计功能
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "syncLocation": false,
  10.     "api": "/api/mock2/sample",
  11.     "headerToolbar": ["statistics"],
  12.     "columns": [
  13.         {
  14.             "name": "id",
  15.             "label": "ID"
  16.         },
  17.         {
  18.             "name": "engine",
  19.             "label": "Rendering engine"
  20.         },
  21.         {
  22.             "name": "browser",
  23.             "label": "Browser"
  24.         },
  25.         {
  26.             "name": "platform",
  27.             "label": "Platform(s)"
  28.         },
  29.         {
  30.             "name": "version",
  31.             "label": "Engine version"
  32.         },
  33.         {
  34.             "name": "grade",
  35.             "label": "CSS grade"
  36.         }
  37.     ]
  38. }

加载更多

在headerToolbar或者footerToolbar数组中添加load-more字符串，可以实现点击加载更多功能。

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “headerToolbar”: [“load-more”], “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” } ] }

  2. ### 导出 CSV
  4. 在`headerToolbar`或者`footerToolbar`数组中添加`export-csv`字符串，可以实现点击下载 CSV 的功能，注意这里只包括当前分页的数据，要下载全部数据需要通过后端 API 实现。
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "syncLocation": false,
  10.     "api": "/api/mock2/sample",
  11.     "headerToolbar": ["export-csv"],
  12.     "columns": [
  13.         {
  14.             "name": "id",
  15.             "label": "ID"
  16.         },
  17.         {
  18.             "name": "engine",
  19.             "label": "Rendering engine"
  20.         },
  21.         {
  22.             "name": "browser",
  23.             "label": "Browser"
  24.         },
  25.         {
  26.             "name": "platform",
  27.             "label": "Platform(s)"
  28.         },
  29.         {
  30.             "name": "version",
  31.             "label": "Engine version"
  32.         },
  33.         {
  34.             "name": "grade",
  35.             "label": "CSS grade"
  36.         }
  37.     ]
  38. }

通过 api 导出 CSV

1.4.0 及以上版本

export-csv 可以单独配置 api 实现导出全量功能，这个 api 的返回结果和 CRUD 类似

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “headerToolbar”: [{ “type”: “export-csv”, “label”: “全量导出 CSV”, “api”: “/api/mock2/sample” }], “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” } ] }

  2. ### 导出 Excel
  4. 在`headerToolbar`或者`footerToolbar`数组中添加`export-excel`字符串，可以实现点击下载 Excel 的功能，和导出 CSV 一样只包括当前分页的数据，但它们有明显区别：
  6. 1. 导出 CSV 是将 api 返回数据导出，表头是数据里的 key，而 Excel 的表头使用的是 label。
  7. 2. 导出 Excel 更重视展现一致，支持合并单元格、链接、mapping 映射、图片（需要加[跨域 Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)）。
  8. 3. 导出 Excel 只在 `mode` 为 `table` 时能用。
  10. ```schema: scope="body"
  11. {
  12.     "type": "crud",
  13.     "syncLocation": false,
  14.     "api": "/api/mock2/sample",
  15.     "headerToolbar": ["export-excel"],
  16.     "columns": [
  17.         {
  18.             "name": "id",
  19.             "label": "ID"
  20.         },
  21.         {
  22.             "name": "engine",
  23.             "label": "Rendering engine"
  24.         },
  25.         {
  26.             "name": "browser",
  27.             "label": "Browser"
  28.         },
  29.         {
  30.             "name": "platform",
  31.             "label": "Platform(s)"
  32.         },
  33.         {
  34.             "name": "version",
  35.             "label": "Engine version"
  36.         },
  37.         {
  38.             "name": "grade",
  39.             "label": "CSS grade"
  40.         }
  41.     ]
  42. }

只导出部分列

1.4.0 及以上版本

通过配置 columns 来支持只导出部分列，其中是需要导出的列 name 数组

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “headerToolbar”: [{ “type”: “export-excel”, “label”: “只导出 engine 和 browser 列”, “columns”: [“engine”, “browser”] }], “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” } ] }

  2. > 1.8.0 及以上版本
  4. `columns` 支持变量，可以从上下文取数组
  6. ```schema
  7. {
  8.     "type": "page",
  9.     "data": {
  10.         "columns": ["engine", "browser"]
  11.     },
  12.     "body": {
  13.         "type": "crud",
  14.         "syncLocation": false,
  15.         "api": "/api/mock2/sample",
  16.         "headerToolbar": [{
  17.             "type": "export-excel",
  18.             "label": "只导出 engine 和  browser 列",
  19.             "columns": "${columns}"
  20.         }],
  21.         "columns": [
  22.             {
  23.                 "name": "id",
  24.                 "label": "ID"
  25.             },
  26.             {
  27.                 "name": "engine",
  28.                 "label": "Rendering engine"
  29.             },
  30.             {
  31.                 "name": "browser",
  32.                 "label": "Browser"
  33.             },
  34.             {
  35.                 "name": "platform",
  36.                 "label": "Platform(s)"
  37.             },
  38.             {
  39.                 "name": "version",
  40.                 "label": "Engine version"
  41.             },
  42.             {
  43.                 "name": "grade",
  44.                 "label": "CSS grade"
  45.             }
  46.         ]
  47.     }
  48. }

自定义导出列

1.8.0 及以上版本

除了简单隐藏某些列，还可以通过 exportColumns 完全控制导出列，比如新增某些列，它的配置项和 columns 一致

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “headerToolbar”: [{ “type”: “export-excel”, “label”: “导出 Excel”, “exportColumns”: [ { “name”: “engine”, “label”: “Engine” }, { “type”: “tpl”, “label”: “tpl”, “tpl”: “${browser}” } ] }], “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” } ] }

  2. #### 通过 api 导出 Excel
  4. > 1.1.6 以上版本支持
  6. 除了前面的用法，还可以配置 api 来通过数据请求来导出 Excel，实现类似全量导出的功能
  8. ```schema: scope="body"
  9. {
  10.     "type": "crud",
  11.     "syncLocation": false,
  12.     "headerToolbar": [{
  13.         "type": "export-excel",
  14.         "label": "全量导出 Excel",
  15.         "api": "/api/mock2/sample"
  16.     }],
  17.     "columns": [
  18.         {
  19.             "name": "id",
  20.             "label": "ID"
  21.         },
  22.         {
  23.             "name": "engine",
  24.             "label": "Rendering engine"
  25.         },
  26.         {
  27.             "name": "browser",
  28.             "label": "Browser"
  29.         },
  30.         {
  31.             "name": "platform",
  32.             "label": "Platform(s)"
  33.         },
  34.         {
  35.             "name": "version",
  36.             "label": "Engine version"
  37.         },
  38.         {
  39.             "name": "grade",
  40.             "label": "CSS grade"
  41.         }
  42.     ]
  43. }

自定义导出 Excel 的文件名

1.1.7 以上版本支持

通过 filename 自定义导出文件名（支持模板变量）

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “headerToolbar”: [{ “type”: “export-excel”, “label”: “自定义导出 Excel”, “filename”: “自定义文件名${test}”, “api”: “/api/mock2/sample” }], “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” } ] }

  2. ### 显隐显示查询条件表单
  4. 在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`"filterTogglable": true`后，可以渲染一个可以切换显示查询表单的功能按钮
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "syncLocation": false,
  10.     "api": "/api/mock2/sample",
  11.      "filter": {
  12.         "title": "条件搜索",
  13.         "body": [
  14.             {
  15.                 "type": "input-text",
  16.                 "name": "keywords",
  17.                 "placeholder": "通过关键字搜索"
  18.             }
  19.         ]
  20.     },
  21.     "filterTogglable": true,
  22.     "headerToolbar": [
  23.         "filter-toggler"
  24.     ],
  25.     "columns": [
  26.         {
  27.             "name": "id",
  28.             "label": "ID"
  29.         },
  30.         {
  31.             "name": "engine",
  32.             "label": "Rendering engine"
  33.         },
  34.         {
  35.             "name": "browser",
  36.             "label": "Browser"
  37.         },
  38.         {
  39.             "name": "platform",
  40.             "label": "Platform(s)"
  41.         },
  42.         {
  43.             "name": "version",
  44.             "label": "Engine version"
  45.         },
  46.         {
  47.             "name": "grade",
  48.             "label": "CSS grade"
  49.         }
  50.     ]
  51. }

刷新按钮

1.5.0 及以上版本

可以通过 reload 来展现刷新按钮

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “headerToolbar”: [ “reload” ], “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” } ] }

  2. 它其实是个简化的 `button` 组件，可以参考 `button` 组件的文档做调整。`reload`支持两种触发方式：
  4. - `"type": "reload"`，CRUD 内置的方法
  5. - `{"actionType": "reload", "target": "targetName"}`，动作触发
  7. ```schema: scope="body"
  8. {
  9.     "type": "crud",
  10.     "name": "crud",
  11.     "syncLocation": false,
  12.     "api": "/api/mock2/sample",
  13.     "headerToolbar": [
  14.         {
  15.             "type": "action",
  16.             "align": "right",
  17.             "icon": "iconfont icon-refresh",
  18.             "label": "刷新(actionType)",
  19.             "tooltip": "",
  20.             "level": "primary",
  21.             "actionType": 'reload',
  22.             "target": 'crud'
  23.         },
  24.         {
  25.             "type": "reload",
  26.             "align": "right",
  27.             "icon": "iconfont icon-refresh",
  28.             "label": "刷新(type)",
  29.             "tooltip": "",
  30.             "level": "primary"
  31.         }
  32.     ],
  33.     "columns": [
  34.         {
  35.             "name": "id",
  36.             "label": "ID"
  37.         },
  38.         {
  39.             "name": "engine",
  40.             "label": "Rendering engine"
  41.         },
  42.         {
  43.             "name": "browser",
  44.             "label": "Browser"
  45.         },
  46.         {
  47.             "name": "platform",
  48.             "label": "Platform(s)"
  49.         },
  50.         {
  51.             "name": "version",
  52.             "label": "Engine version"
  53.         },
  54.         {
  55.             "name": "grade",
  56.             "label": "CSS grade"
  57.         }
  58.     ]
  59. }

总结行

如果是默认的表格模式，还支持增加总结行，具体请参考 table 的文档。

弹框与数据链

一般 CRUD 中会有弹框，然后进行数据展示或进行二次编辑的需求，通过在列中配置按钮，然后配置弹框，弹框内配置相应的组件即可。

现在问题是，如何获取到当前操作行的数据呢？

实际上，你操作当前行数据，会成为弹框这层节点的父级节点，因此你可以通过 数据链，获取到上层，也就是点击的行的数据，具体获取方法和普通组件获取数据域中数据的方法相同，

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “draggable”: true, “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” }, { “type”: “button”, “label”: “一个弹框”, “actionType”: “dialog”, “dialog”: { “title”: “一个弹框”, “body”: [ { “type”: “tpl”, “tpl”: “行数据中 Browser 值为：${browser}” }, { “type”: “divider” }, { “type”: “form”, “api”: “/api/mock2/sample/$id”, “body”: [ { “type”: “input-text”, “name”: “engine”, “label”: “Engine” } ] } ] } } ] }

  2. 例如上例中 Tpl 用 `${browser}` 获取 `browser` 变量，Form 中配置`"name": "engine"` 映射 `engine` 变量。
  4. > 遇到数据字段冲突时，可以在 [弹框上通过配置数据映射](./dialog#%E5%BC%B9%E6%A1%86%E4%B8%8E%E6%95%B0%E6%8D%AE%E6%98%A0%E5%B0%84) 解决。
  6. ## 拖拽排序
  8. 通过配置`"draggable": true`和保存排序接口`saveOrderApi`，可以实现拖拽排序功能，
  10. ```schema: scope="body"
  11. {
  12.     "type": "crud",
  13.     "syncLocation": false,
  14.     "api": "/api/mock2/sample",
  15.     "draggable": true,
  16.     "columns": [
  17.         {
  18.             "name": "id",
  19.             "label": "ID"
  20.         },
  21.         {
  22.             "name": "engine",
  23.             "label": "Rendering engine"
  24.         },
  25.         {
  26.             "name": "browser",
  27.             "label": "Browser"
  28.         },
  29.         {
  30.             "name": "platform",
  31.             "label": "Platform(s)"
  32.         },
  33.         {
  34.             "name": "version",
  35.             "label": "Engine version"
  36.         },
  37.         {
  38.             "name": "grade",
  39.             "label": "CSS grade"
  40.         }
  41.     ]
  42. }

同样的，前端是不会处理排序结果，需要后端调用接口saveOrderApi来保存新的顺序

发送方式默认为POST，会包含以下信息。

  • ids 字符串如： 2,3,1,4,5,6 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 id，则需要配置如： primaryField: "order_id"。注意：无论你配置成什么 primayField，这个字段名始终是 ids。
  • rows Array<Item> 数组格式，新的顺序，数组里面包含所有原始信息。

  • insertAfter 或者 insertBefore 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如：

    1. {
    2.   "insertAfter": {
    3.     "2": ["1", "3"],
    4.     "6": ["4", "5"]
    5.   }
    6. }

    表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。

你可以通过数据映射，在api中获取这些参数。

如下:

  1. {
  2.   "saveOrderApi": {
  3.     "url": "/api/xxxx",
  4.     "data": {
  5.       "ids": "${ids}"
  6.     }
  7.   }
  8. }

这样就只会发送 ids 了。

列排序

通过配置headerToolbar 中 columns-toggler 的 "draggable": true可以实现设置显示列和列排序功能。

```schema: scope=”body” { “type”: “crud”, “api”: “/api/mock2/sample”, “syncLocation”: false, “headerToolbar”: [ { “type”: “columns-toggler”, “align”: “right”, “draggable”: true, “icon”: “fas fa-cog”, “overlay”: true, “footerBtnSize”: “sm” } ], “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” } ] }

  2. ## 单条操作
  4. 当操作对象是单条数据时这类操作叫单条操作，比如：编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成（其他模式参考 table 模式）。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮，将数据通过 api 发送给后端完成。
  6. CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息：
  8. - `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。
  9. - `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。
  10. - `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。
  11. - `prevIndex` `number`
  12. - `nextIndex` `number`
  14. 你可以通过[数据映射]($docs-docs-concepts-data-mapping)，在`api`中获取这些参数。
  16. 如果你的按钮类型是 ajax，你也可以限定只发送部分数据比如。
  18. ```json
  19. {
  20.   "type": "button",
  21.   "label": "删除",
  22.   "actionType": "ajax",
  23.   "api": "delete:/api/xxxx/$id",
  24.   "confirmText": "确定要删除？"
  25. }

上面这个例子就会发送 id 字段了，如果想要全部发送过去同时还想添加点别的字段就这样：

  1. {
  2.   "type": "button",
  3.   "label": "删除",
  4.   "actionType": "ajax",
  5.   "api": {
  6.     "method": "post",
  7.     "url": "/api/xxxx/$id",
  8.     "data": {
  9.       "&": "$$",
  10.       "op": "delete"
  11.     }
  12.   },
  13.   "confirmText": "确定要删除？"
  14. }

注意： 如果使用feedback弹窗，如果不想关闭弹窗时触发crud再次拉取数据，需要设置button的"reload":"none"

过滤条件参数同步地址栏

默认 CRUD 会将过滤条件参数同步至浏览器地址栏中，比如搜索条件、当前页数，这也做的目的是刷新页面的时候还能进入之前的分页。

但也会导致地址栏中的参数数据合并到顶层的数据链中，例如：自动给同名的表单项设置默认值。如果不希望这个功能，可以设置 syncLocation: false 来关闭。

本文中的例子为了不相互影响都关闭了这个功能。 另外如果需要使用接口联动，需要设置syncLocation: false

前端一次性加载

如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置loadDataOnce实现前端一次性加载并支持分页和条件过滤操作

```schema: scope=”body” { “type”: “crud”, “syncLocation”: false, “api”: “/api/mock2/sample”, “loadDataOnce”: true, “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”, “sortable”: true } ] }

  2. 配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索，需要用到[数据映射]($docs-docs-concepts-data-mapping)功能：
  4. ```schema: scope="body"
  5. {
  6.     "type": "crud",
  7.     "syncLocation": false,
  8.     "api": "/api/mock2/sample",
  9.     "loadDataOnce": true,
  10.     "source": "${rows | filter:engine:match:keywords}",
  11.     "filter":{
  12.         "body": [
  13.             {
  14.                 "type": "input-text",
  15.                 "name": "keywords",
  16.                 "label": "引擎"
  17.             }
  18.         ]
  19.     },
  20.     "columns": [
  21.         {
  22.             "name": "id",
  23.             "label": "ID"
  24.         },
  25.         {
  26.             "name": "engine",
  27.             "label": "Rendering engine"
  28.         },
  29.         {
  30.             "name": "browser",
  31.             "label": "Browser"
  32.         },
  33.         {
  34.             "name": "platform",
  35.             "label": "Platform(s)"
  36.         },
  37.         {
  38.             "name": "version",
  39.             "label": "Engine version"
  40.         },
  41.         {
  42.             "name": "grade",
  43.             "label": "CSS grade"
  44.         }
  45.     ]
  46. }

上例使用了数据映射中的filter过滤器，在前端实现了engine列的搜索功能。

注意：如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能

动态列

since 1.1.6

在 1.1.6 之前的版本，只能通过 service + schemaApi 让后端返回 schema 配置来实现，1.1.6 版本之后可以直接通过 crud 的数据接口返回了。 用这种方式可以简化动态列的实现，与 items 并列返回 columns 数组即即可。

```schema: scope=”body” { “type”: “crud”, “api”: “/api/crud/dynamic?waitSeconds=1” }

  2. ## 使用数据链中的数据
  4. 可以通过 `source` 属性来自定义去返回数据的字段，或者取数据域中的数据，比如
  6. ```schema
  7. {
  8.   "type": "page",
  9.   "data": {
  10.     "myItems": [
  11.       {
  12.         "id": 1
  13.       }
  14.     ]
  15.   },
  16.   "body": {
  17.     "type": "crud",
  18.     "source": "${myItems}",
  19.     "columns": [
  20.       {
  21.         "name": "id",
  22.         "label": "ID"
  23.       }
  24.     ]
  25.   }
  26. }

自定义点击行的行为

1.4.0 及以上版本

配置 itemAction 可以实现点击某一行后进行自定义操作，支持 action 里的所有配置，比如弹框、刷新其它组件等。

```schema: scope=”body” { “type”: “crud”, “api”: “/api/mock2/sample”, “syncLocation”: false, “itemAction”: { “type”: “button”, “actionType”: “dialog”, “dialog”: { “title”: “详情”, “body”: “当前行的数据 browser: ${browser}, version: ${version}” } }, “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” } ] }

  2. 注意这个属性和 `checkOnItemClick` 冲突，因为都是定义行的点击行为，开启 `itemAction` 后 `checkOnItemClick` 将会失效。
  4. > 1.4.2 及以上版本
  6. itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，方便进行下一步操作
  8. ```schema: scope="body"
  9. {
  10.     "type": "crud",
  11.     "api": "/api/mock2/sample",
  12.     "syncLocation": false,
  13.     "itemAction": {
  14.       "type": "button",
  15.       "onClick": "console.log(data); alert(data.engine)"
  16.     },
  17.     "columns": [
  18.         {
  19.             "name": "id",
  20.             "label": "ID"
  21.         },
  22.         {
  23.             "name": "engine",
  24.             "label": "Rendering engine"
  25.         },
  26.         {
  27.             "name": "browser",
  28.             "label": "Browser"
  29.         },
  30.         {
  31.             "name": "platform",
  32.             "label": "Platform(s)"
  33.         },
  34.         {
  35.             "name": "version",
  36.             "label": "Engine version"
  37.         },
  38.         {
  39.             "name": "grade",
  40.             "label": "CSS grade"
  41.         }
  42.     ]
  43. }

属性表

属性名 类型 默认值 说明
type string type 指定为 CRUD 渲染器
mode string "table" "table" 、 "cards" 或者 "list"
title string "" 可设置成空，当设置成空时，没有标题栏
className string 表格外层 Dom 的类名
api API CRUD 用来获取列表数据的 api。
loadDataOnce boolean 是否一次性加载所有数据（前端分页）
loadDataOnceFetchOnFilter boolean true 在开启 loadDataOnce 时，filter 时是否去重新请求 api
source string 数据映射接口返回某字段的值，不设置会默认使用接口返回的${items}或者${rows}，也可以设置成上层数据源的内容
filter Form 设置过滤器，当该表单提交后，会把数据带给当前 mode 刷新列表。
filterTogglable boolean false 是否可显隐过滤器
filterDefaultVisible boolean true 设置过滤器默认是否可见。
initFetch boolean true 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据
interval number 3000 刷新时间(最低 1000)
silentPolling boolean false 配置刷新时是否隐藏加载动画
stopAutoRefreshWhen string "" 通过表达式来配置停止刷新的条件
stopAutoRefreshWhenModalIsOpen boolean false 当有弹框时关闭自动刷新，关闭弹框又恢复
syncLocation boolean true 是否将过滤条件的参数同步到地址栏
draggable boolean false 是否可通过拖拽排序
resizable boolean true 是否可以调整列宽度
itemDraggableOn boolean 用表达式来配置是否可拖拽排序
saveOrderApi API 保存排序的 api。
quickSaveApi API 快速编辑后用来批量保存的 API。
quickSaveItemApi API 快速编辑配置成及时保存时使用的 API。
bulkActions Array<Action> 批量操作列表，配置后，表格可进行选中操作。
messages Object 覆盖消息提示，如果不指定，将采用 api 返回的 message
messages.fetchFailed string 获取失败时提示
messages.saveOrderFailed string 保存顺序失败提示
messages.saveOrderSuccess string 保存顺序成功提示
messages.quickSaveFailed string 快速保存失败提示
messages.quickSaveSuccess string 快速保存成功提示
primaryField string "id" 设置 ID 字段名。
perPage number 10 设置一页显示多少条数据。
orderBy string 默认排序字段，这个是传给后端，需要后端接口实现
orderDir asc \ desc 排序方向
defaultParams Object 设置默认 filter 默认参数，会在查询的时候一起发给后端
pageField string "page" 设置分页页码字段名。
perPageField string "perPage" 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。
perPageAvailable Array<number> [5, 10, 20, 50, 100] 设置一页显示多少条数据下拉框可选条数。
orderField string 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。
hideQuickSaveBtn boolean false 隐藏顶部快速保存提示
autoJumpToTopOnPagerChange boolean false 当切分页的时候，是否自动跳顶部。
syncResponse2Query boolean true 将返回数据同步到过滤器上。
keepItemSelectionOnPageChange boolean true 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。
labelTpl string 单条描述模板，keepItemSelectionOnPageChange设置为true后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。
headerToolbar Array ['bulkActions', 'pagination'] 顶部工具栏配置
footerToolbar Array ['statistics', 'pagination'] 底部工具栏配置
alwaysShowPagination boolean false 是否总是显示分页
affixHeader boolean true 是否固定表头(table 下)
autoGenerateFilter boolean false 是否开启查询区域，开启后会根据列元素的 searchable 属性值，自动生成查询条件表单

注意除了上面这些属性，CRUD 在不同模式下的属性需要参考各自的文档，比如

columns-toggler 属性表

属性名 类型 默认值 说明
label string 按钮文字
tooltip string 按钮提示文字
disabledTip string 按钮禁用状态下的提示
align `”left” \ “right”` "left" 点击内容是否关闭
size `”xs” \ “sm” \ “md” \ “lg”` 按钮大小，参考按钮
footerBtnSize `”xs” \ “sm” \ “md” \ “lg”` 弹窗底部按钮大小，参考按钮
level string default 按钮样式，参考按钮
draggable boolean false 是否可通过拖拽排序
defaultIsOpened boolean false 默认是否展开
hideExpandIcon boolean true 是否隐藏展开的图标
overlay boolean false 是否显示遮罩层
closeOnOutside boolean 点击外部是否关闭
closeOnClick boolean 点击内容是否关闭
iconOnly boolean false 是否只显示图标。
icon string 按钮的图标
className string 外层 CSS 类名
btnClassName string 按钮的 CSS 类名