diff --git a/.gitignore b/.gitignore index fbd59c07378..2e4fce9bd02 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,8 @@ _site node_modules /dist /lib +**/esm +**/lib /sdk /public /gh-pages @@ -26,6 +28,7 @@ node_modules /npm /mock/cfc/cfc.zip .rollup.cache +/theme-npm dist tsconfig.tsbuildinfo diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md index 058cb3d8067..b6d980f9091 100755 --- a/docs/zh-CN/components/crud.md +++ b/docs/zh-CN/components/crud.md @@ -958,11 +958,17 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。 可以在列上配置`"sortable": true`,该列表头右侧会渲染一个可点击的排序图标,可以切换`正序`和`倒序`。 +> 如果想默认就基于某个字段排序,可以结合 `defaultParams` 一起配置。 + ```schema: scope="body" { "type": "crud", "syncLocation": false, "api": "/api/mock2/sample", + "defaultParams": { + "orderBy": "engine", + "orderDir": "desc" + }, "columns": [ { "name": "id", @@ -1074,7 +1080,7 @@ amis 只负责生成下拉选择器组件,并将搜索参数传递给接口, #### 下拉数据源 -过滤器的数据域支持API接口和上下文数据(`3.6.0`及以上版本) +过滤器的数据域支持 API 接口和上下文数据(`3.6.0`及以上版本) ```schema { @@ -1600,7 +1606,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性,实现在 分页有两种模式: -##### 1. 知道数据总数 +**1. 知道数据总数** 如果后端可以知道数据总数时,接口返回格式如下: @@ -1624,7 +1630,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性,实现在 该模式下,会自动计算总页码数,渲染出有页码的分页组件 -##### 2. 不知道数据总数 +**2. 不知道数据总数** 如果后端无法知道数据总数,那么可以返回`hasNext`字段,来标识是否有下一页。 @@ -1650,6 +1656,261 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性,实现在 > 如果总数据只够展示一页,则默认不显示该分页组件 +#### 前端分页 + +如果你的数据并不是很大,而且后端不方便做分页和条件过滤操作,那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作。 + +
loadDataOnce
后,搜索和过滤将交给组件处理,默认对所有字段采用模糊匹配(比如:mi
将会匹配amis
)。如果首次加载数据时设置了预设条件,导致接口返回的数据集合未按照此规则过滤,则可能导致切换页码后分页错误。此时有2种方案处理:
+ 1. 将接口返回的列表数据按照所有字段模糊匹配的规则处理
+ 2. 配置matchFunc
,自定义处理过滤
+对,你打开了弹窗
', + inline: false + } + ] + } + }, + { + actionType: 'setValue', + componentId: 'name', + args: { + value: '${myName}' + } + } + ], + { + myName: 'amis' + } +); +``` + ### 更新属性 可以通过 amisScoped 对象的 updateProps 方法来更新下发到 amis 的属性。 diff --git a/examples/components/CRUD/MatchFunc.jsx b/examples/components/CRUD/MatchFunc.jsx index 279cfcc4aa2..46c8867cca5 100644 --- a/examples/components/CRUD/MatchFunc.jsx +++ b/examples/components/CRUD/MatchFunc.jsx @@ -32,6 +32,8 @@ export default { query: RecordloadDataOnce
时,会基于该函数计算的匹配结果进行过滤,主要用于处理列字段类型较为复杂或者字段值格式和后端返回不一致的场景。matchSorter
函数用于处理复杂的过滤场景,比如模糊匹配等,更多详细内容推荐查看match-sorter。'
+ ),
+ renderLabel: true,
+ params: [
+ {
+ label: 'items',
+ tip: genCodeSchema('/* 当前列表的全量数据 */\nitems: any[]')
+ },
+ {
+ label: 'itemsRaw',
+ tip: genCodeSchema(
+ '/* 最近一次接口返回的全量数据 */\nitemsRaw: any[]'
+ )
+ },
+ {
+ label: 'options',
+ tip: genCodeSchema(
+ '/* 额外的配置 */\noptions?: {\n /* 查询参数 */\n query: Record < string, any>;\n /* 列配置 */\n columns: any;\n /** match-sorter 匹配函数 */\n matchSorter: (items: any[], value: string, options?: MatchSorterOptions