如何在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 中为componentDidMount在 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一样更好地控制数据类型和参数.可以通过为 *.d.ts文件提供JavaScript组件的类型定义来解决该问题.免费的jqGrid 4.14.0包括 免费-jqgrid.d.ts ，它描述了所有现有的jqGrid选项，回调和事件.使用相应的文本编辑器，例如 Visual Studio代码，您将获得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屋！