DataTable（数据表格）

通过表格显示数据

使用说明

1.Import

import {DataTable} from 'primeng/primeng'; 
import {Column} from 'primeng/primeng';

2.Getting Started

使用DataTable，先定义个对象，该对象为表格对应的行。下面例子，定义一个car接口，通过CarService从服务端获取数据。

export interface Car { 
    vin; 
    year; 
    brand; 
    color; 
}

import {Injectable} from 'angular2/core'; 
import {Http, Response} from 'angular2/http'; 
import {Car} from '../domain/car'; 
@Injectable() 
export class CarService { 
    constructor(private http: Http) {} 
    getCarsSmall() { 
        return this.http.get('/showcase/resources/data/cars-small.json') 
        .toPromise() 
        .then(res => <Car[]> res.json().data)   
        .then(data => { return data; }); 
    } 
}

export class DataTableDemo implements OnInit { 
    cars: Car[]; 
    constructor(private carService: CarService) { }
    ngOnInit() { 
        this.carService.getCarsSmall().then(cars => this.cars = cars); 
    } 
}

使用[value]定义数据，<p-column>定义列

<p-dataTable [value]="cars"> 
    <p-column field="vin" header="Vin"></p-column> 
    <p-column field="year" header="Year"></p-column> 
    <p-column field="brand" header="Brand"></p-column> 
    <p-column field="color" header="Color"></p-column> </p-dataTable>

3.column组件

<p-column> 定义各种选项来指定相应的功能

3.1 属性

属性名 属性值类型 默认值 描述
field string null 行数据属性
header string null 列头文本
footer string null 列尾文本
sortable any false 是否可以排序
sortFunction function null 自定义排序方法
editable boolean false 列是否可编辑
filter boolean false 列是否可以过滤
filterMatchMode string null 定义过滤风格(filterMatchMode):'startsWith', 'contains' or 'endsWidth'.
rowspan string null 分组的行数跨度
colspan string null 分组的列数跨度
style string null column的行内样式
styleClass string null column的样式类
hidden boolean false 控制是否可见
expander boolean false 出现一个图标，可以展开行
selectionMode string null 定义基于列的选择模式，'single'或者'checkbox' 
<p-column field="vin" header="Vin" [sortable]="true"></p-column>

3.2 Dynamic Colums(动态columns)

export class DataTableDemo implements OnInit { 
    cars: Car[]; 
    cols: any[]; 
    constructor(private carService: CarService) { }  
    ngOnInit() { 
        this.carService.getCarsSmall().then(cars => this.cars = cars); 
    this.cols = [ 
        {field: 'vin', header: 'Vin'}, 
        {field: 'year', header: 'Year'}, 
        {field: 'brand', header: 'Brand'}, 
        {field: 'color', header: 'Color'} ]; 
    } 
}

3.3 Templates

Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating. The implicit variable is the column definition and data of current row can be accessed using rowData property. In addition index of the current can be access using the optional rowIndex variable.

<p-column field="color" header="Color"> 
    <template let-col #car="rowData" #ri="rowIndex">
        <span">{{car[col.field]}}</span> 
    </template> 
</p-column> 
<p-column> 
    <template let-car="rowData"> 
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
     </template> 
</p-column>

详情见在线实例

4. Facets(特点)

页眉和页脚是两个部分能够显示自定义的内容。

import {Header} from 'primeng/primeng'; 
import {Footer} from 'primeng/primeng';

<p-dataTable [value]="cars"> 
    <header>List of Cars</header> 
    <footer>Choose from the list.</footer> 
    <p-column field="vin" header="Vin"></p-column> 
    <p-column field="year" header="Year"></p-column> 
    <p-column field="brand" header="Brand"></p-column> 
    <p-column field="color" header="Color"></p-column> 
</p-dataTable>

详情见在线实例

5.Grouping

[headerRows] [footerRows] 实现分组

<p-dataTable [value]="cars" [headerRows]="headerRows"> 
    <p-column field="vin" header="Vin"></p-column> 
    <p-column field="year" header="Year"></p-column> 
    <p-column field="brand" header="Brand"></p-column> 
    <p-column field="color" header="Color"></p-column> 
</p-dataTable>

this.headerRows = [ 
    { 
        columns: [ 
            {headerText: 'Brand', rowspan: 3}, 
            {headerText: 'Sale Rate', colspan: 4} ] 
        }, 
    { 
        columns: [ 
            {headerText: 'Brand', colspan: 2}, 
            {headerText: 'Sale Rate', colspan: 2} ] }, 
            { columns: [ {headerText: 'Last Year'}, 
            {headerText: 'This Year'}, 
            {headerText: 'Last Year'}, 
            {headerText: 'This Year'} ] 
    }
];

详情见在线实例

6.Paginator

<p-dataTable [value]="cars" [rows]="10" [paginator]="true"> 
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

详情见在线实例

results matching ""

    No results matching ""