kendo-grid excel экспорт динамических столбцов - PullRequest
0 голосов
/ 27 ноября 2018

У меня есть кендо-сетка, которая сделана с использованием динамических столбцов.Бэкэнд берет две даты и выводит сетку данных между двумя датами.Каждая неделя представляет собой столбец, вот как он выглядит: enter image description here

Поскольку пользователь может вручную выбирать диапазон дат, число столбцов является динамическим.Я справился с этим, выполнив в файле 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, но ни один не отображает данные динамических столбцов.Как мне сделать экспорт данных?

...