如何使用angular2-data-table [英] How to use angular2-data-table

查看：21
本文介绍了如何使用angular2-data-table的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

找不到任何关于如何使用 angular2-data-table 库的教程在这里:https://github.com/swimlane/angular2-data-table

文档似乎缺少简单的示例.

谁能给我一个在angular2中使用数据表的简单例子

解决方案

出于这个原因，我不建议使用该库.我已经工作了几个星期，试图在一个项目中使用它，但由于缺乏文档，它几乎无法使用.

话虽如此，这里是一个相对简单的例子.这使用 Angular2 Quickstart 作为基础，我所做的只是添加 angular2-通过 npm 的数据表.您需要获取 company.json 来自 Github 并将其放在项目的根目录中.

package.json

<代码>{"name": "liw-reports","版本": "1.0.0",脚本":{"start": "tsc && 同时\"tsc -w\" \"lite-server\" ","lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w"},许可证":[{类型":麻省理工学院"}],依赖关系":{"@angular/common": "~2.1.2","@angular/compiler": "~2.1.2","@angular/core": "~2.1.2","@angular/forms": "~2.1.2","@angular/http": "~2.1.2","@angular/platform-b​​rowser": "~2.1.2","@angular/platform-b​​rowser-dynamic": "~2.1.2","@angular/router": "~3.1.2","@angular/upgrade": "~2.1.2","angular2-data-table": "^1.4.1","core-js": "^2.4.1",反射元数据":^0.1.8"，"rxjs": "5.0.0-beta.12","systemjs": "0.19.41",zone.js":^0.6.26"},开发依赖":{"@types/core-js": "^0.9.7","@types/node": "^6.0.46","同时": "^3.1.0","lite-server": "^2.2.2",打字稿":^2.0.9"}}

systemjs.config.js

/*** Angular 样本的系统配置* 根据您的应用需求进行必要的调整.*/(功能(全局){系统配置({路径:{//路径作为别名'npm:': 'node_modules/'},//map 告诉系统加载器去哪里找东西地图: {//我们的应用程序在 app 文件夹中应用程序:'应用程序'，//角度包'@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-b​​rowser': 'npm:@angular/platform-b​​rowser/bundles/platform-b​​rowser.umd.js','@angular/platform-b​​rowser-dynamic': 'npm:@angular/platform-b​​rowser-dynamic/bundles/platform-b​​rowser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js','@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js','angular2-data-table': 'npm:angular2-data-table/release/index.js',//其他库'rxjs': 'npm:rxjs',},//包告诉系统加载器在没有文件名和/或没有扩展名时如何加载包:{应用程序: {主要:'./main.js'，默认扩展:'js'},rxjs:{默认扩展:'js'}}});})(这个);

app.module.ts

import { NgModule } from '@angular/core';从'@angular/platform-b​​rowser' 导入 { BrowserModule };从 'angular2-data-table' 导入 { Angular2DataTableModule };从 './app.component' 导入 { AppComponent };@NgModule({声明:[AppComponent]，进口:[BrowserModule，Angular2DataTableModule]，引导程序:[AppComponent]})导出类 AppModule {}

app.component.ts

import {成分来自'@angular/core';@成分({模块 ID:module.id，选择器:'我的应用'，模板:`<div><h3>流体行高度</h3><数据表类=材料"[行]="行"[列]="列"[columnMode]="'强制'"[headerHeight]="50"[页脚高度]="50"[rowHeight]="'自动'"></数据表>

`})导出类 AppComponent {行 = [];列 = [{道具:'名字'}, {名称:'性别'}, {名称:'公司'}];构造函数(){this.fetch((数据) => {this.rows = 数据；});}获取(CB){const req = new XMLHttpRequest();req.open('GET', `./company.json`);req.onload = () =>{cb(JSON.parse(req.response));};请求.发送()；}}

index.html

<头><title>Angular QuickStart</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/datatable.css"/><link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/material.css"/><link rel="stylesheet" href="styles.css"><!-- 1. 加载库--><!-- 旧浏览器的 Polyfill --><script src="node_modules/core-js/client/shim.min.js"></script><script src="node_modules/zone.js/dist/zone.js"></script><script src="node_modules/reflect-metadata/Reflect.js"></script><script src="node_modules/systemjs/dist/system.src.js"></script><!-- 2.配置SystemJS--><script src="systemjs.config.js"></script><脚本>System.import('app').catch(function(err) {控制台错误(错误)；});<!-- 3. 显示应用程序--><身体><my-app>正在加载...</my-app></html>

Can't find any tutorial of how to use angular2-data-table library is here: https://github.com/swimlane/angular2-data-table

The documentation seems to be lacking simple examples.

Can any one give me a simple example of using datatable in angular2

解决方案

I don't recomend using that library for that exact reason. I've been working for a couple of weeks trying to use it in a project and the lack of documentation has made it almost impossible to use.

With that being said here is a relativly simple example. This uses the Angular2 Quickstart as a base and all I did was add angular2-data-table via npm. You'll need to grab the company.json from Github and place it in the root of your project.

package.json

{
  "name": "liw-reports",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.2",
    "@angular/compiler": "~2.1.2",
    "@angular/core": "~2.1.2",
    "@angular/forms": "~2.1.2",
    "@angular/http": "~2.1.2",
    "@angular/platform-browser": "~2.1.2",
    "@angular/platform-browser-dynamic": "~2.1.2",
    "@angular/router": "~3.1.2",
    "@angular/upgrade": "~2.1.2",
    "angular2-data-table": "^1.4.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.41",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.7",
    "@types/node": "^6.0.46",
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.9"
  }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            'angular2-data-table': 'npm:angular2-data-table/release/index.js',
            // other libraries
            'rxjs': 'npm:rxjs',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Angular2DataTableModule } from 'angular2-data-table';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, Angular2DataTableModule],
    bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import {
    Component
} from '@angular/core';


@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `
    <div>
      <h3>Fluid Row Heights</h3>
      <datatable
        class="material"
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'">
      </datatable>
    </div>
  `
})
export class AppComponent {

    rows = [];

    columns = [{
        prop: 'name'
    }, {
        name: 'Gender'
    }, {
        name: 'Company'
    }];

    constructor() {
        this.fetch((data) => {
            this.rows = data;
        });
    }

    fetch(cb) {
        const req = new XMLHttpRequest();
        req.open('GET', `./company.json`);
        req.onload = () => {
            cb(JSON.parse(req.response));
        };
        req.send();
    }

}

index.html

<html>

<head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/datatable.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/material.css" />
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });
    </script>
</head>
<!-- 3. Display the application -->

<body>
    <my-app>Loading...</my-app>
</body>

</html>

这篇关于如何使用angular2-data-table的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆