我正在使用带有 Angular 2 的 Kendo Gridhttp://www.telerik.com/kendo-angular-ui/components/grid/data-binding/ http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/教程,但我没有在网格中找到过滤。如何使用 Angular 2 过滤我的 Kendo Grid?
我创建了这个plunker http://plnkr.co/edit/qdJIkLbryTg2qoNcHOMR?p=preview您可以在其中按产品名称过滤网格。这是一个非常基本的例子:
import { Component } from '@angular/core';
import {
GridDataResult,
SortDescriptor,
orderBy
} from '@progress/kendo-angular-grid';
@Component({
selector: 'my-app',
template: `
<input type="text" [(ngModel)]="filter" (ngModelChange)="change()">
<kendo-grid
[data]="gridView"
[sortable]="{ mode: 'multiple' }"
[sort]="sort"
(sortChange)="sortChange($event)"
>
<kendo-grid-column field="ProductID" title="Product ID" width="120">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
private filter: string;
private sort: SortDescriptor[] = [];
private gridView: GridDataResult;
private products: any[] = [
{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": false
},
{
"ProductID": 3,
"ProductName": "Chai",
"UnitPrice": 122.0000,
"Discontinued": true
}
,{
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}];
constructor() {
this.loadProducts();
}
protected sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
this.loadProducts();
}
private loadProducts(prods): void {
const products = prods || this.products;
this.gridView = {
data: orderBy(products, this.sort),
total: products.length
};
}
private change(){
this.loadProducts(this.products.filter(product => product.ProductName === this.filter));
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)