HTML5报表(无插件跨平台WEB报表)例子 - 锐浪报表开发工具Grid++Report6

锐浪WEB报表开发包括报表插件、HTML5报表、报表服务器与报表客户端,同一报表模板与报表数据提供程序可以为这四种WEB报表开发方式共用,可以非常容易的从一种开发方式切换到另一种,点击进一步了解锐浪WEB报表。WEB报表支持各种WEB服务器与操作系统,支持任意形式的数据源,而不局限于关系数据库。WEB报表开发相关资料与例子在锐浪报表Grid++Report6安装包中,WEB报表例子包括asp.net(c#,vb)、asp、php、jsp(java)。访问锐浪软件首页详细了解锐浪报表。

官方网站例子演示:

HTML5报表运行在所有支持HTML5的浏览器(目前较新版本的各种浏览器都支持HTML5)中,所以各种操作系统平台(Windows、Linux与Android等)与各种硬件设备(电脑、手机与IPAD等)都能运行锐浪HTML5报表,锐浪HTML5报表是跨平台报表开发的最佳选择。

各种格式报表演示

下面演示各种形式的报表的HTML5报表的展现结果,可以在各种浏览器与设备上运行。表格的“报表模板”与“报表数据”两栏的链接可以打开对应的报表模板与报表数据,通过查看报表数据网页的源数据,可以看到报表的 XML 或 JSON 数据。

各种基础报表

报表名称 报表运行 报表模板 报表数据 说明
1a.简单表格 仅HTML5报表 搭配客户端 搭配服务器 grf/1a.grf /data/DataCenter.ashx?data=Customer 一个简单的表格报表。
1b.双层表头 仅HTML5报表 搭配客户端 搭配服务器 grf/1b.grf /data/DataCenter.ashx?data=Customer 双层表头报表,明细网格标题行可以定义任意多层的表头。在设计器‘列标题布局...’界面中在设计时定义多层标头。
1f.表格中图像与文字 仅HTML5报表 搭配客户端 搭配服务器 grf/1f.grf /data/DataCenter.ashx?data=Picture 演示报表中的混和显示文字与图像,将明细网格的内容格设为自由格,实现图像与文字的混合排列。
1g.条形码与二维码 仅HTML5报表 搭配客户端 搭配服务器 grf/1g.grf /data/DataCenter.ashx?data=Customer 演示条形码与二维码,条形码数据将来自于关联的字段值。支持各种条常用的条形码与二维码。
1i.演示部件框自动布局 仅HTML5报表 搭配客户端 搭配服务器 grf/1i.grf /data/DataCenter.ashx?data=Customer 自动布局功能是开发自适应动态报表的重要方面。自动布局功能包括:停靠(Dock)、居中(Center)、对齐列(AlignColumn)、锚定(Anchor)。
1k.明细自由编排 仅HTML5报表 搭配客户端 搭配服务器 grf/1k.grf /data/DataCenter.ashx?data=Customer 将明细网格的标题格与内容格设为自由格,就可以像其它条幅式报表工具一样自由编排报表明细。
1l.交替色显示明细行 仅HTML5报表 搭配客户端 搭配服务器 grf/1l.grf /data/DataCenter.ashx?data=Customer 用两种背景色交替显示明细行的背景,通过设置内容行的“交替背景色”属性实现。

分组报表

报表名称 报表运行 报表模板 报表数据 说明
2a.基本分组 仅HTML5报表 搭配客户端 搭配服务器 grf/2a.grf /data/DataCenter.ashx?data=SaleDetail 一个最基本的分组报表,定义一个分组,并定义分组的“依据字段”属性。
2b.依据多个字段分组 仅HTML5报表 搭配客户端 搭配服务器 grf/2b.grf /data/DataCenter.ashx?data=Customer 根据多个字段进行分组的报表,多个分组字段之间用字符“;”隔开。
2c.多级分组 仅HTML5报表 搭配客户端 搭配服务器 grf/2c.grf /data/DataCenter.ashx?data=Customer 演示定义多个分组实现多级分组报表。
2d.分组单元格合并 仅HTML5报表 搭配客户端 搭配服务器 grf/2d.grf /data/DataCenter.ashx?data=Customer 演示占列式分组报表,占列式分组其分组头不占据单独的显示行,也就是表格分组单元格合并。
2e.自定义分组单元格合并 仅HTML5报表 搭配客户端 搭配服务器 grf/2e.grf /data/DataCenter.ashx?data=Customer 演示占列式分组,合并单元格内容在分组头中专门定义。
2f.多级分组单元格合并 仅HTML5报表 搭配客户端 搭配服务器 grf/2f.grf /data/DataCenter.ashx?data=Customer 演示多级分组占列式分组报表。
2h.分组节显示列线 仅HTML5报表 搭配客户端 搭配服务器 grf/2h.grf /data/DataCenter.ashx?data=SaleDetail 在分组头与分组尾中显示列线,通过显示部件框的左右边框并采用对其列定位来实现。
2l.分组按统计排序 仅HTML5报表 搭配客户端 搭配服务器 grf/2l.grf /data/DataCenter.ashx?data=SaleDetail 根据分组的统计值进行排序。

交叉报表

报表名称 报表运行 报表模板 报表数据 说明
3a.交叉表起步 仅HTML5报表 搭配客户端 搭配服务器 grf/3a.grf /data/DataCenter.ashx?data=CrossTab 一个最基本的交叉报表。
3b.交叉表横向合计 仅HTML5报表 搭配客户端 搭配服务器 grf/3b.grf /data/DataCenter.ashx?data=CrossTab 交叉表加上横向求和功能。
3c.交叉表纵向合计 仅HTML5报表 搭配客户端 搭配服务器 grf/3c.grf /data/DataCenter.ashx?data=CrossTab 交叉表加上纵向求和功能。
3d.交叉表横向百分比 仅HTML5报表 搭配客户端 搭配服务器 grf/3d.grf /data/DataCenter.ashx?data=CrossTab 交叉表横向求比重百分比。
3e.交叉表纵向百分比 仅HTML5报表 搭配客户端 搭配服务器 grf/3e.grf /data/DataCenter.ashx?data=CrossTab 交叉表纵向求比重百分比。
3f.交叉表按日交叉 仅HTML5报表 搭配客户端 搭配服务器 grf/3f.grf /data/DataCenter.ashx?data=CrossTabByDay 按日交叉表,即通常所说的日报表。
3g.交叉表按月交叉 仅HTML5报表 搭配客户端 搭配服务器 grf/3g.grf /data/DataCenter.ashx?data=CrossTabByMonth 按月交叉表,即通常所说的月报表。
3h.交叉表横向平均 仅HTML5报表 搭配客户端 搭配服务器 grf/3h.grf /data/DataCenter.ashx?data=CrossTab 交叉表横向统计平均值。
3i.交叉表纵向单元格合并 仅HTML5报表 搭配客户端 搭配服务器 grf/3i.grf /data/DataCenter.ashx?data=CrossTab 演示交叉表分组单元格合并功能。
3j.交叉表多数据列(1) 仅HTML5报表 搭配客户端 搭配服务器 grf/3j.grf /data/DataCenter.ashx?data=CrossTab 演示一个具有两个交叉数据列的交叉报表。
3k.交叉表多数据列(2) 仅HTML5报表 搭配客户端 搭配服务器 grf/3k.grf /data/DataCenter.ashx?data=CrossTab 演示一个具有两个交叉数据列的交叉报表。
3l.交叉表自定义统计 仅HTML5报表 搭配客户端 搭配服务器 grf/3l.grf 演示一个按年月交叉的交叉报表。
3m.交叉表横向小计(1) 仅HTML5报表 搭配客户端 搭配服务器 grf/3m.grf /data/DataCenter.ashx?data=CrossTabSubtotal 交叉表横向交叉项按类别进行分类,并据此产生按类别统计的数据。
3n.交叉表横向小计(2) 仅HTML5报表 搭配客户端 搭配服务器 grf/3n.grf /data/DataCenter.ashx?data=CrossTabSubtotal 交叉表横向交叉项按类别进行分类,并据此产生按类别统计的数据,与上例区别在表头形式上。
3o.交叉表横向显示表格 仅HTML5报表 搭配客户端 搭配服务器 grf/3o.grf /data/DataCenter.ashx?data=Customer 用交叉表实现表格数据的横向显示。
3p.交叉表按年月交叉 仅HTML5报表 搭配客户端 搭配服务器 grf/3p.grf /data/DataCenter.ashx?data=CrossTabYearMonth 根据年份与月份对数据进行交叉统计。
3q.日历报表 仅HTML5报表 搭配客户端 搭配服务器 grf/3q.grf /data/DataCenter.ashx?data=CrossTabCalendar 类似日历一样的报表,用于展现每日的统计数据。

子报表

报表名称 报表运行 报表模板 报表数据 说明
4a.演示子报表 仅HTML5报表 搭配客户端 搭配服务器 grf/4a.grf /data/DataCenter.ashx?data=SubReport_4a 示子报表,在一个主控报表中显示多个子报表,实现多个报表的集中展现。
4b.独立子报表 仅HTML5报表 搭配客户端 搭配服务器 grf/4b.grf /data/DataCenter.ashx?data=SubReport_4b 独立子报表中每个子报表可以是不同的页面设置,可以导出到不同的Excel工作表。独立子报表的概念说明: 请参考帮助中的“开发指南->报表部件框应用->子报表”部分。
4c.子报表实现表中表 仅HTML5报表 搭配客户端 搭配服务器 grf/4c.grf /data/DataCenter.ashx?data=SubReport_4c 演示在内容格中查入子报表实现表中表。[设计子报表1][设计子报表2]
4d.子报表主子关联 仅HTML5报表 搭配客户端 搭配服务器 grf/4d.grf /data/DataCenter.ashx?data=SubReport_4d&city=天津 演示主子报表之间如何自动传递参数,子报表中的参数会自动从主报表中同名的参数或记录集字段中取值。

各种常见类型报表

报表名称 报表运行 报表模板 报表数据 说明
5a.表达式运算 仅HTML5报表 搭配客户端 搭配服务器 grf/5a.grf /data/DataCenter.ashx?data=SaleDetail 演示用综合文字框实现运算表达式。
5b.显示行号序号 仅HTML5报表 搭配客户端 搭配服务器 grf/5b.grf /data/DataCenter.ashx?data=Customer 演示用系统变量显示行号及各种序号,将内容格设为自由格并插入系统变量框。
5c.层高不等多层表头 仅HTML5报表 搭配客户端 搭配服务器 grf/5c.grf /data/DataCenter.ashx?data=Customer 演示层高不等多层表头报表。
5f.无边框表格 仅HTML5报表 搭配客户端 搭配服务器 grf/5f.grf /data/DataCenter.ashx?data=Customer 演示一个没有表格边框线的报表。
5g.无行线表格 仅HTML5报表 搭配客户端 搭配服务器 grf/5g.grf /data/DataCenter.ashx?data=Customer 演示一个没有行线的表格报表,但标题行下显示一条水平分隔线,标题格为自由格,其中的静态框显示下边框。

报表脚本

报表名称 报表运行 报表模板 报表数据 说明
7-1a.脚本:追加空白记录 仅HTML5报表 搭配客户端 搭配服务器 grf/7-1a.grf 在报表主对象的开始处理脚本上实现追加空白记录。
7-1b.脚本:设置特殊显示文字 仅HTML5报表 搭配客户端 搭配服务器 grf/7-1b.grf 在字段的“获取显示文字脚本”中为字段设置特殊显示文字。在文字类部件框上也可以实现类似的功能。
7-1c.脚本:文字按条件突出显示 仅HTML5报表 搭配客户端 搭配服务器 grf/7-1c.grf /data/DataCenter.ashx?data=SaleDetail 在内容行的“格式化脚本”中实现文字按条件高亮显示。部件框的外观属性可以在其所处的报表节的格式化脚本上进行改变,这样可以根据不同的条件实现文字按不同的格式显示。
7-1d.脚本:整行突出显示 仅HTML5报表 搭配客户端 搭配服务器 grf/7-1d.grf /data/DataCenter.ashx?data=SaleSumByProduct 在内容行的“格式化脚本”中实现当前行整行按条件高亮显示。
7-1e.脚本:两行显示一次行线 仅HTML5报表 搭配客户端 搭配服务器 grf/7-1e.grf /data/DataCenter.ashx?data=Customer 实现按需显示表格的行线,将单元格改为自由格,然后在内容行的“格式化脚本”上按条件动态控制部件框的边框。
7-1h.脚本.按条件隐藏数据行 仅HTML5报表 搭配客户端 搭配服务器 grf/7-1h.grf /data/DataCenter.ashx?data=SaleDetail 根据条件确定明细行是否显示。
7-2a.脚本:计算字段 仅HTML5报表 搭配客户端 搭配服务器 grf/7-2a.grf 报表中可以插入计算字段,计算字段无实际数据源字段对应。在记录集的“提交记录前脚本”属性上写报表脚本,实现计算字段求值。
7-2b.脚本:累计求和(收发存) 仅HTML5报表 搭配客户端 搭配服务器 grf/7-2b.grf /data/DataCenter.ashx?data=SaleByProduct 用报表脚本实现计算收入支出数据的结存余额。
7-2c.脚本:占列分组不重复求和 仅HTML5报表 搭配客户端 搭配服务器 grf/7-2c.grf 用报表脚本实现主表数据项求和,每项只求和一次。
7-3e.脚本:自定义条件分组 仅HTML5报表 搭配客户端 搭配服务器 grf/7-3e.grf 分组不是根据某一个或多个字段的值的变化产生,而是根据自定义的规则产生分组项,这里是根据值的范围产生不同的分组。
7-3f.脚本:按首字母分组 仅HTML5报表 搭配客户端 搭配服务器 grf/7-3f.grf 按首字母进行分组。增加一个计算字段,在记录集的“提交记录前脚本”中将计算字段的值设为对应字段的首字母。

图表(Chart)

报表名称 报表运行 报表模板 报表数据 说明
8a.图表.序列组簇图 仅HTML5报表 搭配客户端 搭配服务器 grf/8a.grf 各种序列组簇类型的图表,包括柱状图、饼图、连线图、混和图表、双轴图表等。
8b.图表.XY数据型图 仅HTML5报表 搭配客户端 搭配服务器 grf/8b.grf /data/DataCenter.ashx?data=Chart_8b 各种散列(XY)类型的图表,包括散列点图、散列连线图、散列曲线图、气泡图表等。
8c.图表.三维(3D) 仅HTML5报表 搭配客户端 搭配服务器 grf/8c.grf 各种3D图表等。
8d.记录集图表 仅HTML5报表 搭配客户端 搭配服务器 grf/8c.grf /data/DataCenter.ashx?data=Chart_8d 图表全部定义对应记录集,图表的相关属性关联记录集的字段。

自由表格(FreeGrid)

报表名称 报表运行 报表模板 报表数据 说明
9a.自由表格 仅HTML5报表 搭配客户端 搭配服务器 grf/9a.grf /data/DataCenter.ashx?data=EmployeeOne 用自由表格(FreeGrid)部件框制作一个人员档案自由表格。
9b.自由表格并明细网格 仅HTML5报表 搭配客户端 搭配服务器 grf/9b.grf /data/DataCenter.ashx?data=FreeGridwithDetailGrid 用自由表格部件框与明细网格共同实现一个有动态明细数据的自由表格。

报表组件对象模型

报表名称 报表运行 报表模板 报表数据 说明
a0.报表组件对象模型 仅HTML5报表 搭配客户端 搭配服务器 grf/a0.grf 用 Grid++Report 本身设计出其编程对象的组件对象模型图。

教程例子演示

基础起步

例子报表名称 简要说明 例子文件
起步例子 包含HTML5报表的js程序文件,设定报表显示占位HTML标签,定义报表显示对象并关联相关参数,显示一个HTML5报表只需短短几行代码。 01.Simple/ViewReport.htm
按条件筛选报表数据 通过在报表数据URL中增加参数实现筛选条件传递给WEB服务器,按条件获取报表数据。 10.SummaryToDetail/Summary.htm
报表中显示图像 各种类型图像数据显示在报表中。 05.Picture/Picture.htm
汇总报表穿透(透视/Drilldown)查询 从汇总报表穿透查询到对应的明细报表,将当前双击行的记录数据作为穿透参数。 10.SummaryToDetail/Summary.htm
交叉报表穿透(透视/Drilldown)查询 从交叉报表穿透查询到对应的明细报表,将当前双击行或单元格的记录关联数据作为穿透参数。 10.SummaryToDetail/Crosstab.htm
搭配WEB报表客户端 利用WEB报表客户端实现报表打印、打印预览与数据导出。 PlusWebApp/webapp-toolbar-bootstrap.htm
搭配WEB报表服务器 利用WEB报表服务器的功能实现报表数据导出。 PlusServer/server-toolbar-bootstrap.htm
解决报表数据跨域 通过 General/CrossDomain.ashx 读取报表数据解决跨域问题。也可以通过 jsonp 方式解决,参考例子JsonpRport.htm。 Advance/CrossDomain/CrossDomainReport.htm

进一步了解锐浪报表

锐浪软件网站 | 锐浪报表Grid++Report介绍 | 锐浪报表开发选型 | 锐浪WEB报表开发方式 | WEB报表插件演示 | HTML5报表演示 | WEB报表服务器演示 | 关于锐浪报表免费版