如何在 Angular 2+ 中使用 jqGrid？

Question

在我当前的项目中，我们几乎在每个页面中都使用了 jqGrid。我们使用网格的完整丰富的功能集，包括复杂的网格内联行编辑、下拉、复选框和其他控件、排序、列过滤等。

现在我们希望将我们的项目转换为 angular 2，但我们的主要问题是替换 jqGrid 的丰富功能集。如果所有功能都可以在基于 angular 2 的网格中完成，那么在开始之前我需要做一些 POC。

如何在 Angular 2+ 中使用 jqGrid？

Answer 1

您没有编写您使用的 jqGrid 的哪个版本以及 jqGrid 的哪个分支。4.7 版本之后的开发就吐槽了。现在有两个主要分支：我开发的免费 jqGrid和商业Guriddo jqGrid JS。

我发现在更改您使用的 JavaScript 框架时重写所有现有组件的错误方法。每个框架最终都通过 DOM 修改 HTML 页面。每个现代 JavaScript 框架都支持绑定/挂载外部组件，这些组件在内部操作 DOM。它是directive/directives在 Angular 1/2 中，componentDidMount在React 中，在vue.js 中安装等等。因此，您将获得具有所需功能的 Angular 2 组件。按照这种方式，您可以减少开发时间并使用市场上现有的最佳组件。使用您网站的最终用户将看不到原生 Angular 组件和挂载 JavaScript 组件之间的区别。

Angular 2 中组件集成的另一个方面是 TypeScript。这是一种很好的语言，它提供了像 JavaScript 一样更好的数据类型和参数控制。这个问题可以通过为 JavaScript 组件提供类型定义的*.d.ts文件来解决。免费 jqGrid 4.14.0 包括free-jqgrid.d.ts，它描述了所有现有的 jqGrid 选项、回调和事件。使用相应的文本编辑器（如Visual Studio Code），您将获得 IntelliSense 的优势。因此，您将提高包含现有代码许多部分的代码的生产力和质量。