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

JS学习之表格的排序

...

JS实现点击表头表格自动排序(含数字、字符串、日期)

这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

9月6日表格标签(table、行、列、表头)(补)

一.

1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

FineUI第十六天---表格的排序和分页

表格的排序和分页 1.表格的排序需要: AllowSorting:是否允许排序. SortColumn:当前排序的列ID,当然也可以不设置此属性,而是在后台初始化代码中直接指定默认排序字段. Sort ...

HTML table表格转换为Markdown table表格&lbrack;转&rsqb;

举个栗子,当我想要把这个页面的第一个表格转换成Markdown Table时,怎么做更快,效率更高? 只需简单三步,请看示例: 第一步:复制包含HTML table标签的代码 复制table代码(HT ...

用python解析word文件(段落篇(paragraph) 表格篇(table) 样式篇(style))

首先需要安装相应的支持库: 直接在命令行执行pip install python-docx 示例代码如下: import docxfrom docx import Document #导入库 path ...

表格标签(table、行、列、表头)

表格标签 一.

1.width  表示表格宽度,宽度表达方式有像素和百分 ...

轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单&sol;复选、排序、分页、搜索及自定义表头等功能。

Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

最好的Angular2表格控件

现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求 ...

随机推荐

less2

less2 @base-color: #000; @fore-color: darken(@base-color, 50%); @back-color: lighten(@base-color, 50 ...

Number类型方法

//1.toString();  转换成字符串 var s=123; console.log(typeof s.toString()); //string //2.toLocaleString()   ...

LeetCode - 42&period; Trapping Rain Water

42. Trapping Rain Water Problem's Link ------------------------------------------------------------- ...

Gvim 在进行文件对比时报cannot read or write temp files

本机环境为win7 64位旗舰版,gvim安装的是GVim7.4.解决办法如下: 在安装目录下有个"_vimrc"文件.修改19行.将 if &sh =~ '\

Mycat 分片规则详解--日期范围 hash 分片

实现方式:其思想和范围取模分片一样,由于日期取模会出现数据热点问题,所以先根据日期分组,再根据时间 hash 使得短期数据分布跟均匀. 优点:避免扩容时的数据迁移,可以在一定程度上避免范围分片的热点问 ...

18&period;翻译系列：EF 6 Code-First 中的Seed Data(种子数据或原始测试数据)【EF 6 Code-First系列】

原文链接:https://www.entityframeworktutorial.net/code-first/seed-database-in-code-first.aspx EF 6 Code-F ...

jdbc数据访问技术

jdbc数据访问技术 1.JDBC如何做事务处理? Con.setAutoCommit(false) Con.commit(); Con.rollback(); 2.写出几个在Jdbc中常用的接口 p ...

获取当前进程目录 GetCurrentDirectory&lpar;&rpar; 及 获取当前运行模块路径名GetModuleFileName&lpar;&rpar;

GetCurrentDirectory 获得的是当前进程的活动目录(资源管理器决定的),可以用SetCurrentDirectory 修改的. 转自 http://m.blog.csdn.net/bl ...

Android Studio添加文件注释头模板？

Self Settings: as中class文件头注释: File -> Settings -> Editor -> File and Code Templates -> 右 ...

Oracle下回滚rollback的使用

oracle中可以设置一个回滚点进行回滚 设置回滚名称 savepoint pointa ; 进行回滚 rollback to pointa; 如果期间有删除的数据就回来了