云表设计-如何设计分页效果

2017-9-23 11:11:21
1351410
由于电脑分辨率的问题,贴几张简约效果图出来。
A1.jpg
A2.jpg
A3.jpg


!------------分----------------------割------------------!
设计步骤:实例中的项目为管理界面-类似导航模板
1、思路,思路是利用数据的row来控制我们所需要的数据,例如每页控制200条数据,那么我们每一页的关系实际上就是一个倍数关系,页数*200或者页数据量+200就等于当前的数据位置。
     利用数据源的row来与我们的序号匹配,从而实现分页的效果。

  2、增加两个临时数据项:上次最大序号、最大序号(用于控制数据范围) 、增加临时明细表,用于存储数据接口中的大量数据

  3、增加好我们的上一页下一页和页数的按钮

4、设置初始值,我们控制每页为200条数据为上限,初始值赋值给上次序号与最大序号分别为0和200.
01.jpg

5、将所有数据接口中的所有数据插入到辅助明细内(方便取数据),初次填充200条数据需要多建立一个接口并且在接口中限定数据上限,此教程一共使用了两个数据接口。特别注意:数据接口必须排序
02.jpg
03.jpg
04.jpg

6、下一页的时候,将最大序号赋值给上次最大序号,然后最大序号增加200,或者上次最大序号*页数。
05.jpg
06.jpg

7、利用文本列表获得最新的序号,然后插入到我们的主明细里面。插入数据时,我们数据源选择我们的临时明细,里面有我们已经排好序的所有数据。
07.jpg
08.jpg

8、然后我们将光标定位回第一行就完成了
09.jpg

9、上一页的设计,IF语句是为了限制页数和序号不为负数,然后后面插入数据的步骤和上面相同。
10.jpg

10、数据优化-数据量太庞大时,可以在我们数据源处做过滤
11.jpg


!--------分----享----完-----毕---------!




对该帖+5 经验,并说 很给力!
+10
6人收藏
10 条回帖
vcarbon云豆2017-9-23 11:41:17
谢谢分享,受用
+10
沈阳云侠2017-9-23 12:39:38
感谢分享
+10
it20080808云粉2017-9-24 16:37:34
这个功能固化就更好了,可以更专注业务逻辑
+10
hxj19911119云粉2017-9-26 09:39:40
太实用了,感谢分享
+10
15605774645云豆2017-9-27 08:31:53
云表能否将总表的分页显示功能做到明细表里面,这样可以按需勾选开启分页功能,就不用这么麻烦了
+10
刘雪民云粉2018-7-1 17:27:04来自手机
学习了
+10
hegq027云师2019-7-1 09:14:25
谢谢分享,分好的教程
+10
police0323云粉2019-7-11 08:38:13
O(∩_∩)O谢谢
+10
hongransunny云粉2020-1-14 16:00:57
感谢分享,很实用
+10
需要登录后才可进行回复 登录

玩转云表从入门到精通
扫码添加微信立即领取

·云表创始人授课文件
·加入社群与培训学习
·切磋云表开发玩法

商务咨询:0756-3335860
客服咨询