技术文章

了解最新技术文章

当前位置:首页>技术文章>技术文章
全部 110 常见问题 0 技术文章 110

Ignite UI Angular Grid 摘要导出:入门

时间:2023-09-27   访问量:1027

Infragistics,我们致力于为客户提供市场上最好的产品和解决方案我们不断努力改进和创新,我们最新的 Ignite UI for Angular 22.2 版本也不例外。尽管Ignite UI Angular中添加了大量新的改进和全新组件,但该版本的突出功能之一绝对是Angular网格摘要Excel 导出器

围绕这一点,本文将涵盖以下主题:

那么,让我们开始吧。

简而言之:什么是 Angular Grid 摘要 Excel 导出器

Angular 中的网格摘要 Excel 导出器是一项新功能,可让您轻松将带有摘要的任何网格导出到 MS Excel 中,从而比以往更轻松地分析和操作数据。您现在可以享受更大的灵活性和对数据的控制以及更好的所见即所得体验。

什么是角度网格摘要?

处理大型数据集时的关键挑战之一是能够快速理解并理解其中包含的信息。有了 Angular Grid Summaries,这不再是问题。基本上,Angular 网格摘要代表了Angular 数据网格 Ignite UI的一项强大功能,它在每列级别上作为组页脚工作。它允许用户查看对列中所有数据计算的聚合值。

有一组基于列中数据类型的预定义关键摘要统计信息,以便您可以节省一些时间,识别数据中的趋势和模式,并根据该信息做出更明智的决策。但是,如果这些功能不能满足您的要求,您还可以提供自定义摘要。

下面您可以看到一个 Angular Grid Summaries 示例。

 角度网格摘要示例

Angular Excel 导出器的 Ignite UI

Ignite UI for Angular Excel Exporter 服务可以从原始数据(数组)或我们的任何网格组件导出 MS Excel 格式的数据。这节省了用户的时间和精力,因为他们不再需要手动将数据输入到 Excel 中。此外,导出器将以 MS Excel 表格格式导出任何平面数据,从而允许过滤、排序等功能。

查看以下 Angular Excel 导出器以了解其工作原理。

Angular Excel 导出器的 Ignite UI

导出带有摘要的网格

使用 Angular Excel 导出器的主要优点之一是它保留了数据和用于生成摘要的计算的完整性。Excel 导出器不只是导出纯文本,而是将摘要转换为等效的 Excel 函数,确保您掌握数据分析的最新进展,并始终掌握最新信息。这意味着您可以继续使用 Excel 中的数据,而无需重新计算汇总值。

让我们以这个网格为例。

 导出带有摘要的 Angular 网格

正如您所看到的,有几个列启用了摘要。当我们导出此网格时, IgxExcelExporterService将为每个 摘要创建适当的函数。例如,“UnitPrice”列中的数据总和将使用 SUM 公式导出。这意味着如果工作表中的数据发生更改,汇总值将自动更新以反映更改。

这是导出上述网格的结果:

导出带有摘要结果的 Angular 网格

在下表中,您可以找到每个默认摘要对应的 Excel 公式。

 Angular Grid 中的 Excel 公式


这里有哪些已知的限制?

摘要导出功能在所有 Angular 网格类型中均可用,但 Angular Pivot 网格除外。导出的文件还包括一个隐藏列,用于保存工作表中每个数据记录的级别。 此级别用于摘要中,以过滤掉需要包含在特定摘要函数中的单元格。

但是自定义摘要又如何呢?Angular Excel Exporter 也可以处理这些吗?答案是肯定的!虽然我们无法知道自定义摘要的 Excel 等效项,但 Excel 导出器仍会将自定义摘要导出为纯文本。即使在这些情况下,它们仍然很有用,因为它们提供了一种快速、简单的方法来显示数据的聚合信息。

Ignite UI Angular Excel 导出器入门

为了开始导出带有摘要的网格,首先您需要启用它们。为此,您只需将列的hasSummary属性设置为 true。同样重要的是要记住,每列的摘要是根据列数据类型解析的。默认列类型是字符串,因此如果您想要数字或日期特定的摘要,您应该将dataType属性指定为数字或日期。

  角网格代码

接下来您需要做的就是在 IgxExcelExporterService 的帮助下导出网启动导出,您可以使用组件模板中按钮的处理程序。

 ignite ui Angular 中的 Excel 导出服务

然后,您需要调用导出器服务的导出方法并将 IgxGrid 组件作为第一个参数传递:

 通过 infragistics 角度网格组件

为了您的方便,我们还公开了默认情况下启用的exportSummaries选项如果您不需要导出文件中的摘要,只需将选项的exportSummaries属性设置为 false 即可。

 以 Angular 形式公开导出摘要


包起来 

在使用 Web 应用程序时,我们经常面临以最快、最简单和最有效的方式导出数据的挑战。现在,可以肯定地说,由于我们添加了最新功能 - Angular Grid 摘要 Excel 导出,使用 Ignite UI Angular Grid 时此过程更加简化。

它是我们在 11 月份推出的 Angular 22.2 版本 Ignite UI 的一部分。如果您愿意,您可以阅读有关此版本中 Angular 令人兴奋的改进的所有内容,或观看详细的Infragistics Ultimate 22.2 网络研讨会

在 Medium 上关注我们,了解我们正在开发的最新 Angular 相关项目。在 GitHub 上给我们一颗星,并通过解决问题部分中的任何疑虑、问题或功能请求来帮助我们继续改进我们的产品。我们将继续尽最大努力不断改善我们的产品体验,以满足您的所有需求并轻松构建应用程序。


上一篇:低代码工具如何在经济衰退期间降低成本

下一篇:使用 App Builder 将 Figma 设计转换为 HTML 代码

发表评论:

评论记录:

未查询到任何数据!

在线咨询

点击这里给我发消息 售前咨询专员

点击这里给我发消息 售后服务专员

在线咨询

免费通话

24小时免费咨询

请输入您的联系电话,座机请加区号

免费通话

微信扫一扫

微信联系
返回顶部