angular ts 表格_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); });

Loading...

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;

@Input() rows:Array;

@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:''

})

export class GridDemo {

people: Array;

columns: Array;

constructor() {

this.people = this.getPeople();

this.columns = this.getColumns();

}

getPeople(): Array {

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 {

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. 结果