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

问题描述

我正在使用新的 PrimengV7 p-table 我想导出表格，

所以我的代码是

<div class="pull-right" *ngIf="collapsed"><a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="导出"></a>

</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"[响应]="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-模板><ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep><tr [pSelectableRow]="rowData"><td style="width: 100px"><跨度><a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="导出"></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-模板>

即使我尝试将图标放在 table 中，但它不起作用在cosole中显示错误

试用 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"[响应]="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-模板><ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep><tr [pSelectableRow]="rowData"><td style="width: 100px"><跨度><a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="导出"></a></span></td><td *ngFor="let col of columnOptions">{{rowData[col.value]}}</td></tr></ng-模板>

即使它不起作用

请任何人帮助我

提前致谢.

解决方案

如果你想导出表中的数据，你应该使用prime ng中数据表的导出功能.使用此功能绝对简单易行.你应该遵循2个步骤.首先你应该在 p-table 标签上添加模板变量.如下:

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

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

第二步是制作按钮并调用一个函数.但要注意一定不要更改函数名来触发导出函数:

exportCSV() 是一个开始导出到 CSV 文件的函数.但是您的代码是错误的，因为您在标签上的 p-table 之前使用了错误的函数.该函数必须在 p-table 标签内.不在此之外.

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

So my code is

<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

trial 2: with dynamic columns

<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>

Even it's not working

please any one help me

Thanks in advance.

解决方案

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">

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>

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-table exportCSV() 函数不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！