jqgrid в angular2 с использованием free-jqgrid.d.ts

Question

Я имею в виду этот вопрос по stackoverflow, где приведен пример построения jqgrid с использованием угловой версии 1.x здесь .

В этом ответе я также мог видеть, что free-jqgrid.d.ts предоставляется, чтобы построить со всеми существующими jqGrid опциями, обратными вызовами и событиями в угловых 2.

Есть ли какие-нибудь примеры / шаги / руководства, доступные для использования free-jqgrid.d.ts и построения jqgrid?

Answer 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>