primeng p表exportCSV()函数不起作用? [英] primeng p-table exportCSV() function not working?

问题描述

我正在使用新的PrimengV7 p表，我想导出该表，

I am using new PrimengV7 p-table I want export the table,

所以我的代码是

<p-header>
        <div class="pull-right" *ngIf="collapsed">

            <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
        </div>
    </p-header>
<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
    (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                    [responsive]="true" scrollable="true" scrollHeight="400px">
                    <ng-template pTemplate="header">
                            <tr>
                                    <th style="width: 100px"></th>
                                    <th style="width: 100px">{{columns['so']}}</th>
                                    <th style="width: 100px">{{columns['sourceLineNumber']}}</th>
                                    <th style="width: 100px">{{columns['bookingEntityName']}}</th>
                              </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                            <tr [pSelectableRow]="rowData">
                                    <td style="width: 100px">
                                        <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                        </span>
                                    </td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.so}}">{{rmanReconSosrcToBkingsRep.so}}</td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.sourceLineNumber}}">{{rmanReconSosrcToBkingsRep.sourceLineNumber}}</td>

                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.bookingEntityName}}">{{rmanReconSosrcToBkingsRep.bookingEntityName}}</td>

                             </tr>
                    </ng-template>

即使我尝试将图标放在表格中，也无法正常工作在鞋底中显示错误

Even I tried put the icon inside table , but it's not working in cosole showing error

试用2:带有动态列

<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
        (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                        [responsive]="true" scrollable="true" scrollHeight="400px">
                        <ng-template pTemplate="header">
                                <tr>
                                        <th style="width: 100px"></th>
                                        <th *ngFor="let col of columnOptions">
                                                {{col.label}}
                                        </th>
                                     </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                                <tr [pSelectableRow]="rowData">
                                        <td style="width: 100px">
                                            <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                            </span>
                                        </td>

                                                <td *ngFor="let col of columnOptions">
                                                        {{rowData[col.value]}}
                                                    </td>

                                 </tr>
                        </ng-template>

即使它不起作用

请任何人帮助我

谢谢.

推荐答案

如果要在表中导出数据，则应使用素数表示的数据表导出功能.而且使用此功能绝对是容易和简单的.您应该遵循2个步骤.首先，您应该在p-table标签上添加模板变量.如下所示:

if you want to export your data in the table you should use export feature of data table in prime ng. and using this feature is absolutely easy and simple. you should follow 2 steps. first you should add template variable on the p-table tag.as below:

 <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple" 
     [(selection)]="selectedCars">

在上一行中，dt是模板变量.

in the line above, dt is template variable.

第二步是制作按钮并只调用一个函数.但请注意，请勿更改函数名称以触发导出函数:

the second step is to make button and just call a function. but be careful that you must not change the name of the function to trigger the export function:

   <button type="button" pButton icon="fa fa-file-o" iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"></button>

exportCSV()是开始导出到CSV文件的功能.但是您的代码是错误的，因为您在标记的p表之前使用了该函数，这是错误的.该函数必须位于p-table标签内.不在那之外.

the exportCSV() is a function which start the exporting to CSV file. but your code is wrong because you use the function before the p-table on tag that is wrong. the function must be inside p-table tag. not outside of that.

这篇关于primeng p表exportCSV()函数不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！