如何在导出 SlickGrid 数据时得到 loader/spinner？

Question

我正在使用 slickgrid (2.12.2) 和 angular 8. 我想知道如何在数据导出到 csv、excel 或文件时显示 loader/spinner .因为如果数据很大，导出需要一些时间，使用的人可能会认为什么都没有发生...

Answer 1

我认为这样的东西应该适合你。根据 Angular-SlickGrid 来源，exportService.exportToFile 函数 returns 一个承诺。

您可以在调用该函数之前设置一个标志，并在导出完成后使用返回的承诺的 'then' 块停止微调器。

@Component({
    ...
})
export class MyComponent {
    loading: boolean = false;

    constructor (private exportService: ExportService ) {
        ...
    }

    exportToCSV (): Promise<bool> {
        return this.exportService.exportToFile({
            ...
        });
    }

    onExportBtnClicked () {
        this.loading = true;

        this.exportToCSV.then(() => {
            // Assuming it succeeds.
            this.loading = false;
        });
    }
}

Angular-SlickGrid还有以下输出属性。

  @Output() onGridBeforeExportToFile = this.exportService.onGridBeforeExportToFile;
  @Output() onGridAfterExportToFile = this.exportService.onGridAfterExportToFile;
  @Output() onGridBeforeExportToExcel = this.excelExportService.onGridBeforeExportToExcel;
  @Output() onGridAfterExportToExcel = this.excelExportService.onGridAfterExportToExcel;

在内部，Angular-SlickGrid 的菜单扩展使用 ExportService.exportToFile，它发出一个事件，该事件（如上所示）从 angular-slickgrid 组件输出。

@Injectable()
export class ExportService {
    ...
    onGridBeforeExportToFile = new Subject<boolean>();
    onGridAfterExportToFile = new Subject<{ content?: string; filename: string; format: string; useUtf8WithBom: boolean; }>();
}

它们是 public，因此您可以直接在 ExportService 上访问它们。您可以在 onGridBeforeExportToFile 发出事件时将微调器标志设置为 true，在 onGridAfterExportToFile 发出时将微调器标志设置为 false。

总而言之，导出服务是与 Angular-SlickGrid 库导出相关的所有内容的来源，无论您是单击自定义按钮进行导出，还是单击 'Export in CSV format'菜单扩展等

Answer 2

请注意，我是 Angular-Slickgrid 的作者。从我看到的问题和答案来看，我似乎错过了我的 Wiki 中解释的这个功能（有很多 Wiki，请阅读它们）所以我更新了两个 Wiki Export to Excel and Export to File (CSV/TabDelimited), the Grouping Example 是唯一展示这个的演示功能，因为这是唯一可以拥有大量数据的功能（如果您选择使用演示中的 50k 行并使用分组）。

这是 Excel 导出

的更新 Wiki

选项 1（推荐）

查看

<span [hidden]="!processing">
   <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
</span>

<angular-slickgrid gridId="grid2"
                     [dataset]="dataset"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     (onGridBeforeExportToExcel)="processing = true"
                     (onGridAfterExportToExcel)="processing = false"
                     (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

组件

export class MyComponent() implements OnInit {
  processing = false;
}

根据@Wingnod 的回答，您也可以在代码中订阅事件，但最好只使用事件发射器 (onGridBeforeExportToExcel)，因为您不需要关心取消订阅，而且代码是清洁器。如果出于某种原因您确实希望订阅该活动，您可以通过这种方式进行

选项 2（不推荐）

查看

<angular-slickgrid gridId="grid2"
        [dataset]="dataset"
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions"
        (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

组件

export class GridGroupingComponent implements OnInit, OnDestroy {
  exportBeforeSub: Subscription;
  exportAfterSub: Subscription;

  ngOnDestroy() {
    this.exportBeforeSub.unsubscribe();
    this.exportAfterSub.unsubscribe();
  }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;

    // display a spinner while downloading
    this.exportBeforeSub = this.angularGrid.exportService.onGridBeforeExportToFile.subscribe(() => this.processing = true);
    this.exportAfterSub = this.angularGrid.exportService.onGridAfterExportToFile.subscribe(() => this.processing = false);
  }
}

您可以看到选项 1 更清晰且更易于实施。

如何在导出 SlickGrid 数据时得到 loader/spinner？

How do I get a loader/spinner while exporting data of the SlickGrid?

slickgrid

typescript

angular