•  JavaScript数据网格

     

    AG Grid现在是世界先进的现代Javascript应用程序数据网格之一。它诞生于Angular世界,但它现在与框架完全无关——它不依赖于任何框架。AG Grid 支持 Angular、React、JavaScript 和 Vue。

     

    为什么选择AG Grid

    • 支持具有相同 API 的多个框架。

    • 为每个框架量身定制的 GUI 层,以获得更好的开发人员体验和性能。

    • Community Edition 完全免费,即使用于商业用途。

    • 我们的代码是开源的,因此您可以在评估过程中查看代码。

    • 为企业客户提供专门的支持团队。

    • 具有其他数据网格无法提供的功能,例如透视、分组、集成图表。

     

     

    功能概述

    企业级功能


    01

    聚合

    分组时,您还可以进行聚合以获取数据的聚合值,即总和、极小值、极大值等。使用内置聚合函数或创建自己的聚合函数。

     

    02

    剪贴板

    从剪贴板复制和粘贴数据。用户将能够在 Excel 中编辑数据,然后在完成后将数据复制回网格中。

     

     

    03

    栏目菜单

    列菜单从列标题下拉。使用默认选项或提供您自己的选项。

    04

    上下文菜单

    右键单击单元格时会出现上下文菜单。使用默认选项或提供您自己的选项。

     

    05

    Excel导出

    以本机Excel格式导出,该格式将保持列宽并允许导出样式。例如,您可以为网格中的单元格着色,并在Excel导出中为等效的单元格着色。

    06

    分组行

    使用分组行将数据分组到选定的维度上。您可以将数据设置为按特定列分组,或者允许用户拖放他们选择的列并动态分组。

    07

    主/细节

    使用Master Detail扩展行,并在内部有另一个包含不同列的网格。

    08

    原型

    通过对数据进行透视来创建列,类似于 Excel 中的数据透视表。

    09

    范围选择

    将鼠标拖到单元格上以创建范围选择。这对于突出显示数据或复制到剪贴板非常方便。

    10

    设置过滤器

    Set Filter的工作方式与Excel类似,提供复选框以从集合中选择值。

    11

    状态栏

    当您使用范围选择选择单元格范围时,状态栏出现在网格底部并显示聚合(总和、极小值、极大值等)。这类似于Excel中发生的情况。

    12

    工具面板

    工具面板允许用户操作列列表,例如显示和隐藏,或拖动列进行分组或旋转。

    13

    树数据

    使用树数据显示具有父/子关系的数据,其中父/子关系作为数据的一部分提供。例如,一个文件夹可以包含零个或多个文件和其他文件夹。

     

     

    核心网格功能


    01

    可访问性

    网格在单元格内具有 ARIA 角色,用于辅助功能 以启用屏幕阅读器导航。

    02

    网格对齐

    使一个或多个网格水平对齐,以便一个网格中的任何列更改都会影响另一个网格。这允许具有不同数据的两个网格保持水平同步。

     

    03

    单元格编辑

    用户可以使用单元格编辑更新数据。使用提供的单元格编辑器之一或创建自己的单元格编辑器以满足您的业务需求。

    04

    列过滤器

    列过滤器出现在列菜单中。网格带有开箱即用的过滤器:文本、数字、日期和设置过滤器。您还可以创建自己的客户过滤器。

    05

    列组

    列可以组合成列组。此外,您可以将组配置为可展开以显示和隐藏组内的列。

    06

    列移动

    可以通过用鼠标拖动列或使用API来内联移动列。

    07

    列固定

    使用列固定将一列或多列固定在左侧或右侧。固定列始终存在,不受水平滚动的影响。

     

    08

    列调整大小

    通过拖动列标题的边缘来调整列的大小,自动填充以填充网格宽度,或通过自动调整列大小以适应其内容。

    09

    CSV导出

    使用CSV 导出将数据从网格中取出并放入另一个应用程序(例如Excel)进行进一步处理。

     

    10

    自定义过滤器

    创建您自己的自定义过滤器以匹配您自己的业务需求。

    11

    日期过滤器

    日期过滤器允许使用 {equals、notEquals、lessThanOrEqual、greaterThan、greaterThanOrEqual、inRange} 过滤日期。

    12

    外部过滤器

    外部过滤器允许您构建位于网格之外的过滤器。例如,您可以在网格之外为您自己的过滤器包含您自己的小部件。

    13

    键盘导航

    使用键盘导航,用户可以使用光标键和Tab键在单元格之间导航。

    14

    印刷

    删除网格中的所有滚动以使其准备好打印。

    15

    号码过滤器

    数字过滤器允许使用 {equals, notEquals, lessThanOrEqual, greaterThan, greaterThanOrEqual, inRange} 过滤数字

    16

    分页

    当您不希望用户滚动时使用分页。分页允许一次查看一页的行。

    17

    快速过滤器

    快速过滤器通过简单的文本搜索同时过滤所有列,就像您过滤Gmail的方式一样。

    18

    行选择

    行选择以选择行。在单击选择或复选框选择之间进行选择。选择组将选择孩子。

    19

    行排序

    行排序将对数据进行排序。通过单击标题对列进行排序。按住 对多列进行排序Shift。

     

    20

    行拖动

    行拖动允许您通过拖动来重新排列行。

    21

    文本过滤器

    文本过滤器允许使用 {equals, notEqual, contains, notContains, startsWith, endsWith} 过滤文本字符串。

    22

    触控支持

    用户可以在具有内置 触控支持的触控设备上导航网格的功能。你不需要做任何事情,它开箱即用。

     

     

    配置


    01

    列定义

    通过提供列定义列表在网格中配置列。您在列定义上设置的属性定义了列的行为方式,例如标题、宽度等。

    02

    网格大小

    使用CSS设置网格的宽度和高度。如果您的应用程序在运行时更改了网格的大小,则网格将动态调整为新的大小。

     

     

    造型与外观


    01

    动画

    用户排序或过滤后,网格中的行将动画到位。

    02

    单元格渲染

    使用Cell Rendering让单元格呈现除简单字符串之外的值。例如,将国家标志放在国家名称旁边,或按按钮进行操作。

    03

    单元格样式

    使用CSS规则根据数据内容定义单元格样式,例如将红色背景放在具有负值的单元格上,将绿色背景放在值大于 100 的单元格上。

    04

    列标题

    例如,可以微调列标题的显示以更改标题高度和文本方向。

    05

    列跨越

    Column Spanning允许单元格跨列,类似于Excel 中的单元格跨度

    06

    自定义图标

    网格中的所有图标都可以替换为您自己的自定义图标。您可以使用 CSS 或提供自己的图像。

    07

    全宽行

    全宽行允许您拥有一个跨越整个表格宽度的单元格。这允许卡片布局与普通单元格一起工作。

    08

    本土化

    通过Localization支持不同的语言。

    09

    叠加层

    完全控制覆盖以在网格顶部向用户显示消息

    10

    行高

    行可以有不同的行高。您甚至可以在运行时动态更改行高。

    11

    行固定

    使用固定行将一或多行固定到顶部或底部。固定行始终存在,不受垂直滚动的影响。

    12

    RTL

    使用从右到左对齐以允许使用阿拉伯语和希伯来语等语言。

     

     

    处理数据


    01

    访问数据

    一旦数据在网格中,您可以使用网格的API访问数据。

    02

    变化检测

    当您更改网格内的数据时,网格会运行更改检测以检查是否需要更新任何其他单元格以反映更改。

    03

    表达式

    表达式允许您使用简单的字符串而不是值获取器、设置器、格式化程序和解析器的函数。

    04

    表达式参考数据

    使用参考数据可以更轻松地编辑使用参考数据进行显示的数据。例如,您的数据中可能包含国家/地区代码,例如 {IE, UK, USA},但您显示的值可能是 {Ireland, Great British, United States of America})。使用参考数据可以简化这一点,尤其是在编辑时。

    05

    设置器和解析器

    值设置器和值解析器与值获取器和值格式化器相反。值设置器用于在无法使用字段时将值放入数据中。值解析器用于解析已编辑的值,例如在存储到数据之前删除格式。

    06

    更新数据

    数据可以实时更新。网格可以通过闪烁单元格或在单元格刷新时通过单元格内的动画来突出显示更改。

    07

    值获取器和值格式化器

    值获取器和值格式化器是关于获取和格式化要显示的数据。当数据不是一个简单的字段时,使用Value Getter 。使用值格式化程序来格式化值以供显示。

    08

    查看刷新

    如果数据在网格之外发生更改,请让网格执行视图刷新以将UI更新为新值。网格将使用更改检测来仅刷新已更改的值。

     

     

    表现


    01

    表现

    核心网格引擎提供了与以前不同的性能。网格使用行和列虚拟化、动画帧和许多其他技术。