У меня есть кендо-сетка, которая сделана с использованием динамических столбцов.Бэкэнд берет две даты и выводит сетку данных между двумя датами.Каждая неделя представляет собой столбец, вот как он выглядит:
Поскольку пользователь может вручную выбирать диапазон дат, число столбцов является динамическим.Я справился с этим, выполнив в файле component.ts следующее:
import { Component, OnInit, Injectable } from '@angular/core';
import { DataService } from '../data.service';
import { Plants } from '../Plants';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css']
})
@Injectable()
export class Component1Component implements OnInit {
constructor(private dataService: DataService) { }
public tableData: [];
public columns: Array<string>;
public currentDate = new Date(Date.now());
public startDate: Date;
public endDate: Date;
public datePipe = new DatePipe('en-US');
ngOnInit() {
this.endDate = this.currentDate;
if (this.currentDate.getMonth() < 9) {
this.startDate = new Date();
this.startDate.setFullYear(this.currentDate.getFullYear() - 1);
this.startDate.setMonth(9);
this.startDate.setDate(1);
} else {
this.startDate = new Date();
this.startDate.setFullYear(this.currentDate.getFullYear());
this.startDate.setMonth(9);
this.startDate.setDate(1);
}
this.getTableData();
}
getTableData() {
const sdate = this.datePipe.transform(this.startDate, 'yyyy-MM-dd');
const edate = this.datePipe.transform(this.endDate, 'yyyy-MM-dd');
this.dataService.getData(Plants.Name, sdate, edate).subscribe(results => {
this.tableData = results['Table'];
this.columns = Object.keys(results['Table'][0]);
for (let i = this.columns.length - 1; i >= 0; i--) {
if (this.columns[i] === 'PlantName' ||
this.columns[i] === 'Department' ||
this.columns[i] === 'GLAccount' ||
this.columns[i] === 'AccountDescription') {
this.columns.splice(i, 1);
}
}
console.log(this.columns);
});
}
}
}
, и мой component1.html выглядит следующим образом:
<div>
<div class="dateSelect">
<div class="startDateSelect">
<p>Start Date: {{startDate | kendoDate:'MM/dd/yyyy'}}</p>
<kendo-datepicker [(value)]="startDate"></kendo-datepicker>
</div>
<div class="endDateSelect">
<p>End Date: {{endDate | kendoDate:'MM/dd/yyyy'}}</p>
<kendo-datepicker [(value)]="endDate"></kendo-datepicker>
</div>
<div class="submitButton">
<button kendoButton (click)="onSubmitClick()">Submit</button>
</div>
</div>
<br>
<div class="CostTowerTable">
<kendo-grid [data]="tableData" [height]="500">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand icon="file-excel">Export To Excel</button>
</ng-template>
<kendo-grid-column field="PlantName" title="Plant Name" width="125"></kendo-grid-column>
<kendo-grid-column field="Department" title="Dept." width="100"></kendo-grid-column>
<kendo-grid-column field="GLAccount" title="Account" width="100"></kendo-grid-column>
<kendo-grid-column field="AccountDescription" title="Description" width="200"></kendo-grid-column>
<ng-container *ngFor="let col of columns">
<kendo-grid-column title="{{col}}" width="125">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem[col] | currency:'USD'}}
</ng-template>
</kendo-grid-column>
</ng-container>
<kendo-grid-excel fileName="CostTowers.xlsx"></kendo-grid-excel>
</kendo-grid>
<button type="button" class="k-button" (click)="excelexport.save()">Export To Excel</button>
<kendo-excelexport [data]="tableData" fileName="CostTowers.xlsx" #excelexport>
<kendo-excelexport-column field="PlantName" title="Plant Name" width="125"></kendo-excelexport-column>
<kendo-excelexport-column field="Department" title="Dept." width="100"></kendo-excelexport-column>
<kendo-excelexport-column field="GLAccount" title="Account" width="100"></kendo-excelexport-column>
<kendo-excelexport-column field="AccountDescription" title="Description" width="200"></kendo-excelexport-column>
<ng-container *ngFor="let col of columns">
<kendo-excelexport-column title="{{col}}" width="125">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem[col] | currency:'USD'}}
</ng-template>
</kendo-excelexport-column>
</ng-container>
</kendo-excelexport>
</div>
</div>
Я попытался экспортировать с помощью кендо-Grid-Excel и кендо-ExlexPort.Оба они отображают статические столбцы в моем файле Excel, но ни один не отображает данные динамических столбцов.Как мне сделать экспорт данных?