如何在 Angular 2+ 中使用 jqGrid？答案

【问题标题】：How to utilize jqGrid in Angular 2+?如何在 Angular 2+ 中使用 jqGrid？
【发布时间】：2017-09-13 22:11:47
【问题描述】：

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

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

如何在 Angular 2+ 中使用 jqGrid？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

嗨奥列格，非常感谢您的解释和建议。我们仍在探索以找到使我们的应用程序响应并适应最新的 java 脚本框架的最佳方法，例如键入脚本，Angular 2。我们使用免费的 jgGrid 版本。很高兴了解 free-jqgrid.d.ts。
@UtpalKumarDas：您使用哪个版本的免费 jqGrid？您使用哪个 CSS 框架（jQuery UI、Bootstrap 或两者兼有）？通过在内部添加调用setGridWidth 的$(window).resize 处理程序，可以轻松地使jqGrid 响应。可以将该功能与根据列的内容自动调整列宽大小、autoresizeOnLoad: true 和autoResizing: { compact: true, resetWidthOrg: true } 选项autowidth: true 的使用等相结合。可以将labelClasses 与hidden-xs 之类的引导类一起使用来隐藏低分辨率的列：jsfiddle.net/OlegKi/andm1299/26
@UtpalKumarDas：“Free jqGrid”、“Guriddo jqGrid JS”是产品的名称。您使用的是非常旧的 jqGrid 4.6 版本，现在已经死了。我在the changes 之后于 2014 年底开始开发免费的 jqGrid。您可以升级到免费的 jqGrid 4.14.0 并免费使用它。它兼容到 jqGrid 4.6。性能应该额外提高，您可以使用here、the wiki 和所有已发布版本的自述文件中描述的许多新功能
@UtpalKumarDas：要测试免费的 jqGrid，您只需更改（临时）3 行 HTML 代码即可从 CDN 加载所有 jqGrid 文件（请参阅 the wiki article）。

【解决方案2】：

我认为 ag-grid 将是 Angular2 和 React js 类型的应用程序的正确选择，因为它们具有上述所有功能以及一些令人兴奋的新功能，如浮动列、分组列、旋转 ..bla bla 等。

【讨论】：

Ag-grid 没有内置的字符串编辑器、表单编辑器、验证器等等。免费版的 ag-grid 有更大的限制。例如，就在服务器端处理数据而言，一切都非常糟糕。