.NET报表设计器ActiveReports教程:树形动态报表设计与应用

ActiveReports 是一款专注于 .NET 和 .NET Core 平台的报表控件。通过拖拽式报表设计器,可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型报表,全面满足 WinForm、ASP.NET、ASP.NET MVC、WPF 平台中各种报表的开发需要。同时,通过丰富的 API 可以灵活的实现报表创建、加载和运行时的个性化自定义需求。

下载ActiveReports最新版本

在一些统计报表中,利用树形结构报表来实现维度钻取功能是十分常见的。通过逐级钻取,可以快速查看更细粒度的指标数据,如项目施工进度报告等。

使用葡萄城报表控件——ActiveReports ,即可轻松设计树形结构报表,以及设置进度条显示等功能。

什么样的报表样式被称为树形结构报表呢?让我们先来看看“树形结构”报表的展示样式。

了解了树形结构报表模板的样式,下面我们就来详细讲解如何使用ActiveReports 完成“基于.NET架构的动态树形结构报表”的设计步骤。

一、绑定数据源和数据集

动态报表与静态报表最大的区别,在于能否绑定数据源和数据集。要实现一张专业的“树形结构”报表,我们需要绑定的数据结构是什么样的呢?如下,就是典型的“树形结构”报表数据源,使用ActiveReports 链接该数据源:

二、拖入表格组件,进行分组设计

如下是ActiveReports 报表设计器中的截图,子分组是编号,父分组是上级编号。

三、优化报表样式

为了使主分组和子分组之间有一个缩进的功能,以便于更好地区分信息。这里,我们需要对边距进行设置:左边距 = 5 + (Level() * 25) & "pt"。

其中level()代表了分组是第几级:

 

四、添加展开、合并按钮

这里,主要是为树形结构报表添加自分组合并和展开功能,也就是“+”、“-”按钮的功能设置。

由于要在项目名称这里添加一个可用于“合并和展开”的按钮,所以要在可见性区域,绑定项目名称对应的文本框:TextBox4

切换图表的样式,有如下属性:Expanded(展开)和 Collapsed(合并)

五、显示进度条

在此报表模板中,进度条是通过图像(image)控件来显示的。

要显示进度条,只需拖入一个容器到table里,然后在容器里放入一个图像(image)控件。接下来进行如下设置:

选择进度条 databar:

调整值和颜色的设置:

六、预览效果

如上,一张树形结构报表就设计好了,全程基本都是通过拖拉拽的方式,无需编写一段代码,即可轻松设计报表模板,这就是ActiveReports 的魅力所在。当然,ActiveReports 的报表设计能力不仅于此,点击学习更多应用教程。

treegrid插件 当前选中的行: var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:[ {name: "城区分公司", code: "CQ", assignee: "", children:[ {name: "城区卡品分销中心"}, {name: "先锋服务厅", children:[ {name: "chlid1"}, {name: "chlid2"}, {name: "chlid3", children: [ {name: "chlid3-1"}, {name: "chlid3-2"}, {name: "chlid3-3"}, {name: "chlid3-4"} ]} ]}, {name: "半环服务厅"} ]}, {name: "清新分公司", code: "QX", assignee: "", children:[]}, {name: "英德分公司", code: "YD", assignee: "", children:[]}, {name: "佛冈分公司", code: "FG", assignee: "", children:[]} ] }; /* 单击数据行后触发该事件 id:行的id index:行的索引。 data:json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的方法来自定义栏数据 */ function customCheckBox(row, col){ return ""; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "查看"; } //创建一个组件对象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展开、关闭所有节点。 isOpen=Y表示展开,isOpen=N表示关闭 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得当前选中的行,方法返回TreeGridItem对象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //获取数据行属性值 //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //获取父数据行 var parent = treeGridItem.getParent(); if(parent!=null){ //jQuery("#currentRow").val(parent.data.name); } //获取子数据行集 var children = treeGridItem.getChildren(); if(children!=null && children.length>0){ jQuery("#currentRow").val(children[0].data.name); } } }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值