JavaScript 数据网格QQJavaScript 表格

网站 二. 支助 页:1 二. 支助 社区

AG 网格是一个 完全定制 财务报告和审定财务报表 高度定制 JavaScript 数据网格. 它能提供 杰出业绩,已经 无第三方依赖关系 并提供支持 反应, (中文(简体) ), 角质 财务报告和审定财务报表 阴道。 。 。 .

* 概览

AG Grid有两种版本:社区与企业.

• ag-grid-community 根据麻省理工学院的许可可以免费使用,并带有JavaScript Data Grid的所有核心功能,包括 排序, (中文(简体) ), 过滤, (中文(简体) ), 倾斜, (中文(简体) ), 编辑, (中文(简体) ), 自定义组件, (中文(简体) ), 他们 还有更多.
• ag-grid-enterprise 具有先进的特性,例如 AI 工具包, (中文(简体) ), 集成图, (中文(简体) ), 公式, (中文(简体) ), 行组, (中文(简体) ), 合计, (中文(简体) ), 支点, (中文(简体) ), 大师/详细情况, (中文(简体) ), 服务器侧行模型, (中文(简体) ), 查找 财务报告和审定财务报表 导出 除了我们工程队的全力支援外.

特征

i 说明:

访问 定价 用于进行完整比较.

实例

我们创建了多个演示来展示 AG Grid 的丰富功能设定 跨越不同的使用案例。 在下面看到它们,或者与它们互动 演示 页 次.

🏦 财务发展

以现场更新和火花为主的财务数据实例:

现场直播 二. 支助 源代码

📦 库存

用于查看和管理产品的清单数据示例:

现场直播 二. 支助 源代码

🧑‍💼 人力资源

显示雇员分级数据的人力资源数据实例:

现场直播 二. 支助 源代码

QQ 快速启动

AG Grid 很容易设置 - 您只需要提供您的数据并定义您的列结构 。 读取香草JavaScript安装指令,或参考我们针对框架的指南 反应, (中文(简体) ), 角质 财务报告和审定财务报表 维.

安装

$ npm install --save ag-grid-community

设置

1. 提供集装箱

装入 AG Grid 库并创建容器 div 。 div 应该有一个高度, 因为数据网格会填充母容器的大小 :

<html lang="en">
    <head>
        <!-- Includes all JS & CSS for the JavaScript Data Grid -->
        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
    </head>
    <body>
        <!-- Your Data Grid container -->
        <div id="myGrid" style="height: 500px"></div>
    </body>
</html>

2. 证实JavaScript数据网格

在容器内创建数据网格 createGrid。 。 。 .

// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {};

// Your Javascript code to create the Data Grid
const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);

3. 定义行和列

// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {
    // Row Data: The data to be displayed.
    rowData: [
        { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
        { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
        { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
    ],
    // Column Definitions: Defines the columns to be displayed.
    columnDefs: [{ field: 'make' }, { field: 'model' }, { field: 'price' }, { field: 'electric' }],
};

i 说明:

关于使用AG Grid构建数据网格的更多信息,请参见我们 文档。 。 。 .

种子项目

我们还提供 种子项目 帮助您启动共同配置 :

环境	框架
创建反应 App( CRA)
维特
创建下一个 App
Vite - 类型脚本
网页包 5 - 类型脚本
Webpack 5 - Java 脚本
角 CLI 函数
坚果
维特

QQ 自定义

AG Grid在外观和功能上都是完全定制的. 网格的定制有许多方法,我们提供了一些工具来帮助创建这些定制.

自定义组件

您可以创建自定义组件来自定义网格的行为 。 例如,您可以自定义单元格的渲染方式、数值的编辑方式以及创建自己的过滤器.

有几个不同的 组件类型 您可以向电网提供,包括:

• 单元格组件: 自定义单元格的内容.
• 标题组件: 自定义一列和一列组的标题.
• 编辑组件:自定义单元格的编辑.
• 过滤组件: 对于列菜单中显示的自定义列过滤器.
• 浮动过滤器: 对于列菜单中出现的自定义列浮动过滤器.
• 日期组件:在日期过滤器中自定义日期选择组件.
• 正在装入组件:在使用服务器侧行模型时自定义加载单元格行.
• 重叠构成部分:要自定义加载,没有行覆盖组件或提供自定义覆盖.
• 状态栏组件: 对于自定义状态栏组件.
• 工具面板组件: 用于自定义工具面板组件.
• 工具提示组件:用于自定义单元格工具提示组件.
• 菜单项目组件: 自定义列和上下文菜单中显示的菜单项.

要向 Grid 提供自定义单元格渲染器和过滤组件,请在 gridOptions.columnDefs 属性 :

gridOptions = {
    columnDefs: [
        {
            field: 'country', // The column to add the component to
            cellRenderer: CountryCellRenderer, // Your custom cell component
            filter: CountryFilter, // Your custom filter component
        },
    ],
};

主题

AG网格有4个 主题,每个可用 light 打开 dark 模式 :

夸茨语Name	材料
阿尔卑斯山	巴尔汉姆

自定义主题

所有 AG 网格主题都可以使用 他们的API,或者你可以在我们的帮助下从零开始创建一个新的主题 主题构建器 或者说 图像设计系统。 。 。 .

社区

工具扩展( S)

AG Grid有一个庞大而活跃的社区,他们创建了 第三方工具、扩展和公用事业的生态系统 帮助您用 AG Grid 构建您的下一个项目, 无论您使用哪种语言或框架 :

 反应 二. 支助  角质 二. 支助  类型脚本 二. 支助  阴道 二. 支助  蟒 二. 支助  丝绒 二. 支助  固态JS 二. 支助  . NET 网络 二. 支助  锈 二. 支助  拉威尔

显示大小写

AG Grid是全世界十万名开发者使用的,来自几乎每个行业. 虽然这些项目大多是私人的,但我们已经管理了来自不同行业的一批开放源代码项目,这些行业的家庭名称使用AG Grid,包括: 摩根, (中文(简体) ), 蒙戈DB 财务报告和审定财务报表 美国航天局访问我们 社区显示大小写 页面以学习更多.

星舰

AG Grid成立于2016年,其受欢迎程度稳步上升,现为Data Grids的市场领袖:

++ 辅助

企业支助

AG Grid 企业客户可以通过 禅德斯克语Name我们的工兵队负责监控.

错误报告

如果您找到错误, 请在此仓库中报告 问题 节.

问 题

寻找类似的问题 叠叠流 使用 ag-grid 标签。 如果看起来没什么关系,就在那里发布新的信息。 请不要使用 GitHub 问题来提问 .

捐款

AG Grid由伦敦的同地开发者团队开发. 狦稱舱麓 碞р application癳 数据信息@ag-grid.com。 。 。 .

许可证

ag-grid-community 已根据该条例获得许可证 麻省理工学院 执照.

ag-grid-enterprise 有一个 商业 执照.

见 自由文件 需要更多信息.

如果你走这么远,你可能会对我们最近的项目感兴趣: AG 图表 - 世界上最好的JavaScript图书库.

最初建造为电力 集成图 在AG Grid中,我们在2018年开源了这个项目. 从那时起,我们的受欢迎程度稳步上升,我们决定投资AG图表,并配有一个专门的企业版(Entertainment)ag-charts-enterprise除了我们继续支持 ag-charts-community。 。 。 .