--数据表显示在表格格式数据。

Basic

Import

import {DataTableModule,SharedModule} from 'primeng/primeng';

source

<h3 class="first">Basic</h3>
<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> <h3>Dynamic Columns</h3>
<p-dataTable [value]="cars">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
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'}
];
}
}

Getting Started(入门)

数据表需要一个数组作为值对象和列p-column组件定义。在整个样本,汽车接口具有VIN,品牌,年份和颜色属性是用来定义一个对象是由数据表中显示。汽车是由一个carservice连接到服务器去取车的Promise.

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; });
}
}

下面的示例数据表有4列,从服务检索数据的初始化。

export class DataTableDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
}

汽车列表绑定到值的属性和列使用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>

Column Component

列组件定义了各种选项以指定相应的功能。

Attributes

Name

  Type Default Description
field string null Property of a row data.
sortField string null Property of a row data used for sorting, defaults to field.
header string null Header text of a column.
footer string null Footer text of a column.
sortable any false Defines if a column is sortable.
sortFunction function null Sort function for custom sorting.
editable boolean false Defines if a column is editable.
filter boolean false Defines if a column can be filtered.
filterMatchMode string null Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals" and "in".
filterPlaceholder string null Defines placeholder of the input fields.
rowspan string null Number of rows to span for grouping.
colspan string null Number of columns to span for grouping.
style string null Inline style of the column.
styleClass string null Style class of the column.
tableStyle string null Inline style of the table element.
tableStyleClass string null Style class of the table element.
hidden boolean false Controls visiblity of the column.
expander boolean false Displays an icon to toggle row expansion.
selectionMode string null Defines column based selection mode, options are "single" and "multiple".
frozen boolean false Whether the column is fixed in horizontal scrolling or not.
<p-column field="vin" header="Vin" [sortable]="true"></p-column>

Dynamic Colums

列可以被实例化使用数组以及ngfor迭代。

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'}
];
}
}
<p-dataTable [value]="cars">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

Templates

一个相应的行字段的数据显示为默认的单元格的内容,可以自定义模板,使用隐式变量传递到ng模板列定义和当前行数据rowData财产。在目前除了指数可以使用可选的rowIndex变量访问。类似地,自定义内容可以放在列的页眉和页脚上,模板。

ng-template内的列必须用ptemplate指令来表明ng-template属于的类型。可能的值是“头”、“体”和“页脚”。

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

行的索引在ng-template可用。

 <p-column>
<ng-template let-car="rowData" let-i="rowIndex" pTemplate="body">
<button type="button" pButton (click)="selectCar(i)" icon="fa-search"></button>
</ng-template>
</p-column>

example

Facets

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

import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';
<p-dataTable [value]="cars">
<p-header>List of Cars</p-header>
<p-footer>Choose from the list.</p-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>

Column Grouping

列可以被分组在页眉和页脚使用headercolumngroup和footercolumngroup组件包含行与列。模板也支持内分组列。

<p-dataTable [value]="sales">
<p-headerColumnGroup>
<p-row>
<p-column header="Brand" rowspan="3"></p-column>
<p-column header="Sale Rate" colspan="4"></p-column>
</p-row>
<p-row>
<p-column header="Sales" colspan="2"></p-column>
<p-column header="Profits" colspan="2"></p-column>
</p-row>
<p-row>
<p-column header="Last Year"></p-column>
<p-column header="This Year"></p-column>
<p-column header="Last Year"></p-column>
<p-column header="This Year"></p-column>
</p-row>
</p-headerColumnGroup> <p-column field="brand"></p-column>
<p-column field="lastYearSale"></p-column>
<p-column field="thisYearSale"></p-column>
<p-column field="lastYearProfit"></p-column>
<p-column field="thisYearProfit"></p-column> <p-footerColumnGroup>
<p-row>
<p-column footer="Totals:" colspan="3"></p-column>
<p-column footer="$506,202"></p-column>
<p-column footer="$531,020"></p-column>
</p-row>
</p-footerColumnGroup>
</p-dataTable>

Row Grouping

行可以按一个单独的分组的行或使用的行。在这两种情况下,数据必须由分组字段首先进行排序。

<p-dataTable [value]="cars1" sortField="brand" rowGroupMode="subheader" groupField="brand">
<p-header>Subheader</p-header>
<ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
<p-column field="color" header="Color"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="vin" header="Vin"></p-column>
</p-dataTable> <p-dataTable [value]="cars2" sortField="brand" rowGroupMode="rowspan">
<p-header>RowSpan</p-header>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="vin" header="Vin"></p-column>
</p-dataTable>

一组知名度可切换使用的图标放在旁边,用expandablerowgroups属性组的名称。默认情况下,所有的组都崩溃了,expandadrowgroups财产需要填充组字段值显示特定群体扩展默认。

<p-dataTable [value]="cars" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true">
<p-header>Subheader</p-header>
<ng-template pTemplate="rowgroup" let-rowData>{{rowData['brand']}}</ng-template>
<p-column field="color" header="Color"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="vin" header="Vin"></p-column>
</p-dataTable>

一个排的页脚可以使用rowgroupfooter ng模板定义。

 <p-dataTable [value]="cars" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true"
[sortableRowGroup]="false">
<p-header>Toggleable Row Groups with Footers</p-header>
<ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
<p-column field="color" header="Color"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="vin" header="Vin"></p-column>
<p-column field="price" header="Price">
<ng-template let-col let-car="rowData" pTemplate="body">
<span>{{car[col.field] | currency:'USD':true:'.0-0'}}</span>
</ng-template>
</p-column>
<ng-template pTemplate="rowgroupfooter" let-car>
<td colspan="3" style="text-align:right">Total Price</td>
<td>{{calculateGroupTotal(car['brand']) | currency:'USD':true:'.0-0' }}</td>
</ng-template>
</p-dataTable>

单击行组分类根据组字段的数据,你可以使用sortablerowgroup财产这一行为控制

demo code

export class DataTableRowGroupDemo implements OnInit {

    cars1: Car[];

    cars2: Car[];

    cars3: Car[];

    constructor(private carService: CarService) {}

    ngOnInit() {
this.carService.getCarsMedium().then(cars => this.cars1 = cars);
this.carService.getCarsMedium().then(cars => this.cars2 = cars);
this.carService.getCarsMedium().then(cars => this.cars3 = cars);
} calculateGroupTotal(brand: string) {
let total = 0; if(this.cars1) {
for(let car of this.cars1) {
if(car.brand === brand) {
total += car.price;
}
}
} return total;
}
}

DataTableRowGroupDemo.ts

<p-dataTable [value]="cars1" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true"
[sortableRowGroup]="false">
<p-header>Toggleable Row Groups with Footers</p-header>
<ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
<p-column field="color" header="Color"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="vin" header="Vin"></p-column>
<p-column field="price" header="Price">
<ng-template let-col let-car="rowData" pTemplate="body">
<span>{{car[col.field] | currency:'USD':true:'.0-0'}}</span>
</ng-template>
</p-column>
<ng-template pTemplate="rowgroupfooter" let-car>
<td colspan="3" style="text-align:right">Total Price</td>
<td>{{calculateGroupTotal(car['brand']) | currency:'USD':true:'.0-0' }}</td>
</ng-template>
</p-dataTable> <p-dataTable [value]="cars2" sortField="brand" rowGroupMode="subheader" groupField="brand" [style]="{'margin-top':'50px'}">
<p-header>Subheader</p-header>
<ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
<p-column field="color" header="Color" sortable="true"></p-column>
<p-column field="year" header="Year" sortable="true"></p-column>
<p-column field="vin" header="Vin" sortable="true"></p-column>
</p-dataTable> <p-dataTable [value]="cars3" sortField="brand" rowGroupMode="rowspan" [style]="{'margin-top':'50px'}">
<p-header>RowSpan</p-header>
<p-column field="brand" header="Brand" sortable="true"></p-column>
<p-column field="color" header="Color" sortable="true"></p-column>
<p-column field="year" header="Year" sortable="true"></p-column>
<p-column field="vin" header="Vin" sortable="true"></p-column>
</p-dataTable>

DataTableRowGroupDemo.html

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>

demo code

export class DataTablePaginatorDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
this.carService.getCarsMedium().then(cars => this.cars = cars);
}
}

DataTablePaginatorDemo.ts

<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
<p-header>List of Cars</p-header>
<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>

DataTablePaginatorDemo.html

Sorting

简单使列对象排序的性能足以让一列排序。属性时要使用的默认排序字段,可以使用sortfield定制。

<p-column field="vin" header="Vin" sortable="true"></p-column>

默认情况下,在单击列执行排序。做的多字段分类,设置“多”SortMode属性和使用元键点击另一列。

<p-dataTable [value]="cars" [sortMode]="multiple">

如果你想显示表按默认最初的负载,使用单一模式的sortfield SortOrder属性。

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

在multiple mode,使用multisortmeta属性和约束sortmeta对象数组。在多个模式,使用multisortmeta属性和约束sortmeta对象数组。

<p-dataTable [value]="cars" [multiSortMeta]="multiSortMeta">
<p-column field="vin" header="Vin" sortable="true"></p-column>
<p-column field="year" header="Year" sortable="true"></p-column>
<p-column field="brand" header="Brand" sortable="true"></p-column>
<p-column field="color" header="Color" sortable="true"></p-column>
</p-dataTable>
this.multiSortMeta = [];
this.multiSortMeta.push({field: 'year', order: 1});
this.multiSortMeta.push({field: 'brand', order: -1});

自定义排序,将排序选项,自定义,定义一个sortfunction分类列表。

<p-dataTable [value]="cars" [multiSortMeta]="multiSortMeta">
<p-column field="vin" header="Vin" sortable="true"></p-column>
<p-column field="year" header="Year" sortable="custom" (sortFunction)="mysort($event)"></p-column>
<p-column field="brand" header="Brand" sortable="true"></p-column>
<p-column field="color" header="Color" sortable="true"></p-column>
</p-dataTable>
mysort(event) {
//event.field = Field to sort
//event.order = Sort order
}

demo code

export class DataTableSortDemo implements OnInit {

    cars1: Car[];

    cars2: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars1 = cars);
this.carService.getCarsSmall().then(cars => this.cars2 = cars);
}
}

DataTableSortDemo.ts

<h3 class="first">Single Column</h3>
<p-dataTable [value]="cars1">
<p-column field="vin" header="Vin" [sortable]="true"></p-column>
<p-column field="year" header="Year" [sortable]="true"></p-column>
<p-column field="brand" header="Brand" [sortable]="true"></p-column>
<p-column field="color" header="Color" [sortable]="true"></p-column>
</p-dataTable> <h3>Multiple Columns</h3>
<p-dataTable [value]="cars2" sortMode="multiple">
<p-column field="vin" header="Vin" [sortable]="true"></p-column>
<p-column field="year" header="Year" [sortable]="true"></p-column>
<p-column field="brand" header="Brand" [sortable]="true"></p-column>
<p-column field="color" header="Color" [sortable]="true"></p-column>
</p-dataTable>

DataTableSortDemo.html

Filtering

通过在列上设置筛选器属性为True,启用了筛选。默认的匹配模式是“startsWith”,这可以被配置为使用filtermatchmode属性,也接受"contains", "endsWith", "equals" and "in"。

<p-column field="vin" header="Vin (startsWith)" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="year" header="Year (contains)" [filter]="true" filterMatchMode="contains"></p-column>
<p-column field="brand" header="Brand (startsWith)" [filter]="true"></p-column>
<p-column field="color" header="Color (endsWith)" [filter]="true" filterMatchMode="endsWith"></p-column>

一个可选的全球过滤功能可与相同的关键字搜索的所有领域,使这个地方输入组件的KeyUp事件会听了过滤和绑定的局部ng模板变量名为全球的滤波特性。

<input #gb type="text" placeholder="Global search">
<p-dataTable [value]="cars" [rows]="10" [globalFilter]="gb">

默认情况下,输入字段用作过滤器元素,并且可以使用模板进行自定义。它是用在过滤元件改变回调通过值调用DataTable的过滤方法重要,场和matchmode性质。

<p-column field="brand" header="Brand (Custom)" [filter]="true" [style]="{'overflow':'visible'}" filterMatchMode="equals">
<ng-template pTemplate="filter" let-col>
<p-dropdown [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>

demo code

export class DataTableFilterDemo implements OnInit {

    cars: Car[];

    brands: SelectItem[];

    colors: SelectItem[];

    constructor(private carService: CarService) {}

    ngOnInit() {
this.carService.getCarsMedium().then(cars => this.cars = cars); this.brands = [];
this.brands.push({label: 'All Brands', value: null});
this.brands.push({label: 'Audi', value: 'Audi'});
this.brands.push({label: 'BMW', value: 'BMW'});
this.brands.push({label: 'Fiat', value: 'Fiat'});
this.brands.push({label: 'Honda', value: 'Honda'});
this.brands.push({label: 'Jaguar', value: 'Jaguar'});
this.brands.push({label: 'Mercedes', value: 'Mercedes'});
this.brands.push({label: 'Renault', value: 'Renault'});
this.brands.push({label: 'VW', value: 'VW'});
this.brands.push({label: 'Volvo', value: 'Volvo'}); this.colors = [];
this.colors.push({label: 'White', value: 'White'});
this.colors.push({label: 'Green', value: 'Green'});
this.colors.push({label: 'Silver', value: 'Silver'});
this.colors.push({label: 'Black', value: 'Black'});
this.colors.push({label: 'Red', value: 'Red'});
this.colors.push({label: 'Maroon', value: 'Maroon'});
this.colors.push({label: 'Brown', value: 'Brown'});
this.colors.push({label: 'Orange', value: 'Orange'});
this.colors.push({label: 'Blue', value: 'Blue'});
}
}

DataTableFilterDemo.ts

<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>
<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [globalFilter]="gb" #dt>
<p-header>List of Cars</p-header>
<p-column field="vin" header="Vin (startsWith)" [filter]="true" filterPlaceholder="Search"></p-column>
<p-column field="year" header="Year ({{yearFilter||'No Filter'}}" [filter]="true" filterMatchMode="equals">
<ng-template pTemplate="filter" let-col>
<i class="fa fa-close" (click)="yearFilter=null;dt.filter(null,col.field,col.filterMatchMode)"></i>
<p-slider [style]="{'width':'100%','margin-top':'8px'}" [(ngModel)]="yearFilter" [min]="1970" [max]="2010" (onSlideEnd)="dt.filter($event.value,col.field,col.filterMatchMode)"></p-slider>
</ng-template>
</p-column>
<p-column field="brand" header="Brand (Custom)" [filter]="true" [style]="{'overflow':'visible'}" filterMatchMode="equals">
<ng-template pTemplate="filter" let-col>
<p-dropdown [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>
<p-column field="color" header="Color (Custom)" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
<ng-template pTemplate="filter" let-col>
<p-multiSelect [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
</ng-template>
</p-column>
</p-dataTable>

DataTableFilterDemo.html

Selection

DataTable提供一排点击单个和多个模式的选择。选定行必然选择属性和onrowselect onrowunselect事件提供了可选的回调。另外基于列的选择可以使用单选按钮或复选框使用一个特定的列SelectionMode为。比较时,如果一行被选中,DataTable穿越影响性能结果的对象的所有属性。建议定义一个DataKey属性唯一标识一个记录,避免深对象比较和提高性能。

在单一模式下,选择绑定是一个对象引用。

export class DataTableDemo implements OnInit {

    cars: Car[];

    selectedCar: Car;

    constructor(private carService: CarService) { }

    ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
}
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" dataKey="vin">
<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>

在多模式选择的结合应该是一个数组和多个项目可以选择使用元键或切换单独依靠metakeyselection属性值是真正的默认值。触摸功能的设备metakeyselection自动关闭。

export class DataTableDemo implements OnInit {

    cars: Car[];

    selectedCars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
}
<p-dataTable [value]="cars" selectionMode="multiple" [(selection)]="selectedCars" dataKey="vin">
<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>

如果你喜欢一个单选按钮或复选框,而不是连续点击,使用一列的SelectionMode为相反。以下数据表显示在每一行的第一列的复选框,复选框中自动添加一个标题行切换选择。

<p-dataTable [value]="cars" [(selection)]="selectedCars" dataKey="vin">
<p-column selectionMode="multiple"></p-column>
<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>

ContextMenu

DataTable与ContextMenu独家整合。为了将一个菜单数据表,定义了一个局部的菜单模板变量并将其绑定到DataTable的ContextMenu属性。这使显示的菜单时,行右键单击。

<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" [contextMenu]="cm">
<p-header>Right Click on Rows for ContextMenu</p-header>
<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> <p-contextMenu #cm [model]="items"></p-contextMenu>

Editing

Incell editing通过设置编辑属性编辑对DataTable和列真正启用。单击单元格切换到编辑模式,点击Enter键或单击另一个单元格将其切换回查看模式。

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

简单的输入字段作为编辑元素默认情况下,这可以通过添加一个定制的ptemplate命名编辑。

<p-dataTable [value]="cars" [editable]="true">
<p-column field="vin" header="Vin" [editable]="true"></p-column>
<p-column field="year" header="Year" [editable]="true"></p-column>
<p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
</ng-template>
</p-column>
<p-column field="color" header="Color" [editable]="true"></p-column>
<p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
<ng-template let-col let-car="rowData" pTemplate="body">
{{car[col.field]|date }}
</ng-template>
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-calendar [(ngModel)]="car[col.field]"></p-calendar>
</ng-template>
</p-column>
</p-dataTable>

demo code

export class DataTableEditableDemo implements OnInit {

    cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
}

DataTableEditableDemo.ts

<p-dataTable [value]="cars" [editable]="true">
<p-column field="vin" header="Vin" [editable]="true"></p-column>
<p-column field="year" header="Year" [editable]="true"></p-column>
<p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
</ng-template>
</p-column>
<p-column field="color" header="Color" [editable]="true"></p-column>
<p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
<ng-template let-col let-car="rowData" pTemplate="body">
{{car[col.field]|date }}
</ng-template>
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-calendar [(ngModel)]="car[col.field]"></p-calendar>
</ng-template>
</p-column>
</p-dataTable>

DataTableEditableDemo.html

Expandable Rows

行扩展允许显示特定行的详细内容。要使用此功能,使expandablerows属性,添加膨胀柱宣布扩大内容提供ptemplate“rowexpansion”为价值。

<p-dataTable [value]="cars" expandableRows="true">
<p-column expander="true" [style]="{'width':'22px'}"></p-column>
<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>
<ng-template let-car pTemplate="rowexpansion">
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center">
<img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif">
</div>
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-dataTable>

默认情况下所有行倒塌,expandadrows财产需要填充的行数据实例来显示特定行为扩展默认。

Column Resize

列的大小可以使用拖放设置resizablecolumns真实。有两个大小调整模式;"fit" and "expand"。"fit"是默认的和整体的桌子的宽度并没有改变时,一列大小。在"expand"模式下,表宽也随着列宽度的变化而变化。oncolumnresize回调是通过调整列标题作为参数。

<p-dataTable [value]="cars" [resizableColumns]="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>

Data Export

DataTable可以以CSV格式的使用exportcsv()方法其数据输出。

<p-dataTable #dt [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> <button type="button" pButton icon="fa-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()"></button>

Scrolling

DataTable支持水平和垂直滚动通过定义scrollwidth和scrollheight选项分别。属性可以采取固定像素值或百分比来计算滚动视图相对于DataTable母。样品使用垂直滚动,头下面是固定的,数据是可滚动的。在水平滚动,重要的是给固定宽度的列。

<p-dataTable [value]="cars" [scrollable]="true" scrollHeight="200px">
<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>

在水平滚动中,通过在列级上启用冻结属性,可以固定某些列。

<p-dataTable [value]="cars" [scrollable]="true" scrollHeight="200px" frozenWidth="100px" scrollWidth="600px">
<p-column field="vin" header="Vin" frozen="true"></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>

此外,virtualscroll模式可以通过加载数据需求处理大型数据集时滚动。

Lazy Loading

懒模式是得心应手地处理大型数据集,而不是加载整个数据,小块数据是通过调用回调onlazyload每次分页加载,排序和过滤发生。实现懒加载,使懒惰的属性和提供利用onlazyload实际加载数据从远程数据源的方法回调。onlazyload获取一个事件对象包含有关如何负荷。它还指定行数的逻辑totalrecords做一个页面配置投影查询,页面显示UI假设实际上有记录totalrecords规模虽然在现实中他们没有在懒人模式重要,只显示当前页的记录存在。

<p-dataTable [value]="cars" [scrollable]="true" [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords">
<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>
loadData(event: LazyLoadEvent) {
//event.first = First row offset
//event.rows = Number of rows per page
//event.sortField = Field name to sort in single sort mode
//event.sortOrder = Sort order as number, 1 for asc and -1 for dec in single sort mode
//multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties.
//filters: Filters object having field as key and filter value, filter matchMode as value
//globalFilter: Value of the global filter if available
this.cars = //do a request to a remote datasource using a service and return the cars that match the lazy load criteria
}

Responsive

数据表列显示为堆放在应答模式如果屏幕尺寸变得小于某个断点值。此功能启用响应设置为true。

<p-dataTable [value]="cars" [responsive]="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>

Overlays in Cells

Cells of datatable隐藏溢出默认情况下,这可以防止一部分像下拉菜单可正常显示叠加。在这样的情况下,设置列的样式以允许溢出。

<p-column field="color" [style]="{'overflow':'visible'}">
<ng-template let-col let-car="rowData">
<p-dropdown></p-dropdown>
</ng-template>
</p-column>

Immutable Mode

使用diff检查如果DataTable来实现底层的数据发生了变化,这可能会降低性能,避免它一成不变的模式,确保您的数据的变化,如添加或删除一个记录都创建一个新数组引用。例如,添加项目时使用切片而不是剪接,添加项目时使用扩展运算符而不是推送方法。

Loading Status

DataTable具有承载性能,当启用旋转图标显示数据加载。

<p-dataTable [value]="cars" [loading]="loading">
<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>
export class DataTableDemo implements OnInit {

    loading: boolean;

    cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
this.loading = true;
setTimeout(() => {
this.carService.getCarsSmall().then(cars => this.cars = cars);
this.loading = false;
}, 1000);
}
}

Attributes

Name  Type Default Description
value array null An array of objects to display.
headerRows array null An array of column definitions for column grouping at header.
footerRows array null An array of column definitions for column grouping at footer.
rows number null Number of rows to display per page.
paginator boolean false When specified as true, enables the pagination.
totalRecords number null Number of total records, defaults to length of value when not defined.
pageLinks number null Number of page links to display in paginator.
rowsPerPageOptions array null Array of integer values to display inside rows per page dropdown of paginator
sortMode string single Defines whether sorting works on single column or on multiple columns.
sortField string null Name of the field to sort data by default.
sortOrder number null Order to sort the data by default.
multiSortMeta array null An array of SortMeta objects to sort the data by default in multiple sort mode.
rowGroupMode string null Type of the row grouping, valid values are "subheader" and "rowspan".
groupField string null Name of the field to group by in subheader row grouping mode.
sortableGroupRow boolean true Whether to sort the data if the row group subheader is clicked.
expandableRowGroups boolean false When enabled, adds a clickable icon at group header to expand or collapse the group.
expandedRowGroups array null Collection of group field values to show a group as expanded by default.
responsive boolean false Defines if the columns should be stacked in smaller screens.
selectionMode string null Specifies the selection mode, valid values are "single" and "multiple".
selection any null Selected row in single mode or an array of values in multiple mode.
editable boolean false Activates incell editing when enabled.
expandableRows boolean false Activates expandable rows feature when true.
expandedRows array null Collection of rows to display as expanded.
rowExpandMode string multiple Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single".
globalFilter any null Reference of an input field to use as a global filter.
filterDelay number 300 Delay in milliseconds before filtering the data.
lazy boolean false Defines if data is loaded and interacted with in lazy manner.
resizableColumns boolean false When enabled, columns can be resized using drag and drop.
columnResizeMode boolean false Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
reorderableColumns boolean false When enabled, columns can be reordered using drag and drop.
scrollable boolean false When specifies, enables horizontal and/or vertical scrolling.
scrollHeight number/string null Height of the scroll viewport, can be pixel as a number or a percentage.
scrollWidth number/string null Width of the scroll viewport, can be pixel as a number or a percentage.
virtualScroll boolean false Whether the data should be loaded on demand during scroll.
style string null Inline style of the component.
styleClass string null Style class of the component.
contextMenu ContextMenu null Local ng-template varilable of a ContextMenu.
csvSeparator string , Character to use as the csv separator.
exportFilename string download Name of the exported file.
emptyMessage string No records found. Text to display when there is no data.
paginatorPosition string bottom Position of the paginator, options are "top","bottom" or "both".
rowTrackBy function null TrackBy function of ngFor directive used when rendering rows.
rowStyleClass function null Function that gets the row data and row index as parameters and returns a style class for the row.
rowHover boolean false Adds hover effect to rows without the need for selectionMode.
filters array null An array of FilterMetadata objects to provide external filters.
metaKeySelection boolean true Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
immutable boolean false Improves performance by avoiding diff checking, changes to value should be done in an immutable way on application side when immutable property is enabled.
dataKey string null A property to uniquely identify a record in data.
loading boolean false Displays a loader to indicate data load is in progress.

Events

Name  Parameters Description
onRowClick event.originalEvent: Browser event
event.data: Selected data
Callback to invoke when a row is clicked.
onRowSelect event.originalEvent: Browser event
event.data: Selected data
event.type: Type of selection, valid values are "row", "radiobutton" and "checkbox"
Callback to invoke when a row is selected.
onRowUnselect event.originalEvent: Browser event
event.data: Unselected data
event.type: Type of unselection, valid values are "row" and "checkbox"
Callback to invoke when a row is unselected with metakey.
onRowDblclick event.originalEvent: Browser event
event.data: Selected data
Callback to invoke when a row is selected with double clicked.
onHeaderCheckboxToggle event.originalEvent: Browser event
event.checked: State of the header checkbox
Callback to invoke when state of header checkbox changes.
onContextMenuSelect event.originalEvent: Browser event
event.data: Selected data
Callback to invoke when a row is selected with right click.
onColResize event.element: Resized column header
event.delta: Change of width in number of pixels
Callback to invoke when a column is resized.
onColReorder event.dragIndex: Index of the dragged column
event.dropIndex: Index of the dropped column
event.columns: Columns array after reorder.
Callback to invoke when a column is reordered.
onLazyLoad event.first = First row offset
event.rows = Number of rows per page
event.sortField = Field name to sort with
event.sortOrder = Sort order as number, 1 for asc and -1 for dec
filters: FilterMetadata object having field as key and filter value, filter matchMode as value
Callback to invoke when paging, sorting or filtering happens in lazy mode.
onEditInit event.column: Column object of the cell
event.data: Row data
Callback to invoke when a cell switches to edit mode.
onEdit event.originalEvent: Browser event
event.column: Column object of the cell
event.data: Row data
event.index: Row index
Callback to invoke when cell data is being edited.
onEditComplete event.column: Column object of the cell
event.data: Row data
event.index: Row index
Callback to invoke when cell edit is completed.
onEditCancel event.column: Column object of the cell
event.data: Row data
event.index: Row index
Callback to invoke when cell edit is cancelled with escape key.
onPage event.first: Index of first record in page
event.rows: Number of rows on the page
Callback to invoke when pagination occurs.
onSort event.field: Field name of the sorted column
event.order: Sort order as 1 or -1
event.multisortmeta: Sort metadata in
multi sort mode. See multiple sorting section for the structure of this
object.
Callback to invoke when a column gets sorted.
onFilter event.filters: Filters object having a field as the property key and an object with value, matchMode as the property value. Callback to invoke when data is filtered.
onRowExpand event.originalEvent: Browser event
data: Row data to expand.
Callback to invoke when a row is expanded.
onRowCollapse event.originalEvent: Browser event
data: Row data to collapse.
Callback to invoke when a row is collapsed.
onRowGroupExpand event.originalEvent: Browser event
group: Value of the group.
Callback to invoke when a row group is expanded.
onRowGroupCollapse event.originalEvent: Browser event
group: Value of the group.
Callback to invoke when a row group is collapsed.
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="handleRowSelect($event)">
<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>
handleRowSelect(event) {
//event.data = Selected row data
}

Methods

Name  Parameters Description
reset - Resets sort, filter and paginator state.
exportCSV - Exports the data in csv format.
toggleRow data Toggles row expansion for given row data.
<p-dataTable #dt [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> <button type="button" pButton (click)="update(dt)" label="Reset"></button>
update(dt: DataTable) {
dt.reset();
}

Styling

以下是结构式的类列表,对于主题类主题页面访问。

Name  Element
ui-datatable Container element.
ui-datatable-header Header section.
ui-datatable-footer Footer section.
ui-column-title Title of a column.
ui-sortable-column Sortable column header.
ui-column-filter Filter element in header.
ui-cell-data Data cell in body.
ui-cell-editor Input element for incell editing.
ui-datatable-scrollable-header Container of header in a scrollable table.
ui-datatable-scrollable-header Container of body in a scrollable table.
ui-datatable-scrollable-header Container of footer in a scrollable table.
ui-datatable-responsive Container element of a responsive datatable.
ui-datatable-emptymessage Cell containing the empty message.

参考资料:

https://www.primefaces.org/primeng/#/datatable

PrimeNG之DataTable的更多相关文章

  1. DataTable 转换成 Json的3种方法

    在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List<T>.DataTable转换为Json格式.特别在使用Extjs框架的时候,A ...

  2. C#中将DataTable导出为HTML的方法

    今天我要向大家分享一种将DataTable导出为到HTML格式的方法.有时我们需要HTML格式的输出数据, 以下代码就可以帮助我们达到目的,. 首先,我们要绑定DataTable和 DataGridV ...

  3. DataTable转换成IList<T>的简单实现

    DataTable的无奈 很多时候,我们需要去操作DataTable.但DataTable的操作,实在是太不方便了.Linq?lambda表达式?统统没有... 特别是对现有结果集做进一步筛选,这样的 ...

  4. 自用的基于Emit的C#下DataTable转实体类方法

    之前一直在做WebForm的开发,数据绑定时直接DataTable绑定Gridview很方便,但是最近开始往MVC转,数据列表的传递和页面展示基本上是以List为主,像下面这样,遍历实体类的各个字段去 ...

  5. jquery dataTable汉化(插件形式)

    1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...

  6. DataTable与DTO对象的简易转换类

    在web开发过程中,有时候为了数据传输的方便,比如:后台需要更新前端的ViewModel,此时我们定义一个与前端ViewModel结构一样的DTO对象,从数据层获取数据后,将数据封装成DTO然后序列化 ...

  7. asp.net DataTable导出Excel 自定义列名

    1.添加引用NPOI.dll 2.cs文件头部添加 using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System.IO; 3.代码如 ...

  8. asp.net dataTable转换成Json格式

    /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"> ...

  9. DataTable的orderby有关问题

    在网上找了一个在后台重新对DataTable排序的方法(之所以不在数据库是因为我生成的是报表,写了存储过程用的表变量,order by也要用变量,死活拼不起来,sql能力没过关,动态sql也试了) s ...

随机推荐

  1. 安全系列之CSRF初探

    前言 安全对于互联网的从业技术人员来讲,一直是接触或者实际使用掌握比较薄弱的一块,当然对于那些专项搞安全类的技术人员来讲除外. 接下来就来聊聊在互联网领域中常用的一些安全漏洞类型和一些防范手段,当然针 ...

  2. 【C++】C++中的流

    目录结构: contents structure [-] 1.IO类 IO对象无拷贝状态 条件状态 文件流 文件模式 string流 1.IO类 除了istream和ostream之外,标准库还定义了 ...

  3. Mybatis(二) 全局配置文件详解

    这节来说说全局配置文件的东西,非常简单.看一遍就懂了. --WH 一.全部配置内容 SqlMapConfig.xml的配置内容和顺序如下,顺序不能乱.现在来对这些属性的意思一一进行讲解. 二.prop ...

  4. linux 修改图片的尺寸

    # convert -sample 50.png .png #把512*512的图片修改为500*500的图片 # which convert /usr/bin/convert # rpm -qf / ...

  5. 小白都能看明白的VLAN原理解释

    为什么需要VLAN 1. 什么是VLAN? VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.VLAN ...

  6. tf训练OTSU

    训练一个简单的回归网络 基础的函数如下: # coding=utf-8 import tensorflow as tf import numpy as np np.random.seed(0) # 卷 ...

  7. 05Hadoop-左外连接

    场景:有两张表,一张用户表(user),交易表(transactions).两张表的字段如下: 两份表数据做个左连接,查询出(商品名,地址)这种格式. 这样就是相当于交易表是左表,不管怎么样数据都要保 ...

  8. CDN 服务域名解析配置

    记录类型请选择为CNAME: 主机记录即加速域名的前缀,例如:   如果您的加速域名为... 前缀为... testcdn.aliyun.com testcdn www.aliyun.com www ...

  9. 群晖搭建webssh

    拷贝工程到系统根,然后需要赋予权限 sudo chmod 777 -R WebSSH2/ git clone https://github.com/zhaocundang/WebSSH2.git de ...

  10. 智能聊天机器人——基于RASA搭建

    前言: 最近了解了一下Rasa,阅读了一下官方文档,初步搭建了一个聊天机器人. 官方文档:https://rasa.com/docs/ 搭建的chatbot项目地址: https://github.c ...