解决帆软移动端明细表展现问题-固化查询结果、折叠、滑动、分页

最新推荐文章于 2024-12-30 12:30:00 发布

原创最新推荐文章于 2024-12-30 12:30:00 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#帆软 #移动端 #报表

帆软报表专栏收录该内容

14 篇文章

订阅专栏

本文针对移动端帆软明细报表加载慢、操作体验差的问题，提出解决方案。通过固化查询结果，将报表转换为Excel文件，提高加载速度。同时，利用折叠、横向滑动和分页查询优化移动端操作，通过设置固定比例、自定义按钮和JS事件实现。这些措施显著提升了移动端报表的使用效率。

1.源数据和问题：

源数据为明细报表，在PC端展现方便查看，在移动端会由于数据量增大，操作时间达十几秒，操作体验感差。

2.解决方案：

从两个方面解决操作，一是数据源问题：从数据库查询数据加工报表格式的过程漫长，我直接将报表结果转为Excel文件。

二是移动端操作问题：在较小的屏幕展现明细数据表，我采用纵向折叠，横向滑动，分页查询（帆软的行式报表引擎）。

3.解决步骤：

1）固化查询结果：制作报表-定时调度-自定义上传Excle文件至磁盘

参考资料：https://help.finereport.com/doc-view-700.html

2）移动端操作：固定比例-分页-折叠-滑动

固定比例：由于不使用__op__=h5参数，表格工具栏缩放比例不协调，所以先设置缩放比例，即添加<meta>节点：

添加位置：模板-模板Web属性-分页预览设置-事件设置-加载起始

添加内容：

$("head").append('<meta name="viewport" content="width=device-width,initial-scale=0.9">');

分页：即启用行式报表引擎，在模板-报表引擎属性-启用该方式优点是分页速度快，缺点是条件属性大多不生效。

折叠：先自定义按钮，触发js事件

自定义按钮：模板-模板Web属性-分页预览设置-添加自定义按钮

触发js事件：编辑自定义按钮-自定义事件-写入js内容：

FR.HtmlLoader.loadingEffect({el : $(".content-container"),show : true});//显示处理中标志
var re,i;
setTimeout(function () { 
for(i=0;i<page;i++){
    $("tr[id^='r-"+(9*i+3)+"-0']").toggle();//使用juery查询要切换的节点	
    $("tr[id^='r-"+(9*i+4)+"-0']").toggle();
    $("tr[id^='r-"+(9*i+5)+"-0']").toggle();
    $("tr[id^='r-"+(9*i+6)+"-0']").toggle();
    $("tr[id^='r-"+(9*i+7)+"-0']").toggle();
    $("tr[id^='r-"+(9*i+8)+"-0']").toggle();
    $("tr[id^='r-"+(9*i+9)+"-0']").toggle();
}
FR.HtmlLoader.loadingEffect({el : $(".content-container"),show : false});//关闭处理中标志
},500);

滑动：即帆软的冻结报表列，先选中要冻结的报表列-在顶部右键-重复报表列，然后在模板重复与冻结设置中设置冻结列。

再自定义按钮，触发js事件

自定义按钮：模板-模板Web属性-分页预览设置-添加自定义按钮

触发js事件：编辑自定义按钮-自定义事件-写入js内容：

var leftPos = $('.frozen-center').scrollLeft();
$("#frozen-center").animate({scrollLeft: leftPos + 1600}, 800);

OK，通过以上操作，就能够实现一张操作简单、用时快的帆软移动端明细报表了，喜欢的话就可以做o(*////▽////*)q羞羞的事了。