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


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


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


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 此时会返回表格页面,并保留原有的筛选器和分页信息。

