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

Angular2表格/可排序/table的更多相关文章

  1. JS学习之表格的排序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

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

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

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

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

  5. HTML table表格转换为Markdown table表格[转]

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

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

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

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

    表格标签 一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分 ...

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

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

  9. 最好的Angular2表格控件

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

随机推荐

  1. Python * 和 ** 参数问题

    Problem def calcuate(*keys) def calcluate(**keys) Slove *: 用来传递人一个无名字的参数,这些参数会以一个Tuple的形式来访问. **: 用来 ...

  2. 第四章 电商云化,4.2 集团AliDocker化双11总结(作者: 林轩、白慕、潇谦)

    4.2 集团AliDocker化双11总结 前言 在基础设施方面,今年双11最大的变化是支撑双11的所有交易核心应用都跑在了Docker容器中.几十万Docker容器撑起了双11交易17.5万笔每秒的 ...

  3. webpackJsonp is not defined?

    用了CommonsChunkPlugin生成了公共文件,但是页面还没有引用这个公共文件 比如下面这个配置 var webpack = require('webpack'); var path = re ...

  4. 问题解决:psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

    错误提示: psql: could not connect to server: No such file or directory Is the server running locally and ...

  5. solr suggest智能提示配置

    目录 配置文件 Java代码 遇到的问题 回到顶部 配置文件 solrconfig.xml <searchComponent name="suggest" class=&qu ...

  6. 解决在ScrollView中套用ListView显示不正常

    最近在设计Android程序时,因为需要在ScrollView中添加一个ListView列表来显示一些信息.刚开始并没有想太多,但添加进去后才发现ListView不论怎样定义都只能显示一行,显示效果很 ...

  7. PAT MOOC dataStructure 4-1

    数据结构练习 4-1 AVL 树 1. 题目: Input Specification: Each input file contains one test case. For each case, ...

  8. c# 通过反射调用类的构造函数

    var constructors=typeof(Demo).GetConstructors(); var paramsInfos=constructors[i].GetParameters();//I ...

  9. r-cnn学习(四):train_faster_rcnn_alt_opt.py源码学习

    论文看的云里雾里,希望通过阅读其代码来进一步了解. 参考:http://blog.csdn.net/sloanqin/article/details/51525692 首先是./tools/train ...

  10. POJ推荐50题

    此文来自北京邮电大学ACM-ICPC集训队 此50题在本博客均有代码,可以在左侧的搜索框中搜索题号查看代码. 以下是原文: POJ推荐50题1.标记“难”和“稍难”的题目可以看看,思考一下,不做要求, ...