文档中心>腾讯云微搭低代码>实践教程>表格场景实践指南>表格组件实现筛选器和分页信息的跨页缓存

表格组件实现筛选器和分页信息的跨页缓存

最近更新时间:2024-02-26 14:14:41

我的收藏

业务场景

在开发数据管理类应用时,经常需要构建业务相关的表格页面,以及数据的编辑及查看页面,其中常见的一个业务场景是:
1. 对表格数据进行数据筛选和页码切换。



2. 再单击表格中的新建、查看、编辑等按钮,跳转对应页面对数据进行操作或查看。



3. 最后再从对应页面跳转返回表格页面。



4. 期望保留原有的筛选器内容和页码、每页行数等信息,依然查看到跳转页面前的表格内容。




实现思路

通过让表格的筛选和分页等信息,实时保存至当前页面的 URL 参数中,并且表格组件读取 URL 参数来生成自己的筛选和分页信息,实现筛选和分页信息的前端缓存,以便在返回当前页面时,表格可在 URL 参数中读取到所需信息,回显原有的表格状态。

实施方案

1. 首先在应用编辑器右上角单击新建页面按钮。



2. 在新建页面弹窗中,创建表格与表单页,选择所需数据模型后确认新建,创建出表格与表单页面。



3. 在编辑器大纲树中,选中页面根节点,按需创建表示筛选器、页码、每页行数的 URL 参数。
pageNo:表示表格的页码信息(保留分页参数必需)。
pageSIze:表示表格的每页行数信息(保留分页参数必需)。
其他 URL 参数:根据筛选器的数量创建,每个筛选器(如下图中的客户名称筛选算1个筛选器)创建2个 URL 参数,分别存储筛选器的筛选值和筛选方式(如下图表格期望设置3个筛选器,实现客户名称、客户地域、客户级别的筛选,则需创建6个 URL 参数:customer、customerType、region、regionType、level、levelType)。



4. 为表格组件设置筛选器(以设置客户名称、客户地域、客户级别3个筛选器为例):单击筛选器属性的 fx,启用表达式模式,然后单击属性右下角的展开按钮打开表达式编辑弹窗。



5. 在表达式编辑弹窗中,按以下格式写入筛选器表达式(共3个筛选条件),完成后,表格组件将能够在编辑器画布中回显出筛选器。
({
"filterConfig":[
{
"name":"khmc",//要筛选字段的标识(模型字段标识)
"label":"客户名称",//筛选条件的名称
"value":$w.page.dataset.params.customer,//筛选器的筛选值,写入表示该筛选条件-筛选值的URL参数
"filterType":$w.page.dataset.params.customerType//筛选器的筛选方式,写入表示该筛选条件-筛选方式的URL参数
},
{
"name":"khdy",
"label":$w.page.dataset.params.region,
"value":"",
"filterType":$w.page.dataset.params.regionType
},
{
"name":"khjb",
"label":$w.page.dataset.params.level,
"value":"",
"filterType":$w.page.dataset.params.levelType
}
]
})



6. 表格组件的每页行数和 PC 端默认页码属性,分别绑定 URL 参数 pageSize(参数路径:$w.page.dataset.params.pageSize)和 pageNo(参数路径:$w.page.dataset.params.pageNo)。



7. 表格组件的查询成功事件,设置触发 URL 参数赋值动作,为上步创建的 URL 参数进行赋值(下属表达式中的 table1 为表格组件 id,需根据实际的组件 id 进行替换)。
参数 pageNo:赋值表达式 $w.table1.pageNo(目的是将表格的页码存储到 URL 参数)。
参数 pageSIze:赋值表达式 $w.table1.pageSIze(目的是将表格的每页行数存储到 URL 参数)。
其余参数依次对各个筛选条件的筛选值和筛选方式进行赋值并保存。
参数 customer:赋值表达式 $w.table1.filterConfig[0].value (表示将表格组件筛选器的第1个筛选值赋值到对应的URL参数)。
参数 customerType:赋值表达式 $w.table1.filterConfig[0].filterType (表示将表格组件筛选器的第1个筛选方式赋值到对应的URL参数)。
参数 region:赋值表达式 $w.table1.filterConfig[1].value (表示将表格组件筛选器的第2个筛选值赋值到对应的URL参数)。
参数 regionType:赋值表达式 $w.table1.filterConfig[1].filterType (表示将表格组件筛选器的第2个筛选方式赋值到对应的URL参数)。
参数 level:赋值表达式 $w.table1.filterConfig[2].value (表示将表格组件筛选器的第3个筛选值赋值到对应的URL参数)。
参数 levelType:赋值表达式 $w.table1.filterConfig[2].filterType (表示将表格组件筛选器的第3个筛选方式赋值到对应的URL参数)。



8. 完成以上配置后,从当前表格页面跳转访问任一页面,再返回该页面时,将能够保留原有的筛选条件和页码、每页行数信息。例如:
8.1 对表格数据进行筛选、页码切换或每页行数调整。



8.2 单击编辑跳转表单页面,进入编辑页面。



8.3 在编辑页面修改数据,单击提交,执行返回上一页动作。



8.4 此时会返回表格页面,并保留原有的筛选器和分页信息。