时间戳

首页 > 解决方案 > angular2 中的 jqgrid 使用 free-jqgrid.d.ts

angular - angular2 中的 jqgrid 使用 free-jqgrid.d.ts

问题描述

我在 stackoverflow 上参考了这个问题，这里给出了构建jqgrid使用 angular 1.x 版本的示例。

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

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

标签： angularjqgrid

解决方案

以下对我有用。

角.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>

推荐阅读