PrimeNG之DataTable
--数据表显示在表格格式数据。
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的更多相关文章
- DataTable 转换成 Json的3种方法
在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List<T>.DataTable转换为Json格式.特别在使用Extjs框架的时候,A ...
- C#中将DataTable导出为HTML的方法
今天我要向大家分享一种将DataTable导出为到HTML格式的方法.有时我们需要HTML格式的输出数据, 以下代码就可以帮助我们达到目的,. 首先,我们要绑定DataTable和 DataGridV ...
- DataTable转换成IList<T>的简单实现
DataTable的无奈 很多时候,我们需要去操作DataTable.但DataTable的操作,实在是太不方便了.Linq?lambda表达式?统统没有... 特别是对现有结果集做进一步筛选,这样的 ...
- 自用的基于Emit的C#下DataTable转实体类方法
之前一直在做WebForm的开发,数据绑定时直接DataTable绑定Gridview很方便,但是最近开始往MVC转,数据列表的传递和页面展示基本上是以List为主,像下面这样,遍历实体类的各个字段去 ...
- jquery dataTable汉化(插件形式)
1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...
- DataTable与DTO对象的简易转换类
在web开发过程中,有时候为了数据传输的方便,比如:后台需要更新前端的ViewModel,此时我们定义一个与前端ViewModel结构一样的DTO对象,从数据层获取数据后,将数据封装成DTO然后序列化 ...
- asp.net DataTable导出Excel 自定义列名
1.添加引用NPOI.dll 2.cs文件头部添加 using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System.IO; 3.代码如 ...
- asp.net dataTable转换成Json格式
/// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"> ...
- DataTable的orderby有关问题
在网上找了一个在后台重新对DataTable排序的方法(之所以不在数据库是因为我生成的是报表,写了存储过程用的表变量,order by也要用变量,死活拼不起来,sql能力没过关,动态sql也试了) s ...
随机推荐
- 分析轮子(九)- Cloneable.java
注:玩的是JDK1.7版本 一:Cloneable.java 接口也是标记接口,所以,它没有任何方法和属性,实现此接口表示的意思是:可以调用 Object.java 类的 clone() 方法,进行简 ...
- python3 + flask + sqlalchemy +orm(2):数据库中添加表
往数据库中添加一张保存文章的表,表明为article,字段有id,title,content 同样一个配置文件:config.py DEBUG = True #dialect+driver://roo ...
- Spark 官方博文专区(目录)
关于转载一些 Spark 官方的文档以及 DataBricks 公司博文,本系列基本是中英双语,主要是为了提高自己的英语水平. 文章分类 spark databricks A Tale of Thre ...
- Python中的__name__和类
1. python中if __name__ == '__main__': 的解析 经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是 ...
- android sdk content loader 0%不动
Make sure that eclipse is not active. If it is active kill eclipse from the processes tab of the tas ...
- Android 获取外网IP,实测有效
网上有很多获取IP的例子,不过都是获取到的本地ip,还有的是因为走不通了,获取到的ip为空,下面看实测获取到外网IP的代码,注意需要在线程里面执行 /** * 获取外网的IP(要访问Url,要放到后台 ...
- Android Studio中解决jar包重复依赖导致的代码编译错误
在原本的代码中已经使用了OKHTTP和rxjava,然后今天依赖retrofit的时候一直报错 Program type already present: okhttp3.internal.ws.Re ...
- Variational RL for POMDP
1.Le, Tuan Anh, et al. "Auto-encoding sequential monte carlo." arXiv preprint arXiv:1705.1 ...
- VS的ASP.NET项目中cshtml关键词出错 红线,当前上下文中不存在名称
[参考]VS的ASP.NET项目中cshtml突然出错,当前上下文中不存在名称“ViewBag” 原因:web.config 配置错误 这种情况是因为两个web.config文件版本不匹配,需要进行修 ...
- Docker-集群swarm(5)
Docker集群的概念 群集是一组运行Docker并加入集群的计算机.在此之后,您继续运行您习惯使用的Docker命令,但现在它们由群集管理器在群集上执行.群中的机器可以是物理的或虚拟的.加入群组后 ...