动态设置EL-分页控件每页显示行数

收藏

本帖最后由 scliudong 于 2023-2-1 16:50 编辑

分页导航是最常用的插件，但默认“每页显示行数”都只能填固定值，当使用人员屏幕分辨率不同时，每页行数高分屏下只有半屏，页低分屏下可能需要通过滚动条查看隐藏的数据。
按照“Simon.Sun"版主的指点，试着做了个自动调整显示行数的功能，感觉不错。

操作方法：
准备好页面和表格，安装EL插件和操作单元格插件，添加”EL-分页“命令，设置好相关链接后按下面方法设置：
1、在需要动态调整每页显示行数的页面，编辑页面加载时命令。

2、获取浏览器当前高度：
新建命令，选择”设置变量命令“，设置变量”屏高动态值“，值模式填入关键字：%ViewportHeight%

3、计算动态行数：
新建命令，添加变量命令，设置变量”分页参数变量“，值模式填入：公式：=ROUNDUP(屏高动态值/36,0)
公式中用当前浏览器高度除以36并向上取整，得到要显示的行数；
这里的36可以慢慢调整找到合适的值，RoundUP可以调整为RoundDown或Round，看个人喜好。
也可通过ifs公式，例：当屏高度小于500时，值为15，大于500小于600时，值为20，以此类推。
在各分辨率模式下测试较为满意。

4、操作单元格执行命令
新建命令，选择操作单元格命令
目标单元格：”EL-分页“控件所在单元格；
操作：设置每页显示行数
参数（每页显示行数）：=分页参数变量

5、图中最后一个“设置单元格属性”命令可以不用，这时是为方便查看当前分辨率情况临时添加的测试命令。

设置好后，运行，导入数据，调整显示器不同分辨率，刷新页面，发现每页初始默认显示行数自动进行了改变，达到要求。
最后：动态调整参数与行高设置、流式布局都有很大关系，需要根据自己的实际情况调整参数。

附上工程文件：

自动分页测试.fgcc (1.38 MB, 下载次数: 358)

scliudong · scliudong

本帖最后由 scliudong 于 2023-2-2 13:05 编辑

重新更新了一下第3步的公式，显示更完整了。

3、计算动态行数
更新：用当前获取的浏览器高度-所有表格外内容占用的高度（含标题栏）/表格行高
这样更新后经测试，分辨率在任何高度均可以自动获得美观的显示行数，需要的可下载工程文件参观。
宽度没去管了，显示器的宽度足够，下面的工程文件可以随便拉动行高，刷新后都能得到合适的显示行数。
PS：拉动浏览器改变行高后，自动刷新显示行数需要用JS功能去刷新一下页面了，搞不来。

工程文件：

自动分页测试.fgcc (1.81 MB, 下载次数: 381)