开发者社区> ibelieve001> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

像 excel 一样轻松冻结 web 报表表头 (锁定表头)

简介: 冻结表头,固定表头
+关注继续查看

对于一个网站来说,用户体验会涉及到很多方面,包括页面布局是否合理、导航视图是否清晰、加载速度是否够快、乃至按钮或字体的大小,等等诸多方面。
用户体验是使用者的主观感受,通俗来说就是“你这玩意儿用起来方不方便”。
除了网站设计,好的用户体验同样适用于用报表工具制作出的报表。比如数据监控,报表支持高亮显示数据提供预警;为了提高报表的可读性,明细报表数据支持隔行异色显示等。
这里,我们关注另一个很典型的用户体验问题,如果报表的一页数据超出一个屏幕显示的高度(超宽也一样)时,如何能保证靠后的行或列数据始终能看到每列对应的标题?总不能让看报表的同志频繁的前后滚动鼠标反复查找对照,要是这样不骂你才怪。
针对这个问题,常使用 excel 的小伙伴儿应该都知道一项“冻结”功能,冻结之后,标题部分在窗口中锁定,滚动鼠标或拖动滚动条时,仅数据区滚动,从而方便查看数据。
问题来了,润乾报表能搞不?! 甭怀疑,肯定行。
比如“按照产品名称统计各销售人员的销售情况表”,如下图
1

润乾报表如何实现锁定标题行(蓝底部分),接下来看下实现过程(以设计器自带 demo 数据库为例)。
首先,设计如上图所示的交叉报表
2

其中
数据集 sql 为:

SELECT 产品.产品名称, 订单明细.单价 * 订单明细.数量 * 订单明细.折扣 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 行,行属性设置为“表头”
此时,将报表发布到网页端,可正常展现,但表头没有锁定,如把滚动条拖动到
最底部时,屏幕内只有数据区,如图
3

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

       <report:html name="report1" reportFileName="<%=report%>"
              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 则为显示高度。
改造完,看效果(依然将滚动条拖至最底部)
4

可以看到,滚动条拖至最底部,表头依然与数据区不离不弃。
怎么样,简不简单?!不论例子中的锁定行表头,还是要锁定列表头,亦或是同时锁定,仅需一个展示属性即可实现,从而极大提升报表的用户体验。

作者:bubblegum
链接:http://c.raqsoft.com.cn/article/1534755993783?r=IBelieve
来源:乾学院
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
RDIFramework.NET V3.3 Web版新增报表管理功能模块-重量级实用功能
在RDIFramework.NET V3.3 Web版本新增了全新的报表管理功能模块,非常实用的功能,重量级推荐。主要用于对日常常用的报表做定制展示。可以自动发布到模块(就可授权给指定资源访问),在报表定义主界面可以同时对定义好后报表预览效果,支持多种报表样式(如:折线图、柱状图、饼图、地图)等,每种报表样式都给出了参考定义的语句,支持直接在线打印。
983 0
动态切换 web 报表中的统计图类型
统计图在浏览器端展现时,不同的使用人员对图形的展现形式会有不同的要求,有的需要柱形图、有的想看折线图等,报表支持用户在浏览器端动态的选择统计图类型,关注乾学院,查看具体实现方法<a href="http://c.raqsoft.com.cn/article/1542008169051?r=IBelieve" target="_blank" rel="nofollow">动态切换 web 报表中的统计图类型</a> 作者:gxy 链接:http://c.raqsoft.com.cn/article/1542008169051 来源:乾学院 著作权归作者所有。
602 0
如何控制皕杰报表web端工具条的显示 2018-10-10
控制皕杰报表web端工具条有两个方案 1、全局控制 控制所有报表的工具条显示位置、是否显示和工具条按钮的是否显示。在web应用/[size=13.3333px]WEB-INF/resources/report_config.xml中控制。
763 0
windows python web flask 模板开发快速入门
windows python web flask 模板开发快速入门
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
边缘安全,让Web加速有保障
立即下载
使用CNFS搭建弹性Web服务
立即下载
WEB框架0day漏洞的发掘及分析经验分享
立即下载