diff --git a/gh-pages/audio.html b/gh-pages/audio.html index 53f23d37..d55c6f6d 100644 --- a/gh-pages/audio.html +++ b/gh-pages/audio.html @@ -25,10 +25,10 @@
- - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + \n除了能弹框,它还能设定很多行为比如:提交表单、发送 ajax、页面跳转、关闭弹框、复制文本等等。
\n所有actionType
都支持的通用配置项
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \naction | \n指定为 Page 渲染器。 | \n
actionType | \nstring | \n- | \n【必填】这是 action 最核心的配置,来指定该 action 的作用类型,支持:ajax 、link 、url 、drawer 、dialog 、confirm 、cancel 、prev 、next 、copy 、close 。 | \n
label | \nstring | \n- | \n按钮文本。可用 ${xxx} 取值。 | \n
level | \nstring | \ndefault | \n按钮样式,支持:link 、primary 、secondary 、info 、success 、warning 、danger 、light 、dark 、default 。 | \n
size | \nstring | \n- | \n按钮大小,支持:xs 、sm 、md 、lg 。 | \n
icon | \nstring | \n- | \n设置图标,例如fa fa-plus 。 | \n
iconClassName | \nstring | \n- | \n给图标上添加类名。 | \n
active | \nboolean | \n- | \n按钮是否高亮。 | \n
activeLevel | \nstring | \n- | \n按钮高亮时的样式,配置支持同level 。 | \n
activeClassName | \nstring | \nis-active | \n给按钮高亮添加类名。 | \n
block | \nboolean | \n- | \n用display:"block" 来显示按钮。 | \n
confirmText | \nstring | \n- | \n当设置后,操作在开始前会询问用户。可用 ${xxx} 取值。 | \n
reload | \nstring | \n- | \n指定此次操作完后,需要刷新的目标组件名字(组件的name 值,自己配置的),多个请用 , 号隔开。 | \n
tooltip | \nstring | \n- | \n鼠标停留时弹出该段文字,也可以配置对象类型:字段为title 和content 。可用 ${xxx} 取值。 | \n
disabledTip | \nstring | \n- | \n被禁用后鼠标停留时弹出该段文字,也可以配置对象类型:字段为title 和content 。可用 ${xxx} 取值。 | \n
tooltipPlacement | \nstring | \ntop | \n如果配置了tooltip 或者disabledTip ,指定提示信息位置,可配置top 、bottom 、left 、right 。 | \n
close | \nboolean | \n- | \n当action 配置在dialog 或drawer 的actions 中时,配置为true 指定此次操作完后关闭当前dialog 或drawer 。 | \n
required | \nArray<string> | \n- | \n配置字符串数组,指定在form 中进行操作之前,需要指定的字段名的表单项通过验证 | \n
下面会分别介绍每种类型的 Action 配置项
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \najax | \n发送请求 | \n
api | \nstring 或 ApiObject | \n- | \n请求地址,参考 api 格式说明。 | \n
redirect | \nstring | \n- | \n指定当前请求结束后跳转的路径,可用 ${xxx} 取值。 | \n
feedback | \nDialogObject | \n- | \n如果 ajax 类型的,当 ajax 返回正常后,还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog | \n
feedback.visibleOn | \nstring | \n- | \n可以用来配置 feedback 弹框出现的条件。 | \n
feedback.skipRestOnCancel | \nboolean | \n- | \n如果配置了,在 feedback 弹窗里面,如果用户点了取消,那么这个按钮的其他动作也不做了。 | \n
messages | \nobject | \n- | \nsuccess :ajax 操作成功后提示,可以不指定,不指定时以 api 返回为准。failed :ajax 操作失败提示。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nlink | \n单页跳转 | \n
link | \nstring | \nlink | \n用来指定跳转地址,跟 url 不同的是,这是单页跳转方式,不会渲染浏览器,请指定 amis 平台内的页面。可用 ${xxx} 取值。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nurl | \n页面跳转 | \n
url | \nstring | \n- | \n按钮点击后,会打开指定页面。可用 ${xxx} 取值。 | \n
blank | \nboolean | \nfalse | \n如果为 true 将在新 tab 页面打开。 | \n
注意:由于 amis 平台内 http 地址会被替换成 proxy 地址,所以在 amis 平台内使用请加上 raw: 作为前缀。 比如:raw:http://www.baidu.com
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \ndialog | \n点击后显示一个弹出框 | \n
dialog | \nstring 或 DialogObject | \n- | \n指定弹框内容,格式可参考Dialog | \n
nextCondition | \nboolean | \n- | \n可以用来设置下一条数据的条件,默认为 true 。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \ndrawer | \n点击后显示一个侧边栏 | \n
drawer | \nstring 或 DrawerObject | \n- | \n指定弹框内容,格式可参考Drawer | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \ncopy | \n复制一段内容到粘贴板 | \n
content | \nstring | \n- | \n指定复制的内容。可用 ${xxx} 取值。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nreload | \n刷新目标组件 | \n
target | \nstring | \n- | \n需要刷新的目标组件名字(组件的name 值,自己配置的),多个请用 , 号隔开。 | \n
该 actionType 为FormItem-Table专用
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nadd | \n给指定FormItem-Table 添加一条数据, | \n
target | \nstring | \n- | \n指定FormItem-Table 的名字(Table 的name 值),多个请用 , 号隔开。 | \n
Action 是一种特殊的渲染器,它本身是一个按钮,同时它能触发事件。
\n\n除了能弹框,它还能设定很多行为比如:提交表单、发送 ajax、页面跳转、关闭弹框、复制文本等等。
\n所有actionType
都支持的通用配置项
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \naction | \n指定为 Page 渲染器。 | \n
actionType | \nstring | \n- | \n【必填】这是action最核心的配置,来指定该action的作用类型,支持:ajax 、link 、url 、drawer 、dialog 、confirm 、cancel 、prev 、next 、copy 、close 。 | \n
label | \nstring | \n- | \n按钮文本。可用 ${xxx} 取值。 | \n
level | \nstring | \ndefault | \n按钮样式,支持:link 、primary 、secondary 、info 、success 、warning 、danger 、light 、dark 、default 。 | \n
size | \nstring | \n- | \n按钮大小,支持:xs 、sm 、md 、lg 。 | \n
icon | \nstring | \n- | \n设置图标,例如fa fa-plus 。 | \n
iconClassName | \nstring | \n- | \n给图标上添加类名。 | \n
active | \nboolean | \n- | \n按钮是否高亮。 | \n
activeLevel | \nstring | \n- | \n按钮高亮时的样式,配置支持同level 。 | \n
activeClassName | \nstring | \nis-active | \n给按钮高亮添加类名。 | \n
block | \nboolean | \n- | \n用display:"block" 来显示按钮。 | \n
confirmText | \nstring | \n- | \n当设置后,操作在开始前会询问用户。可用 ${xxx} 取值。 | \n
reload | \nstring | \n- | \n指定此次操作完后,需要刷新的目标组件名字(组件的name 值,自己配置的),多个请用 , 号隔开。 | \n
tooltip | \nstring | \n- | \n鼠标停留时弹出该段文字,也可以配置对象类型:字段为title 和content 。可用 ${xxx} 取值。 | \n
disabledTip | \nstring | \n- | \n被禁用后鼠标停留时弹出该段文字,也可以配置对象类型:字段为title 和content 。可用 ${xxx} 取值。 | \n
tooltipPlacement | \nstring | \ntop | \n如果配置了tooltip 或者disabledTip ,指定提示信息位置,可配置top 、bottom 、left 、right 。 | \n
close | \nboolean | \n- | \n当action 配置在dialog 或drawer 的actions 中时,配置为true 指定此次操作完后关闭当前dialog 或drawer 。 | \n
required | \nArray<string> | \n- | \n配置字符串数组,指定在form 中进行操作之前,需要指定的字段名的表单项通过验证 | \n
下面会分别介绍每种类型的Action配置项
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \najax | \n发送请求 | \n
api | \nstring 或 ApiObject | \n- | \n请求地址,参考 api 格式说明。 | \n
redirect | \nstring | \n- | \n指定当前请求结束后跳转的路径,可用 ${xxx} 取值。 | \n
feedback | \nDialogObject | \n- | \n如果 ajax 类型的,当 ajax 返回正常后,还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog | \n
messages | \nobject | \n- | \nsuccess :ajax 操作成功后提示,可以不指定,不指定时以 api 返回为准。failed :ajax 操作失败提示。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nlink | \n单页跳转 | \n
link | \nstring | \nlink | \n用来指定跳转地址,跟 url 不同的是,这是单页跳转方式,不会渲染浏览器,请指定 amis 平台内的页面。可用 ${xxx} 取值。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nurl | \n页面跳转 | \n
url | \nstring | \n- | \n按钮点击后,会打开指定页面。可用 ${xxx} 取值。 | \n
blank | \nboolean | \nfalse | \n如果为 true 将在新tab页面打开。 | \n
注意:由于 amis 平台内 http 地址会被替换成 proxy 地址,所以在 amis 平台内使用请加上 raw: 作为前缀。 比如:raw:http://www.baidu.com
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \ndialog | \n点击后显示一个弹出框 | \n
dialog | \nstring 或 DialogObject | \n- | \n指定弹框内容,格式可参考Dialog | \n
nextCondition | \nboolean | \n- | \n可以用来设置下一条数据的条件,默认为 true 。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \ndrawer | \n点击后显示一个侧边栏 | \n
drawer | \nstring 或 DrawerObject | \n- | \n指定弹框内容,格式可参考Drawer | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \ncopy | \n复制一段内容到粘贴板 | \n
content | \nstring | \n- | \n指定复制的内容。可用 ${xxx} 取值。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nreload | \n刷新目标组件 | \n
target | \nstring | \n- | \n需要刷新的目标组件名字(组件的name 值,自己配置的),多个请用 , 号隔开。 | \n
该actionType为FormItem-Table专用
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nadd | \n给指定FormItem-Table 添加一条数据, | \n
target | \nstring | \n- | \n指定FormItem-Table 的名字(Table 的name 值),多个请用 , 号隔开。 | \n
增删改查模型,主要用来展现列表,并支持各类【增】【删】【改】【查】的操作。
\nCRUD 支持三种模式:table
、cards
、list
,默认为 table
。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | type 指定为 CRUD 渲染器 | \n
mode | \nstring | \n"table" | \n"table" 、 "cards" 或者 "list" | \n
title | \nstring | \n"" | \n可设置成空,当设置成空时,没有标题栏 | \n
className | \nstring | \n\n | 表格外层 Dom 的类名 | \n
api | \nApi | \n\n | CRUD 用来获取列表数据的 api。 | \n
loadDataOnce | \nboolean | \n\n | 是否一次性加载所有数据(前端分页) | \n
loadDataOnceFetchOnFilter | \nboolean | \ntrue | \n在开启loadDataOnce时,filter时是否去重新请求api | \n
source | \nstring | \n\n | 数据映射接口返回某字段的值,不设置会默认把接口返回的items 或者rows 填充进mode 区域 | \n
filter | \nForm | \n\n | 设置过滤器,当该表单提交后,会把数据带给当前 mode 刷新列表。 | \n
filterTogglable | \nboolean | \nfalse | \n是否可显隐过滤器 | \n
filterDefaultVisible | \nboolean | \ntrue | \n设置过滤器默认是否可见。 | \n
initFetch | \nboolean | \ntrue | \n是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 | \n
interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
silentPolling | \nboolean | \nfalse | \n配置刷新时是否隐藏加载动画 | \n
stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
stopAutoRefreshWhenModalIsOpen | \nboolean | \nfalse | \n当有弹框时关闭自动刷新,关闭弹框又恢复 | \n
syncLocation | \nboolean | \ntrue | \n是否将过滤条件的参数同步到地址栏 | \n
draggable | \nboolean | \nfalse | \n是否可通过拖拽排序 | \n
itemDraggableOn | \nboolean | \n\n | 用表达式来配置是否可拖拽排序 | \n
saveOrderApi | \nApi | \n\n | 保存排序的 api。 | \n
quickSaveApi | \nApi | \n\n | 快速编辑后用来批量保存的 API。 | \n
quickSaveItemApi | \nApi | \n\n | 快速编辑配置成及时保存时使用的 API。 | \n
bulkActions | \nArray Of Action | \n\n | 批量操作列表,配置后,表格可进行选中操作。 | \n
defaultChecked | \nboolean | \nfalse | \n当可批量操作时,默认是否全部勾选。 | \n
messages | \nObject | \n\n | 覆盖消息提示,如果不指定,将采用 api 返回的 message | \n
messages.fetchFailed | \nstring | \n\n | 获取失败时提示 | \n
messages.saveOrderFailed | \nstring | \n\n | 保存顺序失败提示 | \n
messages.saveOrderSuccess | \nstring | \n\n | 保存顺序成功提示 | \n
messages.quickSaveFailed | \nstring | \n\n | 快速保存失败提示 | \n
messages.quickSaveSuccess | \nstring | \n\n | 快速保存成功提示 | \n
primaryField | \nstring | \n"id" | \n设置 ID 字段名。 | \n
defaultParams | \nObject | \n\n | 设置默认 filter 默认参数,会在查询的时候一起发给后端 | \n
pageField | \nstring | \n"page" | \n设置分页页码字段名。 | \n
perPageField | \nstring | \n"perPage" | \n设置分页一页显示的多少条数据的字段名。注意:最好与 defaultParams 一起使用,请看下面例子。 | \n
perPageAvailable | \nArray<number> | \n[5, 10, 20, 50, 100] | \n设置一页显示多少条数据下拉框可选条数。 | \n
orderField | \nstring | \n\n | 设置用来确定位置的字段名,设置后新的顺序将被赋值到该字段中。 | \n
hideQuickSaveBtn | \nboolean | \nfalse | \n隐藏顶部快速保存提示 | \n
autoJumpToTopOnPagerChange | \nboolean | \nfalse | \n当切分页的时候,是否自动跳顶部。 | \n
syncResponse2Query | \nboolean | \ntrue | \n将返回数据同步到过滤器上。 | \n
keepItemSelectionOnPageChange | \nboolean | \ntrue | \n保留条目选择,默认分页、搜素后,用户选择条目会被清空,开启此选项后会保留用户选择,可以实现跨页面批量操作。 | \n
labelTpl | \nstring | \n\n | 单条描述模板,keepItemSelectionOnPageChange 设置为true 后会把所有已选择条目列出来,此选项可以用来定制条目展示文案。 | \n
headerToolbar | \nArray | \n['bulkActions', 'pagination'] | \n顶部工具栏配置 | \n
footerToolbar | \nArray | \n['statistics', 'pagination'] | \n底部工具栏配置 | \n
开始之前请你先阅读整体要求。
\n用来返回列表数据。
\n发送:
\n可能会包含以下信息。
\npage
页码,从 1
开始, 表示当前请求第几页的信息。 字段名对应 pageField
如果配成这样 {pageField: "pn"}
发送的时候字段名会变成类似 /api/xxx?pn=1
。perPage
每页多少条数据,默认假定是 10. 如果想修改请配置 defaultParams: {perPage: 20}
。 另外字段名对应 perPageField
的配置。orderBy
用来告知以什么方式排序。字段名对应 orderField
orderDir
不是 asc
就是 desc
。分别表示正序还是倒序。另外如果 CRUD 配置了 Filter,即过滤器表单,表单里面的数据也会自动 merge 到这个请求里面。前提是:你没有干预接口参数。
\n什么意思?来个对比 /api/xxxx
和 /api/xxxx?a=${a}
。第二个配置方式就是干预了,如果你配置接口的时候有明确指定要发送什么参数,那么 amis 则不再默认把所有你可能要的参数都发过去了。这个时候如果想要接收原来的那些参数,你需要进一步配置 api,把你需要的参数写上如:/api/xxxx?a=${a}&page=${page}&perPage=${perPage}
响应:
\n常规返回格式如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n { // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"total\": 200 // 注意这里不是当前请求返回的 items 的长度,而是一共有多少条数据,用于生成分页,\n // 如果你不想要分页,把这个不返回就可以了。\n }\n}\n
\n如果无法知道数据总条数,只能知道是否有下一页,请返回如下格式,AMIS 会简单生成一个简单版本的分页控件。
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n { // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"hasNext\": true // 是否有下一页。\n }\n}\n
\n如果不需要分页,或者配置了 loadDataOnce 则可以忽略掉 total
和 hasNext
参数。
用来保存新的顺序,配置了 draggable 后会通过这个接口保存结果。
\n发送:
\n发送方式默认为 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 值。如:
{\n \"insertAfter\": {\n \"2\": [\"1\", \"3\"],\n \"6\": [\"4\", \"5\"]\n }\n }\n
\n表示:成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。
\n发送数据多了?amis 只能猜你可能需要什么格式化的数据,api 不是可以配置数据映射吗?你可以通过 data 指定只发送什么如:
\n{\n \"saveOrderApi\": {\n \"url\": \"/api/xxxx\",\n \"data\": {\n \"ids\": \"${ids}\"\n }\n }\n}\n
\n这样就只会发送 ids 了。
\n响应:
\n响应没有什么特殊要求,只关注 status 状态。data 中返回了数据也不会影响结果集。默认调用完保存顺序接口会自动再调用一次 api 接口用来刷新数据。
\n用来保存快速编辑结果,当 crud 的列配置快速保存时会调用进来。
\n发送:
\n发送方式默认为 POST
会包含以下信息。
ids
String
如: "1,2"
用来说明这次快速保存涉及了哪些成员。indexes
Array<number>
通过序号的方式告知更新了哪些成员。rows
Array<Object>
修改过的成员集合,数组对象是在原有数据的基础上更新后的结果。rowsDiff
Array<Object>
跟 rows
不一样的地方是这里只包含本次修改的数据。rowsOrigin
Array<Object>
跟 rows
不一样的地方是这里是修改前段原始数据。unModifiedItems
Array<Object>
其他没有修改的成员集合。默认发送的数据有点多,不过可以通过api的数据映射自己选择需要的部分。
\n响应:
\n响应没有什么特殊要求,只关注 status 状态。
\n跟 quickSaveApi 不一样的地方在于当你配置快速保存为立即保存的时候,优先使用此接口。因为只会保存单条数据,所以发送格式会不一样,直接就是整个更新后的成员数据。
\n发送:
\nPOST
payload 中就是更新后的成员数据。
响应:
\n响应没有什么特殊要求,只关注 status 状态。
\n当操作对象是单条数据时这类操作叫单条操作,比如:编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成(其他模式参考 table 模式)。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮,将数据通过 api 发送给后端完成。
\nCRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去,如果你的按钮行为是弹出时,还会包含一下信息:
\nhasNext
boolean
当按钮行为是弹框时,还会携带这个数据可以用来判断当前页中是否有下一条数据。hasPrev
boolean
当按钮行为是弹框时,还会携带这个数据可以判断用来当前页中是否有上一条数据。index
number
当按钮行为是弹框时,还会携带这个数据可以用来获取当前行数据在这一页中的位置。prevIndex
number
nextIndex
number
如果你的按钮类型是 AJAX,你也可以限定只发送部分数据比如。
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": \"delete:/api/xxxx/$id\",\n \"confirmText\": \"确定要删除?\"\n}\n
\n上面这个例子就会发送 id 字段了,如果想要全部发送过去同时还想添加点别的字段就这样:
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": {\n \"method\": \"post\",\n \"url\": \"/api/xxxx/$id\",\n \"data\": {\n \"&\": \"$$\",\n \"op\": \"delete\"\n }\n },\n \"confirmText\": \"确定要删除?\"\n}\n
\n这取决于 api 怎么配置,关于 api 的配置说明请前往这。
\n当操作对象是多条数据时这类操作叫批量操作、跟单条操作类似,将按钮放在 crud 的 bulkActions
中即可, 添加 bulkActions 后列表会自动出现选择框。CRUD 会准备以下数据供按钮行为使用。
items
Array<object>
选中的行数据。rows
items 的别名,推荐用 items。unselectedItems
Array<object>
没选中的行数据也可获取。ids
Array<number|string>
前提是行数据中有 id 字段,或者有指定的 primaryField
字段。...第一行所有行数据
还有第一行的所有行数据也会包含进去。列信息中可以配置 quickEdit 属性来启动快速编辑功能、开启后当鼠标hover到对应的行时,会出现一个编辑的小图标,点开后弹出表单项完成编辑。保存的结果不会立即发送 api 完成保存,除非你配置了立即保存,当所有的编辑都完成了,可以点击表格顶部的提交按钮,crud 将通过 quickSaveApi 通知后端完成保存。更多信息请看 quickSaveApi 和 quickSaveItemApi 的说明。
\n\n\n增删改查模型,主要用来展现列表,并支持各类【增】【删】【改】【查】的操作。
\nCRUD 支持三种模式:table
、cards
、list
,默认为 table
。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | type 指定为 CRUD 渲染器 | \n
mode | \nstring | \n"table" | \n"table" 、 "cards" 或者 "list" | \n
title | \nstring | \n"" | \n可设置成空,当设置成空时,没有标题栏 | \n
className | \nstring | \n\n | 表格外层 Dom 的类名 | \n
api | \nApi | \n\n | CRUD 用来获取列表数据的 api。 | \n
loadDataOnce | \nboolean | \n\n | 是否一次性加载所有数据(前端分页) | \n
loadDataOnceFetchOnFilter | \nboolean | \ntrue | \n在开启 loadDataOnce 时,filter 时是否去重新请求 api | \n
source | \nstring | \n\n | 数据映射接口返回某字段的值,不设置会默认把接口返回的items 或者rows 填充进mode 区域 | \n
filter | \nForm | \n\n | 设置过滤器,当该表单提交后,会把数据带给当前 mode 刷新列表。 | \n
filterTogglable | \nboolean | \nfalse | \n是否可显隐过滤器 | \n
filterDefaultVisible | \nboolean | \ntrue | \n设置过滤器默认是否可见。 | \n
initFetch | \nboolean | \ntrue | \n是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 | \n
interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
silentPolling | \nboolean | \nfalse | \n配置刷新时是否隐藏加载动画 | \n
stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
stopAutoRefreshWhenModalIsOpen | \nboolean | \nfalse | \n当有弹框时关闭自动刷新,关闭弹框又恢复 | \n
syncLocation | \nboolean | \ntrue | \n是否将过滤条件的参数同步到地址栏 | \n
draggable | \nboolean | \nfalse | \n是否可通过拖拽排序 | \n
itemDraggableOn | \nboolean | \n\n | 用表达式来配置是否可拖拽排序 | \n
saveOrderApi | \nApi | \n\n | 保存排序的 api。 | \n
quickSaveApi | \nApi | \n\n | 快速编辑后用来批量保存的 API。 | \n
quickSaveItemApi | \nApi | \n\n | 快速编辑配置成及时保存时使用的 API。 | \n
bulkActions | \nArray Of Action | \n\n | 批量操作列表,配置后,表格可进行选中操作。 | \n
defaultChecked | \nboolean | \nfalse | \n当可批量操作时,默认是否全部勾选。 | \n
messages | \nObject | \n\n | 覆盖消息提示,如果不指定,将采用 api 返回的 message | \n
messages.fetchFailed | \nstring | \n\n | 获取失败时提示 | \n
messages.saveOrderFailed | \nstring | \n\n | 保存顺序失败提示 | \n
messages.saveOrderSuccess | \nstring | \n\n | 保存顺序成功提示 | \n
messages.quickSaveFailed | \nstring | \n\n | 快速保存失败提示 | \n
messages.quickSaveSuccess | \nstring | \n\n | 快速保存成功提示 | \n
primaryField | \nstring | \n"id" | \n设置 ID 字段名。 | \n
defaultParams | \nObject | \n\n | 设置默认 filter 默认参数,会在查询的时候一起发给后端 | \n
pageField | \nstring | \n"page" | \n设置分页页码字段名。 | \n
perPageField | \nstring | \n"perPage" | \n设置分页一页显示的多少条数据的字段名。注意:最好与 defaultParams 一起使用,请看下面例子。 | \n
perPageAvailable | \nArray<number> | \n[5, 10, 20, 50, 100] | \n设置一页显示多少条数据下拉框可选条数。 | \n
orderField | \nstring | \n\n | 设置用来确定位置的字段名,设置后新的顺序将被赋值到该字段中。 | \n
hideQuickSaveBtn | \nboolean | \nfalse | \n隐藏顶部快速保存提示 | \n
autoJumpToTopOnPagerChange | \nboolean | \nfalse | \n当切分页的时候,是否自动跳顶部。 | \n
syncResponse2Query | \nboolean | \ntrue | \n将返回数据同步到过滤器上。 | \n
keepItemSelectionOnPageChange | \nboolean | \ntrue | \n保留条目选择,默认分页、搜素后,用户选择条目会被清空,开启此选项后会保留用户选择,可以实现跨页面批量操作。 | \n
labelTpl | \nstring | \n\n | 单条描述模板,keepItemSelectionOnPageChange 设置为true 后会把所有已选择条目列出来,此选项可以用来定制条目展示文案。 | \n
headerToolbar | \nArray | \n['bulk-actions', 'pagination'] | \n顶部工具栏配置, 可用控件: bulk-actions 、paginatnion 、statistics 、switch-per-page 、filter-toggler 或者放 tpl 或者 button 之类的渲染器控件。 | \n
footerToolbar | \nArray | \n['statistics', 'pagination'] | \n底部工具栏配置 , 可用控件: bulk-actions 、paginatnion 、statistics 、switch-per-page 、filter-toggler 或者放 tpl 或者 button 之类的渲染器控件。 | \n
开始之前请你先阅读整体要求。
\n用来返回列表数据。
\n发送:
\n可能会包含以下信息。
\npage
页码,从 1
开始, 表示当前请求第几页的信息。 字段名对应 pageField
如果配成这样 {pageField: "pn"}
发送的时候字段名会变成类似 /api/xxx?pn=1
。perPage
每页多少条数据,默认假定是 10. 如果想修改请配置 defaultParams: {perPage: 20}
。 另外字段名对应 perPageField
的配置。orderBy
用来告知以什么方式排序。字段名对应 orderField
orderDir
不是 asc
就是 desc
。分别表示正序还是倒序。另外如果 CRUD 配置了 Filter,即过滤器表单,表单里面的数据也会自动 merge 到这个请求里面。前提是:你没有干预接口参数。
\n什么意思?来个对比 /api/xxxx
和 /api/xxxx?a=${a}
。第二个配置方式就是干预了,如果你配置接口的时候有明确指定要发送什么参数,那么 amis 则不再默认把所有你可能要的参数都发过去了。这个时候如果想要接收原来的那些参数,你需要进一步配置 api,把你需要的参数写上如:/api/xxxx?a=${a}&page=${page}&perPage=${perPage}
响应:
\n常规返回格式如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"total\": 200 // 注意这里不是当前请求返回的 items 的长度,而是一共有多少条数据,用于生成分页,\n // 如果你不想要分页,把这个不返回就可以了。\n }\n}\n
\n如果无法知道数据总条数,只能知道是否有下一页,请返回如下格式,AMIS 会简单生成一个简单版本的分页控件。
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"hasNext\": true // 是否有下一页。\n }\n}\n
\n如果不需要分页,或者配置了 loadDataOnce 则可以忽略掉 total
和 hasNext
参数。
用来保存新的顺序,配置了 draggable 后会通过这个接口保存结果。
\n发送:
\n发送方式默认为 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 值。如:
{\n \"insertAfter\": {\n \"2\": [\"1\", \"3\"],\n \"6\": [\"4\", \"5\"]\n }\n}\n
\n表示:成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。
\n发送数据多了?amis 只能猜你可能需要什么格式化的数据,api 不是可以配置数据映射吗?你可以通过 data 指定只发送什么如:
\n{\n \"saveOrderApi\": {\n \"url\": \"/api/xxxx\",\n \"data\": {\n \"ids\": \"${ids}\"\n }\n }\n}\n
\n这样就只会发送 ids 了。
\n响应:
\n响应没有什么特殊要求,只关注 status 状态。data 中返回了数据也不会影响结果集。默认调用完保存顺序接口会自动再调用一次 api 接口用来刷新数据。
\n用来保存快速编辑结果,当 crud 的列配置快速保存时会调用进来。
\n发送:
\n发送方式默认为 POST
会包含以下信息。
ids
String
如: "1,2"
用来说明这次快速保存涉及了哪些成员。indexes
Array<number>
通过序号的方式告知更新了哪些成员。rows
Array<Object>
修改过的成员集合,数组对象是在原有数据的基础上更新后的结果。rowsDiff
Array<Object>
跟 rows
不一样的地方是这里只包含本次修改的数据。rowsOrigin
Array<Object>
跟 rows
不一样的地方是这里是修改前段原始数据。unModifiedItems
Array<Object>
其他没有修改的成员集合。默认发送的数据有点多,不过可以通过 api 的数据映射自己选择需要的部分。
\n响应:
\n响应没有什么特殊要求,只关注 status 状态。
\n跟 quickSaveApi 不一样的地方在于当你配置快速保存为立即保存的时候,优先使用此接口。因为只会保存单条数据,所以发送格式会不一样,直接就是整个更新后的成员数据。
\n发送:
\nPOST
payload 中就是更新后的成员数据。
响应:
\n响应没有什么特殊要求,只关注 status 状态。
\n当操作对象是单条数据时这类操作叫单条操作,比如:编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成(其他模式参考 table 模式)。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮,将数据通过 api 发送给后端完成。
\nCRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去,如果你的按钮行为是弹出时,还会包含一下信息:
\nhasNext
boolean
当按钮行为是弹框时,还会携带这个数据可以用来判断当前页中是否有下一条数据。hasPrev
boolean
当按钮行为是弹框时,还会携带这个数据可以判断用来当前页中是否有上一条数据。index
number
当按钮行为是弹框时,还会携带这个数据可以用来获取当前行数据在这一页中的位置。prevIndex
number
nextIndex
number
如果你的按钮类型是 AJAX,你也可以限定只发送部分数据比如。
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": \"delete:/api/xxxx/$id\",\n \"confirmText\": \"确定要删除?\"\n}\n
\n上面这个例子就会发送 id 字段了,如果想要全部发送过去同时还想添加点别的字段就这样:
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": {\n \"method\": \"post\",\n \"url\": \"/api/xxxx/$id\",\n \"data\": {\n \"&\": \"$$\",\n \"op\": \"delete\"\n }\n },\n \"confirmText\": \"确定要删除?\"\n}\n
\n这取决于 api 怎么配置,关于 api 的配置说明请前往这。
\n当操作对象是多条数据时这类操作叫批量操作、跟单条操作类似,将按钮放在 crud 的 bulkActions
中即可, 添加 bulkActions 后列表会自动出现选择框。CRUD 会准备以下数据供按钮行为使用。
items
Array<object>
选中的行数据。rows
items 的别名,推荐用 items。unselectedItems
Array<object>
没选中的行数据也可获取。ids
Array<number|string>
前提是行数据中有 id 字段,或者有指定的 primaryField
字段。...第一行所有行数据
还有第一行的所有行数据也会包含进去。列信息中可以配置 quickEdit 属性来启动快速编辑功能、开启后当鼠标 hover 到对应的行时,会出现一个编辑的小图标,点开后弹出表单项完成编辑。保存的结果不会立即发送 api 完成保存,除非你配置了立即保存,当所有的编辑都完成了,可以点击表格顶部的提交按钮,crud 将通过 quickSaveApi 通知后端完成保存。更多信息请看 quickSaveApi 和 quickSaveItemApi 的说明。
\n\n\n树形结构选择框。
\ntype
请设置成 nested-select
options
类似于 select 中 options
, 并且支持通过 children
无限嵌套。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。multiple
默认为 false
, 设置成 true
表示可多选。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
autoFill
将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中,只在单选时有效autoFill
的格式为{address: "${label}"}
,表示将选中项中的label
的值,自动填充到当前表单项中name
为address
中嵌套选择框。
\ntype
请设置成 nested-select
options
类似于 select 中 options
, 并且支持通过 children
无限嵌套。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。multiple
默认为 false
, 设置成 true
表示可多选。searchable
默认为 false
, 表示是否可搜索joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
cascade
设置成 true
时当选中父节点时不自动选择子节点。withChildren
是指成 true
,选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。仔细看示例不难发现,语法跟 ejs 很像,<% 这里面是 js 语句 %>
,所以只要会写 js,做页面渲染没有什么问题。另外以下是一些可用 js 方法。
formatDate(value, format='LLL', inputFormat='')
格式化时间格式,关于 format 请前往 moment 文档页面。formatTimeStamp(value, format='LLL')
格式化时间戳为字符串。formatNumber(number)
格式化数字格式,加上千分位。countDown(value)
倒计时,显示离指定时间还剩下多少天,只支持时间戳。<%= date(data.xxx, 'YYYY-MM-DD')%>
如:
\n{\n \"data\": {\n \"user\": \"no one\"\n },\n \"body\": {\n \"type\": \"tpl\",\n \"tpl\": \"User: <%= formatDate(data.time, 'YYYY-MM-DD') %>\"\n }\n}\n
\n如果只想简单取下变量,可以用 $xxx
或者 ${xxx}
。同时如果不指定渲染器类型,默认就是 tpl
, 所以以上示例可以简化为。
\n\n\n取值支持多级,如果层级比较深可以用
\n.
来分割如:${xx.xxx.xx}
\n另外$&
表示直接获取当前的data
。
注意:$xxx 与 <%= data.xxx %> 这两种语法不能同时使用,只有一种有效,所以不要交叉使用。
通过 $xxx
取到的值,默认是会做 html 转义的,也就是说 $xxx
完全等价于 ${xxx | html}
, 如果你想什么都不做,那么请这么写 ${xxx | raw}
。
从上面的语法可以看出来,取值时是支持指定 filter 的,那么有哪些 filter 呢?
\nhtml
转义 html 如:${xxx|html}
。json
json stringify。将目标变量转成 json 字符串。toJson
反过来处理,如果目标字段是字符串,尝试把它解析成 js 数据。raw
表示不转换, 原样输出。date
做日期转换如: ${xxx | date:YYYY-MM-DD}
number
自动给数字加千分位。${xxx | number}
9999
=> 9,999
trim
把前后多余的空格去掉。percent
格式化成百分比。${xxx | percent}
0.8232343
=> 82.32%
round
四舍五入取整。truncate
切除, 当超出 200 个字符时,后面的部分直接显示 ...。 ${desc | truncate:500:...}
url_encode
做 url encode 转换。url_decode
做 url decode 转换。default
当值为空时,显示其他值代替。 ${xxx | default:-}
当为空时显示 -
join
当值是 array 时,可以把内容连起来。\\${xxx | join:,}first
获取数组的第一个成员。last
获取数组的最后一个成员。pick
如果是对象则从当前值中再次查找值如: ${xxx|pick:yyy}
等价于 ${xxx.yyy}
。如果是数组,则做 map 操作,操作完后还是数组,不过成员已经变成了你选择的东西。如: ${xxx|pick:bbb}
如果 xxx 的值为 [{aaa: 1, bbb: 2}]
经过处理后就是 [2]
。更复杂的用法: ${xxx|pick:a~aaa,b~bbb}
经过处理就是 [{a:1, b: 2}]
split
可以将字符传通过分隔符分离成数组,默认分隔符为 ,
如: ${ids|split|last}
即取一段用逗号分割的数值中的最后一个。nth
取数组中的第 n 个成员。如:${ids|split|nth:0}
是取第一个成员str2date
请参考 date 中日期默认值的设置格式。duration
格式化成时间端如:2
-=> 2秒
67
=> 1分7秒
1111111
=> 13天21时39分31秒
asArray
将数据包成数组如: a
=> [a]
lowerCase
转小写upperCase
转大写base64Encode
base64 转码base64Decode
base64 解码isTrue
类三元过滤器,用法:${xxx|isTrue:'foo':bar}
,如果xxx
变量为真,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。isFalse
判断逻辑与isTrue
相反。isMatch
类三元过滤器,用法:${xxx|isMatch:'somestring':'foo':bar}
,如果变量模糊匹配字符'somestring'
,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。${xxx|isMatch:variable:'foo':bar}
,如果xxx
变量模糊匹配variable
变量的值,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。notMatch
判断逻辑与isMatch
相反。isEquals
类三元过滤器,用法:${xxx|isEquals:'somestring':'foo':bar}
,如果变量等于字符串'somestring'
,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。${xxx|isEquals:variable:'foo':bar}
,如果变量等于variable
变量的值,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。notEquals
判断逻辑与isEquals
相反。filter
过滤数组,操作对象为数组,当目标对象不是数组时将无效。使用语法 \\${xxx | filter: 参与过滤的字段集合:指令:取值变量名}。
比如: ${xxx|filter:readonly:isTrue}
将 xxx 数组中 readonly 为 true 的成员提取出来。\n再来个栗子:${xxx|filter:a,b:match:keywords}
将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量,也可以写固定值如:${xxx|filter:a,b:match:'123'}
指令类型:
\nisTrue
目标值为真通过筛选。isFalse
目标值为假时通过筛选。match
模糊匹配后面的参数。${xxx|filter:a,b:match:keywords}
表示 xxx 里面的成员,如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值,则通过筛选。equals
相对于模糊匹配,这个就相对精确匹配了,用法跟 match
一样。组合使用。
\n${&|json|html}
把当前可用的数据全部打印出来。$&
取当前值,json 做 json stringify,然后 html 转义。${rows|first|pick:id}
把 rows 中的第一条数据中的 id 取到。${rows|pick:id|join:,}
没有找到合适的?可以自定义 filter。如果是 AMIS 平台用户,可以将以下代码加入到自定义组件中,如果不是请想办法插入以下代码。
\nimport {registerFilter} from 'amis';\n\nregisterFilter('myfilter', (input: string) => `${input}Boom`);\n
\n加入成功后就可以这样使用了 ${xxx | myfilter}
。 如果 xxx
的值是 abc
那么输出将会是 abcBoom
。
tpl 类型的渲染器支持用 JS 模板引擎来组织输出,采用的 lodash 的 template,关于语法部分,请前往 lodash 文档页面。
\n\n仔细看示例不难发现,语法跟 ejs 很像,<% 这里面是 js 语句 %>
,所以只要会写 js,做页面渲染没有什么问题。另外以下是一些可用 js 方法。
formatDate(value, format='LLL', inputFormat='')
格式化时间格式,关于 format 请前往 moment 文档页面。formatTimeStamp(value, format='LLL')
格式化时间戳为字符串。formatNumber(number)
格式化数字格式,加上千分位。countDown(value)
倒计时,显示离指定时间还剩下多少天,只支持时间戳。<%= date(data.xxx, 'YYYY-MM-DD')%>
如:
\n{\n \"data\": {\n \"user\": \"no one\"\n },\n \"body\": {\n \"type\": \"tpl\",\n \"tpl\": \"User: <%= formatDate(data.time, 'YYYY-MM-DD') %>\"\n }\n}\n
\n如果只想简单取下变量,可以用 $xxx
或者 ${xxx}
。同时如果不指定渲染器类型,默认就是 tpl
, 所以以上示例可以简化为。
\n\n\n取值支持多级,如果层级比较深可以用
\n.
来分割如:${xx.xxx.xx}
\n另外$&
表示直接获取当前的data
。
注意:$xxx 与 <%= data.xxx %> 这两种语法不能同时使用,只有一种有效,所以不要交叉使用。
通过 $xxx
取到的值,默认是会做 html 转义的,也就是说 $xxx
完全等价于 ${xxx | html}
, 如果你想什么都不做,那么请这么写 ${xxx | raw}
。
从上面的语法可以看出来,取值时是支持指定 filter 的,那么有哪些 filter 呢?
\nhtml
转义 html 如:${xxx|html}
。json
json stringify。raw
表示不转换, 原样输出。date
做日期转换如: ${xxx | date:YYYY-MM-DD}
number
自动给数字加千分位。${xxx | number}
9999
=> 9,999
trim
把前后多余的空格去掉。percent
格式化成百分比。${xxx | percent}
0.8232343
=> 82.32%
round
四舍五入取整。truncate
切除, 当超出 200 个字符时,后面的部分直接显示 ...。 ${desc | truncate:500:...}
url_encode
做 url encode 转换。url_decode
做 url decode 转换。default
当值为空时,显示其他值代替。 ${xxx | default:-}
当为空时显示 -
join
当值是 array 时,可以把内容连起来。\\${xxx | join:,}first
获取数组的第一个成员。last
获取数组的最后一个成员。pick
如果是对象则从当前值中再次查找值如: ${xxx|pick:yyy}
等价于 ${xxx.yyy}
。如果是数组,则做 map 操作,操作完后还是数组,不过成员已经变成了你选择的东西。如: ${xxx|pick:bbb}
如果 xxx 的值为 [{aaa: 1, bbb: 2}]
经过处理后就是 [2]
。更复杂的用法: ${xxx|pick:a~aaa,b~bbb}
经过处理就是 [{a:1, b: 2}]
split
可以将字符传通过分隔符分离成数组,默认分隔符为 ,
如: ${ids|split|last}
即取一段用逗号分割的数值中的最后一个。nth
取数组中的第 n 个成员。如:${ids|split|nth:0}
是取第一个成员str2date
请参考 date 中日期默认值的设置格式。duration
格式化成时间端如:2
-=> 2秒
67
=> 1分7秒
1111111
=> 13天21时39分31秒
asArray
将数据包成数组如: a
=> [a]
lowerCase
转小写upperCase
转大写base64Encode
base64 转码base64Decode
base64 解码isTrue
类三元过滤器,用法:${xxx|isTrue:'foo':bar}
,如果xxx
变量为真,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。isFalse
判断逻辑与isTrue
相反。isMatch
类三元过滤器,用法:${xxx|isMatch:'somestring':'foo':bar}
,如果变量模糊匹配字符'somestring'
,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。${xxx|isMatch:variable:'foo':bar}
,如果xxx
变量模糊匹配variable
变量的值,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。notMatch
判断逻辑与isMatch
相反。isEquals
类三元过滤器,用法:${xxx|isEquals:'somestring':'foo':bar}
,如果变量等于字符串'somestring'
,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。${xxx|isEquals:variable:'foo':bar}
,如果变量等于variable
变量的值,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。notEquals
判断逻辑与isEquals
相反。filter
过滤数组,操作对象为数组,当目标对象不是数组时将无效。使用语法 \\${xxx | filter: 参与过滤的字段集合:指令:取值变量名}。
比如: ${xxx|filter:readonly:isTrue}
将 xxx 数组中 readonly 为 true 的成员提取出来。\n再来个栗子:${xxx|filter:a,b:match:keywords}
将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量,也可以写固定值如:${xxx|filter:a,b:match:'123'}
指令类型:
\nisTrue
目标值为真通过筛选。isFalse
目标值为假时通过筛选。match
模糊匹配后面的参数。${xxx|filter:a,b:match:keywords}
表示 xxx 里面的成员,如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值,则通过筛选。equals
相对于模糊匹配,这个就相对精确匹配了,用法跟 match
一样。组合使用。
\n${&|json|html}
把当前可用的数据全部打印出来。$&
取当前值,json 做 json stringify,然后 html 转义。${rows|first|pick:id}
把 rows 中的第一条数据中的 id 取到。${rows|pick:id|join:,}
没有找到合适的?可以自定义 filter。如果是 AMIS 平台用户,可以将以下代码加入到自定义组件中,如果不是请想办法插入以下代码。
\nimport {registerFilter} from 'amis';\n\nregisterFilter('myfilter', (input: string) => `${input}Boom`);\n
\n加入成功后就可以这样使用了 ${xxx | myfilter}
。 如果 xxx
的值是 abc
那么输出将会是 abcBoom
。