angular2 中的 jqgrid 使用 free-jqgrid.d.ts答案

【问题标题】：jqgrid in angular2 using free-jqgrid.d.tsangular2 中的 jqgrid 使用 free-jqgrid.d.ts
【发布时间】：2018-06-25 09:06:27
【问题描述】：

我参考了stackoverflow上的this问题，其中给出了使用angular 1.x版本here构建jqgrid的示例。

在这个答案中，我还可以看到提供了 free-jqgrid.d.ts 来构建包含所有现有的jqGrid 选项、回调和 Angular 2 中的事件。

是否有任何示例/步骤/指南可用于使用 free-jqgrid.d.ts 并构建 jqgrid？

【问题讨论】：

对不起，我现在很忙，无法为您创建 Angular2 演示。一般来说，只需将 AngularJS 指令转换为 Angular2 指令。而已。见here。在another answer 中，您可以找到一个使用免费 jqGrid 指令的示例。 Another demo 显示了在 Bootstrap 中使用免费 jqGrid 指令。它还演示了colModel 中的generateDatalist: true 和generateValue: true。
谢谢奥列格！我会试试的。。

标签： angular jqgrid

【解决方案1】：

以下内容对我有用。

angular.json:

...     
"styles": [
                  "src/styles.css",
                  "./node_modules/jquery-ui/themes/base/all.css",
                  "./node_modules/free-jqgrid/css/ui.jqgrid.min.css"
                ],
                "scripts": [
                  "./node_modules/jquery/dist/jquery.min.js",
                  "./node_modules/free-jqgrid/js/jquery.jqgrid.min.js"
                ]
...

组件：

import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
@Component({
...
})
export class MyComponent implements OnInit {
...
ngAfterViewInit() {
        (<any>jQuery("#grid")).jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { id: 10, firstName: "Angela", lastName: "Merkel" },
                { id: 20, firstName: "Vladimir", lastName: "Putin" },
                { id: 30, firstName: "David", lastName: "Cameron" },
                { id: 40, firstName: "Barack", lastName: "Obama" },
                { id: 50, firstName: "François", lastName: "Hollande" }
            ]
        });
    }
}

html:

<table id="grid"></table>

【讨论】：