如何在导出 excel - Angular 6 中将 kendo 网格中的 FooterTemplate 分隔为 2 行
How to separate the FooterTemplate in kendo grid to 2 rows in export excel - Angular 6
我在 angular 6 项目中有一个网格，
网格中的页脚包含两种类型的数据：自定义总和和自定义平均值
当我说自定义时，我的意思是我们对如何使用网格数据进行计算有自己的逻辑。
this is how the footer looks like
当我导出到 excel 时，页脚导出为 1 行，我想将其分成 2 行。
导出本身工作正常，我只需要将页脚分成 2 行
页脚代码：
<ng-template kendoGridFooterTemplate let-dataItem let-column let-columnIndex="columnIndex" >
<div>
<span *ngIf="columnIndex === 2">{{'average' | translate}}</span>
<div *ngIf="item.avg">
<span [ngClass]="getAvg(item.field) > 0 ? 'green' : 'red' ">{{getAvg(item.field) | number: '2.'}}</span>
</div>
</div>
<div>
<span *ngIf="columnIndex === 2">{{'sum' | translate}}</span>
<div *ngIf="item.sum">
<span [ngClass]="getSum(item.field) > 0 ? 'green' : 'red' ">{{getSum(item.field) | number: '2.'}}</span>
</div>
</div>
</ng-template>
我已经尝试检查是否可以添加超过 1 个页脚，但我找不到任何相关文档
有人解决:)？
我找到了解决办法，
在 onExcelExport(e: any) 我可以访问 excel sheet 中的单元格并编辑它们
所以我刚刚删除了最后一行
并手动插入我需要的数据
所以代码看起来像这样：
网格设置：
<kendo-grid *ngIf="gridData"
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
filterable="menu"
(filterChange)="filterChange($event)"
[navigable]="true"
(dataStateChange)="dataStateChange($event)"
[sortable]="{
allowUnsort: true,
mode:'multiple'} "
[selectable]="true"
(excelExport)="onExcelExport($event)">
函数看起来像这样
onExcelExport(e: any) {
// delete last row in the excel sheet
const rows = e.workbook.sheets[0].rows;
rows.pop();
// push new row by initiate new cell array, looping throw state to get the the right field
const cellsSum = [];
const rowsLength = rows[rows.length - 1].cells.length;
for (let i = 0; i < rowsLength; i++) {
const field =
this.employeeColumnService.state.employeeDetailsColumns.find(x => x.title === rows[0].cells[i].value.toString()).field;
cellsSum.push({value: this.getSum(field)});
}
}
rows.push({type: "data", cells: cellsSum});
我在 angular 6 项目中有一个网格， 网格中的页脚包含两种类型的数据：自定义总和和自定义平均值 当我说自定义时，我的意思是我们对如何使用网格数据进行计算有自己的逻辑。 this is how the footer looks like
当我导出到 excel 时，页脚导出为 1 行，我想将其分成 2 行。
导出本身工作正常，我只需要将页脚分成 2 行
页脚代码：
<ng-template kendoGridFooterTemplate let-dataItem let-column let-columnIndex="columnIndex" >
<div>
<span *ngIf="columnIndex === 2">{{'average' | translate}}</span>
<div *ngIf="item.avg">
<span [ngClass]="getAvg(item.field) > 0 ? 'green' : 'red' ">{{getAvg(item.field) | number: '2.'}}</span>
</div>
</div>
<div>
<span *ngIf="columnIndex === 2">{{'sum' | translate}}</span>
<div *ngIf="item.sum">
<span [ngClass]="getSum(item.field) > 0 ? 'green' : 'red' ">{{getSum(item.field) | number: '2.'}}</span>
</div>
</div>
</ng-template>
我已经尝试检查是否可以添加超过 1 个页脚，但我找不到任何相关文档
有人解决:)？
我找到了解决办法， 在 onExcelExport(e: any) 我可以访问 excel sheet 中的单元格并编辑它们 所以我刚刚删除了最后一行 并手动插入我需要的数据 所以代码看起来像这样：
网格设置：
<kendo-grid *ngIf="gridData"
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
filterable="menu"
(filterChange)="filterChange($event)"
[navigable]="true"
(dataStateChange)="dataStateChange($event)"
[sortable]="{
allowUnsort: true,
mode:'multiple'} "
[selectable]="true"
(excelExport)="onExcelExport($event)">
函数看起来像这样
onExcelExport(e: any) {
// delete last row in the excel sheet
const rows = e.workbook.sheets[0].rows;
rows.pop();
// push new row by initiate new cell array, looping throw state to get the the right field
const cellsSum = [];
const rowsLength = rows[rows.length - 1].cells.length;
for (let i = 0; i < rowsLength; i++) {
const field =
this.employeeColumnService.state.employeeDetailsColumns.find(x => x.title === rows[0].cells[i].value.toString()).field;
cellsSum.push({value: this.getSum(field)});
}
}
rows.push({type: "data", cells: cellsSum});