Angular2表格/可排序/table

Angular2表格

1. 官網下載Angular2開發環境，以及給出的quickstart代碼示例demo（地址如下），具體步驟不在詳述。

https://github.com/angular/quickstart

2. 更改demo中，index.html，導入的文件，以及組件的位置

      System.import('app').catch(function(err){ console.error(err); });
      
      <app>Loading...</app>

3. demo中將app文件夾中文件全部刪除

4. app文件夾下，新建main.ts文件

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

5. app文件夾下，新建app.module.ts文件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './grid';

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

6. app文件夾下，新建grid.ts文件

import {Component, Input, OnInit} from '@angular/core';
import {Column} from './column';
import {Sorter} from './sorter';
import {GridDemo} from './grid-demo';

@Component({
    selector: 'app',
    templateUrl: 'app/grid.html'
})

export class AppComponent implements OnInit{

    @Input() columns:Array<Column>;
    @Input() rows:Array<any>;
    @Input() name:string;

    sorter = new Sorter();
    gridDemo = new GridDemo();
    sort(key){
        this.sorter.sort(key, this.rows);
    }

    ngOnInit(){
        this.columns= this.gridDemo.getColumns();
        this.rows=this.gridDemo.getPeople();
        console.log(this.name);
    }
}

7. app文件夾下，新建column.ts, sorter.ts, grid-demo.ts文件,分別為：

export class Column{

    constructor(public name: string, public descr: string){
        
    }
}

export class Sorter{

    direction:number;
    key:string;

    constructor(){
        this.direction = 1;
    }

    sort(key:string,data:any[]){

        if(this.key === key){
            this.direction = -this.direction;
        }
        else{
            this.direction = 1;
        }

        this.key = key;

        data.sort((a,b) => {
            if(a[key] === b[key]){
                return 0;
            }
            else if(a[key] > b[key]){
                return this.direction;
            }
            else{
                return -this.direction;
            }
        });
    }

}

import {Component} from '@angular/core';
import {Column} from './column';

@Component({
    template:'<grid name="person grid" [rows]="people" [columns]="columns"></grid>'
})

export class GridDemo {

    people: Array<Person>;
    columns: Array<Column>;

    constructor() {

        this.people = this.getPeople();
        this.columns = this.getColumns();
    }

    getPeople(): Array<Person> {
        return [
            {firstName:'Joe',lastName:'Jackson',age:20},
            {firstName:'Peter',lastName:'Smith',age:30},
            {firstName:'Jane',lastName:'Doe',age:50},
            {firstName:'Tim',lastName:'Smith',age:80}
        ];
    }

    getColumns(): Array<Column> {
        return [
            new Column('firstName','First Name'),
            new Column('lastName','Last Name'),
            new Column('age','Age')
        ];
    }
}

interface Person {
    firstName:string;
    lastName:string;
    age:number;
}

7. 運行

npm start

8. 結果