业务场景
在开发数据管理类应用时,经常需要构建业务相关的表格页面,以及数据的编辑及查看页面,其中常见的一个业务场景是:
1. 对表格数据进行数据筛选和页码切换。
![](https://qcloudimg.tencent-cloud.cn/image/document/7df02f5b1d6e4de0784364c2bfd20d63.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7df02f5b1d6e4de0784364c2bfd20d63.png)
2. 再单击表格中的新建、查看、编辑等按钮,跳转对应页面对数据进行操作或查看。
![](https://qcloudimg.tencent-cloud.cn/image/document/5860d2ec1a8a5f81cd3e9dbe36d75a3a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/5860d2ec1a8a5f81cd3e9dbe36d75a3a.png)
3. 最后再从对应页面跳转返回表格页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/7e2efdaeb67c271fe10934f87a2e66d0.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7e2efdaeb67c271fe10934f87a2e66d0.png)
4. 期望保留原有的筛选器内容和页码、每页行数等信息,依然查看到跳转页面前的表格内容。
![](https://qcloudimg.tencent-cloud.cn/image/document/7fa78f4bbd4d1e7727cf584edfa4598f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7fa78f4bbd4d1e7727cf584edfa4598f.png)
实现思路
通过让表格的筛选和分页等信息,实时保存至当前页面的 URL 参数中,并且表格组件读取 URL 参数来生成自己的筛选和分页信息,实现筛选和分页信息的前端缓存,以便在返回当前页面时,表格可在 URL 参数中读取到所需信息,回显原有的表格状态。
实施方案
1. 首先在应用编辑器右上角单击新建页面按钮。
![](https://qcloudimg.tencent-cloud.cn/image/document/0fa85eaa2ddfd728eb5d181da67dd678.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0fa85eaa2ddfd728eb5d181da67dd678.png)
2. 在新建页面弹窗中,创建表格与表单页,选择所需数据模型后确认新建,创建出表格与表单页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/18a68a85dfe950ec2ae6e52fe863ff1d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/18a68a85dfe950ec2ae6e52fe863ff1d.png)
3. 在编辑器大纲树中,选中页面根节点,按需创建表示筛选器、页码、每页行数的 URL 参数。
pageNo:表示表格的页码信息(保留分页参数必需)。
pageSIze:表示表格的每页行数信息(保留分页参数必需)。
其他 URL 参数:根据筛选器的数量创建,每个筛选器(如下图中的客户名称筛选算1个筛选器)创建2个 URL 参数,分别存储筛选器的筛选值和筛选方式(如下图表格期望设置3个筛选器,实现客户名称、客户地域、客户级别的筛选,则需创建6个 URL 参数:customer、customerType、region、regionType、level、levelType)。
![](https://qcloudimg.tencent-cloud.cn/image/document/44f4869a65bf60a40e1194f9f529d33c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/44f4869a65bf60a40e1194f9f529d33c.png)
4. 为表格组件设置筛选器(以设置客户名称、客户地域、客户级别3个筛选器为例):单击筛选器属性的 fx,启用表达式模式,然后单击属性右下角的展开按钮打开表达式编辑弹窗。
![](https://qcloudimg.tencent-cloud.cn/image/document/ddae50e28a8b2faf5bcbab5ea8fbd039.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ddae50e28a8b2faf5bcbab5ea8fbd039.png)
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}]})
![](https://qcloudimg.tencent-cloud.cn/image/document/d310ec6731a1325798b31743792d5a42.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d310ec6731a1325798b31743792d5a42.png)
6. 表格组件的每页行数和 PC 端默认页码属性,分别绑定 URL 参数 pageSize(参数路径:
$w.page.dataset.params.pageSize
)和 pageNo(参数路径:$w.page.dataset.params.pageNo
)。![](https://qcloudimg.tencent-cloud.cn/image/document/52ae724868048c78c6697915f620c49c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/52ae724868048c78c6697915f620c49c.png)
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参数)。![](https://qcloudimg.tencent-cloud.cn/image/document/f62341ce097ee2ab8660d950e5061933.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f62341ce097ee2ab8660d950e5061933.png)
8. 完成以上配置后,从当前表格页面跳转访问任一页面,再返回该页面时,将能够保留原有的筛选条件和页码、每页行数信息。例如:
8.1 对表格数据进行筛选、页码切换或每页行数调整。
![](https://qcloudimg.tencent-cloud.cn/image/document/695b8d34ae9338af5238ad31e09900be.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/695b8d34ae9338af5238ad31e09900be.png)
8.2 单击编辑跳转表单页面,进入编辑页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/14eb789dd5fa6f178304298543283081.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/14eb789dd5fa6f178304298543283081.png)
8.3 在编辑页面修改数据,单击提交,执行返回上一页动作。
![](https://qcloudimg.tencent-cloud.cn/image/document/f3ee155d7dd155a613ce3995d60cc591.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f3ee155d7dd155a613ce3995d60cc591.png)
8.4 此时会返回表格页面,并保留原有的筛选器和分页信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/3ee3eb2d4ef294ab4b958ab07d99d9d3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/3ee3eb2d4ef294ab4b958ab07d99d9d3.png)