如何解决如何将剑道网格导出到带有过滤数据的excel文件
我想知道如何将网格导出为带有过滤数据的 Excel 文件。
这是我的组件:
<kendo-grid
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
[selectable]="true"
(dataStateChange)="dataStateChange($event)">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand icon="file-excel">Export To Excel</button>
</ng-template>
<kendo-grid-column field="id" [hidden]=true></kendo-grid-column>
<kendo-grid-column field="name"></kendo-grid-column>
<kendo-grid-column field="surname"></kendo-grid-column>
<kendo-grid-column field="birth_date"></kendo-grid-column>
<kendo-grid-excel fileName="MyFile.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>
TS 组件:
constructor() {
this.allData = this.allData.bind(this);
}
ngOnInit() {
this.getGridData();
}
public allData(): ExcelExportData {
const result: ExcelExportData = {
data: process(this.products,{sort: [{ field: 'name',dir: 'asc' }] }).data
};
return result;
}
getGridData(){
this.MyService.getDataGrid().subscribe(data => {
data = JSON.parse(data);;
this.products= data;
this.gridData = process(data,this.state)
});
}
谢谢,
最好的问候
解决方法
来自Telerik Documentation 默认情况下,网格会导出其当前数据。要导出与当前 Grid 数据不同的数据,请指定自定义 fetchData 函数(您已完成)。它返回一个 ExcelExportData 值或数组。 allData() 方法获取数据集合(通常但不是强制性的,与 Grid 绑定到的同一个集合)对其进行处理(例如,应用或删除分页、过滤、排序等),并使用用于创建工作簿的结果对象。
因此,基本上,一旦您告诉网格您想要自定义数据集,您就可以使用数据查询组件根据需要查询数据。
import { Component } from '@angular/core';
import { process } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { products } from './products';
@Component({
selector: 'my-app',template: `
<kendo-grid [kendoGridBinding]="products" [height]="400" [group]="group" [pageable]="true" [pageSize]="10">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
</ng-template>
<kendo-grid-column field="ProductID" title="Product ID" [width]="200">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category" [hidden]="true">
</kendo-grid-column>
<kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>
`
})
export class AppComponent {
public products: any[] = products;
public group: any[] = [{
field: 'Category.CategoryName'
}];
// Bind 'this' explicitly to capture the execution context of the component.
constructor() {
this.allData = this.allData.bind(this);
}
public allData(): ExcelExportData {
const result: ExcelExportData = {
data: process(products,{ group: this.group,sort: [{ field: 'ProductID',dir: 'asc' }] }).data,group: this.group
};
return result;
}
}
process function 来自您必须安装的 Kendo Data Query 组件。您可以提供skip 和take 参数以获取您的页面数据。
const result = process(data,{
skip: 10,take: 20,group: [{
field: 'category.categoryName',aggregates: [
{ aggregate: "sum",field: "unitPrice" },{ aggregate: "sum",field: "unitsInStock" }
]
}],sort: [{ field: 'productName',dir: 'desc' }],filter: {
logic: "or",filters: [
{ field: "discontinued",operator: "eq",value: true },{ field: "unitPrice",operator: "lt",value: 22 }
]
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。