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