如何在 Angular 2+ 中使用 jqGrid? [英] How to utilize jqGrid in Angular 2+?

问题描述

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

In my current project we have been using jqGrid in almost every page. We use the grid's full rich featureset including complex grid inline row editing, with drop down, check box and other controls, sorting, column filtering and more.

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

Now we wish to convert our project into angular 2, but our main problem is replacing jqGrid's rich featureset. Before starting I need to do some POC if all the functionalities can be done in angular 2 based grid.

如何在 Angular 2+ 中使用 jqGrid?

How can jqGrid be used in Angular 2+?

推荐答案

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

You don't wrote which version of jqGrid you use and from which fork of jqGrid. The development is spitted after version 4.7. There are now two main forks: free jqGrid, which I develop, and commercial Guriddo jqGrid JS.

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

I find the wrong way to rewrite all existing components on changing of the JavaScript framework, which you use. Every framework modify finally the HTML page via DOM. Every modern JavaScript frameworks support of binding/mounting foreign component, which manipulate DOM internally. It's directive/directives in Angular 1/2, componentDidMount in React, mounted in vue.js and so on. As the result you get Angular 2 components, which have the required functionality. Following the way you can reduce the development time and to use the best components existing on the markt. The end user, which uses your web site will see no difference between native Angular components and the mount JavaScript components.

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

Another aspect of integration of components in Angular 2 is TypeScript. It's nice language, which provide much better control of datatypes and parameters as JavaScript can. The problem can be solved by providing *.d.ts files with type definitions for JavaScript components. Free jqGrid 4.14.0 includes free-jqgrid.d.ts, which describes all existing jqGrid options, callbacks and events. Using the corresponding text editor like Visual Studio Code you will get advantage of IntelliSense. As the result you'll improve productivity and quality of the code holding many parts of your existing code.

这篇关于如何在 Angular 2+ 中使用 jqGrid?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！