Angular Slickgrid是迅雷不及掩耳之势的包装；可自定义的SlickGrid数据网格，它还包括多个样式主题
Posted
tags:
中文标题：Angular Slickgrid是迅雷不及掩耳之势的包装；可自定义的SlickGrid数据网格，它还包括多个样式主题 原文标题：Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes 项目评级：Star:360 Fork:109 下载地址：https://github.com/ghiscoding/Angular-Slickgrid 详情介绍角度Slickgrid
简介
最好的javascript数据网格之一SlickGrid最初由@mleibman开发，现在可用于React。我使用了一些数据网格，SlickGrid在功能和性能方面胜过了大多数数据网格（它甚至可以轻松处理一百万行）。我们将使用6pac/SlickGrid fork，这是自最初的@mleibman不久前因个人原因被原作者退役以来最活跃的fork。同样值得一提的是，为了我在这里维护的所有SlickGrid库的利益，我也为6pac/SlickGrid分叉贡献了很多。。。。同样需要提醒的是，这是一个jQuerylib（SlickGrid）的包装器，其核心组件是用jQuery/JavaScript编写的，所以请记住这一点，这也意味着jQuery是Angular SlickGrid的依赖项。
许可证
麻省理工学院许可证
安装
请参阅Wiki-HOWTO循序渐进和/或克隆Angular Slickgrid Demos存储库。在打开新问题之前，请咨询所有Wiki，也可以考虑询问有关Stack Overflow的安装和/或一般问题，除非您认为库存在错误。
演示页
Angular-Slickgrid适用于所有Bootstrap版本，您可以在下面看到每一个版本的演示。此外，还有两个新的造型主题，Material&；Salesforce也提供。你也可以使用不同的SVG图标，你可能想看看Wiki-SVG图标
工作演示
对于一个完整的&；使用本地演示（30多个示例），您可以（也应该）克隆Angular Slickgrid Demos存储库以开始。该repo经常更新，用于更新Bootstrap 5演示和Bootstrap 4演示的GitHub演示页面。
喜欢吗？它
你喜欢使用Angular Slickgrid吗？一定要投赞成票，也许可以用咖啡来支持我，也可以随意贡献。
最新消息&；发布
查看所有最新新闻的发布部分；发布。
角度兼容性
注意：有关Angular Slickgrid与SlickgridUniversal的完整兼容性表，您可以查阅版本兼容性表-Wiki
对于Angular 12+，请参阅以下说明-Angular 12 with WebPack 5-polyfill问题
ngx翻译兼容性
如果您在构建Angular项目时遇到ngx-translate库的任何问题。您需要确保@ngx-translate/core是依赖项的一部分，即使使用单个Locale也是如此，因为它是Angular Slickgrid的peerDependency。原因是，我们在lib中使用@Optional() TranslateService，为了实现这一点，我们仍然需要安装它，但不要担心，在运行生产构建后，它仍然应该被摇树过程删除。请参阅下面的版本兼容性表
<表格>
角度版本 @ngx翻译/核心
生成警告（角度8+）
在进行生产构建时，您可能会收到关于SlickGrid的警告，其中大多数都很好，修复它们的最佳方法是简单地删除/忽略这些警告，您所要做的就是在项目根目录中添加一个名为ngcc.config.js的文件（与angular.json文件位于同一位置），其中包含以下内容（您也可以看到修复Angular SlickGrid Demos产品构建的提交）：
您还应该在angular.json文件中添加Angular-Slickgrid作为允许的CommonJS依赖项，以使警告静音。
Angular 12与WebPack 5-如何修复polyfill错误
由于Angular 12切换到WebPack 5，您可能会遇到一些新的错误，您需要手动添加一些polyfill才能使Excel Builder（Excel Export）正常工作。
您可能会遇到的错误
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
修复步骤
...
"compilerOptions":
"paths":
"stream": [ "./node_modules/stream-browserify" ]
,
"options":
"allowedCommonJsDependencies": [
"assign-deep",
"excel-builder-webpacker",
"stream"
],
使用Jest进行全面测试（单元测试）-Cypress（E2E测试）
Angular Slickgrid和SlickgridUniversal都有100%的单元测试覆盖率，我们谈论的是用Jest完全测试的+15000行代码（+3750个单元测试）。在UI方面，所有Angular Slickgrid示例都使用Cypress进行了测试，有超过500次Cypress E2E测试。
如何加载HttpClient的数据？
您可能会注意到，在每个示例中，所有的演示都是用模拟数据集编码的，这主要是为了演示的目的，b
但你可能想知道如何将其与HttpClient联系起来？容易的只需将分配给dataset属性的模拟数据替换为您的HttpClient调用即可。dataset的属性可以随时更改或刷新，这就是为什么您可以使用本地数据和/或将其连接到Promise或用HttpClient连接到Observable（内部它只是一个刷新网格的SETTER）。有关如何加载HttpClient的JSON文件的演示，请参见示例24。
Wiki/文档
Wiki是所有文档和说明的所在地，所以在打开任何问题之前，请参阅Angular Slickgrid-Wiki。Wiki-HOWTO是一个很好的起点。你也可以看看Demo页面，它包含了大多数功能的示例，而且它还在不断增长（所以你可能想在新版本发布时查阅它）。
主要功能
你可以看到下面的一些屏幕截图和下面的说明，如果这还不足以让你做出决定，请前往Wiki-主要功能。
缺少功能
如果Angular-Slickgrid与原始核心库6pac/SlickGrid相比缺少功能，该怎么办？
不用担心，您可以简单地引用SlickGrid和DataView对象，就像在核心库中一样（它们通过自定义事件公开）。欲了解更多信息，请继续阅读Wiki-SlickGrid&；DataView对象和Wiki-网格&；数据视图事件
屏幕截图
主题为Bootstrap的演示应用程序的屏幕截图。
请注意，样式发生了一些变化，最好是简单地转到Live Demo页面
带格式化程序的Slickgrid示例（显示的最后一列是自定义格式化程序）
您还可以看到网格菜单打开（也称为hambuger菜单）
过滤器和多列排序
内联编辑
固定（又称冻结）列/行
可拖动分组&；整合者
服务器端的Slickgrid示例（筛选/排序/分页）
附带OData&；GraphQL支持（您也可以实现自定义）
复合编辑器模式窗口