大数据报表展现时怎么实现固定表头效果-创新互联

这篇文章跟大家分析一下“大数据报表展现时怎么实现固定表头效果”。内容详细易懂,对“大数据报表展现时怎么实现固定表头效果”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下,希望阅读后能够对大家有所帮助。下面跟着小编一起深入学习“大数据报表展现时怎么实现固定表头效果”的知识吧。

网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了永清免费建站欢迎大家使用!

对于一个网站来说,用户体验会涉及到很多方面,包括页面布局是否合理、导航视图是否清晰、加载速度是否够快、乃至按钮或字体的大小,等等诸多方面。

用户体验是使用者的主观感受,通俗来说就是“你这玩意儿用起来方不方便”。

除了网站设计,好的用户体验同样适用于用报表工具制作出的报表。比如数据监控,报表支持高亮显示数据提供预警;为了提高报表的可读性,明细报表数据支持隔行异色显示等。

这里,我们关注另一个很典型的用户体验问题,如果报表的一页数据超出一个屏幕显示的高度(超宽也一样)时,如何能保证靠后的行或列数据始终能看到每列对应的标题?总不能让看报表的同志频繁的前后滚动鼠标反复查找对照,要是这样不骂你才怪。

针对这个问题,常使用 excel 的小伙伴儿应该都知道一项“冻结”功能,冻结之后,标题部分在窗口中锁定,滚动鼠标或拖动滚动条时,仅数据区滚动,从而方便查看数据。

问题来了,润乾报表能搞不?! 甭怀疑,肯定行。

比如“按照产品名称统计各销售人员的销售情况表”,如下图

大数据报表展现时怎么实现固定表头效果

润乾报表如何实现锁定标题行(蓝底部分),接下来看下实现过程(以设计器自带 demo 数据库为例)。

首先,设计如上图所示的交叉报表

大数据报表展现时怎么实现固定表头效果

其中

数据集 sql 为

SELECT 产品.产品名称, 订单明细.单价 * 订单明细.数量 * 订单明细.折扣 as 销售额, 雇员.姓氏 +雇员.名字 as 姓名 
FROM 订单明细,订单,产品,雇员
WHERE 订单.订单ID = 订单明细.订单ID AND  订单.雇员ID = 雇员.雇员ID 
AND 订单明细.产品ID = 产品.产品IDSELECT 产品.产品名称, 订单明细.单价 * 订单明细.数量 * 订单明细.折扣 as 销售额, 雇员.姓氏 +雇员.名字 as 姓名 
FROM 订单明细,订单,产品,雇员WHERE 订单.订单ID = 订单明细.订单ID AND  订单.雇员ID = 雇员.雇员ID AND 订单明细.产品ID = 产品.产品ID

A3 表达式:=ds1.group(产品名称; 产品名称:1)

B1 表达式:=ds1.group(姓名; 姓名:1)

B3 表达式:=ds1.sum(销售额)

注:第 1、2 行,行属性设置为“表头”

此时,将报表发布到网页端,可正常展现,但表头没有锁定,如把滚动条拖动到

最底部时,屏幕内只有数据区,如图

大数据报表展现时怎么实现固定表头效果

改造!只需要在报表展现页面标签增加 needScroll属性即可实现锁定表头功能,如下

       "
              funcBarLocation="no"
              generateParamForm="no"
              params="<%=param.toString()%>"
              exceptionPage="/reportJsp/myError2.jsp"
              appletJarName="/raqsoftReportApplet.jar"
              needScroll="yes"
              scrollWidth="100%"
              scrollHeight="100%"
              needImportEasyui="no"/>

注意:标红的 needScroll,是否固定上表头和左表头,默认为 no。另外,scrollWidth

为固定表头后,报表的显示宽度;scrollHeight 则为显示高度。

改造完,看效果(依然将滚动条拖至最底部)

大数据报表展现时怎么实现固定表头效果

可以看到,滚动条拖至最底部,表头依然与数据区不离不弃。

关于大数据报表展现时怎么实现固定表头效果就分享到这里啦,希望上述内容能够让大家有所提升。如果想要学习更多知识,请大家多多留意小编的更新。谢谢大家关注一下创新互联网站!


网站栏目:大数据报表展现时怎么实现固定表头效果-创新互联
浏览路径:http://azwzsj.com/article/diogsd.html