primeng-datatable 相关问题

Angular PrimeNG p-table：向特定列添加自定义排序功能

我正在使用PrimeNG的p表。该表当前在两列上默认排序，但第三列数据应该按状态（高、中、低）排序。现在我需要实现排序...

如何使用 headercheckboxicon 和 checkboxicon 模板 primeng 复选框选择

如何在primeng表复选框选择中使用headercheckboxicon和checkboxicon模板 我只是按照 primeng 表文档并使用下面的代码 如何在primeng表复选框选择中使用headercheckboxicon和checkboxicon模板 我只是按照 primeng 表文档并使用下面的代码 <div class="card"> <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}" > <ng-template pTemplate="checkboxicon"> <p-checkbox label="Cheese"></p-checkbox> </ng-template> <ng-template pTemplate="headercheckboxicon"> <p-checkbox label="Header"></p-checkbox> </ng-template> <ng-template pTemplate="header"> <tr> <th style="width: 4rem"> <p-tableHeaderCheckbox></p-tableHeaderCheckbox> </th> <th>Code</th> <th>Name</th> <th>Category</th> <th>Quantity</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td> <p-tableCheckbox [value]="product"></p-tableCheckbox> </td> <td>{{product.code}}</td> <td>{{product.name}}</td> <td>{{product.category}}</td> <td>{{product.quantity}}</td> </tr> </ng-template> </p-table> </div> 提前致谢 您是否使用 PrimeNG 版本 14 或更低版本？如果是这样，则模板尚未引入，您必须升级 PrimeNG 或添加您自己的组件，并将其映射到表中。 如果您想了解实际情况，可以在此处查看代码：https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts

Primeng 使可滚动数据表高度响应

PrimeNG DataTable 提供了一个 [scrollable] 属性来定义垂直和/或水平滚动。这必须与设置的scrollHeight和/或scrollWidth的组合一起使用。 我怎样才能拥有...

如何使用 headercheckboxicon 和 checkboxicon 模板来启动复选框选择

如何在primeng表复选框选择中使用headercheckboxicon和checkboxicon模板 我只是按照 primeng 表文档并使用下面的代码 如何在primeng表复选框选择中使用headercheckboxicon和checkboxicon模板 我只是按照 primeng 表文档并使用下面的代码 <div class="card"> <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}" > <ng-template pTemplate="checkboxicon"> <p-checkbox label="Cheese"></p-checkbox> </ng-template> <ng-template pTemplate="headercheckboxicon"> <p-checkbox label="Header"></p-checkbox> </ng-template> <ng-template pTemplate="header"> <tr> <th style="width: 4rem"> <p-tableHeaderCheckbox></p-tableHeaderCheckbox> </th> <th>Code</th> <th>Name</th> <th>Category</th> <th>Quantity</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td> <p-tableCheckbox [value]="product"></p-tableCheckbox> </td> <td>{{product.code}}</td> <td>{{product.name}}</td> <td>{{product.category}}</td> <td>{{product.quantity}}</td> </tr> </ng-template> </p-table> </div> 提前致谢 您是否使用 PrimeNG 版本 14 或更低版本？如果是这样，则模板尚未引入，您必须升级 PrimeNG 或添加您自己的组件，并将其映射到表中。 如果您想了解实际情况，可以在此处查看代码：https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts

如何将Primeng数据表与ngx-infinite-scroll集成

我正在尝试集成 ngx-infinite 滚动库 https://www.npmjs.com/package/ngx-infinite-scroll 带有primeng网格 https://www.primefaces.org/primeng-4.3.0/#/datatable 有没有人尝试过

动态加载数据时分页p表不排序

这是p表分页和排序的代码。分页工作完美，但排序似乎不起作用。每个页面的数据都是通过 api 调用动态填充的，因此其余的......

如果列发生变化如何获取事件？

我使用 PrimeNG 表，并且还有一些列的选择。 正如这里的示例所示。 https://primeng.org/table#column-toggle 现在，如果列发生更改（之后），我需要获取一个事件 - ...

在与反应式表单绑定的 PrimeNG 表中启用单行编辑会导致启用所有行编辑

我有一个可编辑的 PrimeNG 表，与反应式表单绑定（不与 ngtemplate 绑定）。如果我单击单行的编辑，所有行都会变成编辑模式。这是解释我的问题的图片。 问题是...

如何创建自定义可重用组件以在 Primeng Table 中显示空消息？

我在项目中使用 primeng 表，并且尝试创建一个自定义可重用组件，以在没有可用数据时显示空消息。所以，在我的组件中，如果我有以下代码，那么它是......

如何设计或删除 PrimeNG p 表网格线？

我正在尝试删除或至少更改 p 表网格线的颜色。 我尝试检查浏览器上的代码，看看是否可以找到创建这些行的元素，但我找不到它。 我...

onRowSelect / onRowClick 根本没有被触发。 - Primeng 桌子 - Angular

我实际上需要遍历到另一个组件，其中单击行时选择了数据。我一直在使用 p-table 来执行相同的操作。我完全不知道为什么。 onRowClick / onRowSelection 做...

Angular 9 PrimeNg 如何设置 p 表边框颜色样式？

如何更改p表的边框颜色？我能够更改表的表头边框颜色，但我不知道如何更改 p 表主体的颜色。 正文 .ui-table .ui-ta...

使用 RTL 方向的 Treetable Primeng 问题

图像为例 当您滚动左右标题而不滚动时，Treetable Primeng 使用方向 RTL 出现问题 您可以在 github 存储库或在线编辑器中帮助我们吗 我知道Primeng不支持RTL 我是

Prime ng：以编程方式调整 p-splitter 中存在的 p-accordion 的大小

请参阅下面我的组件代码： 我有一个 p 分配器，它分为 3 个部分。 我在每个部分都有一个 p-手风琴，而它又有一个 p-表。 ... 请参阅下面我的组件代码： 我有一个 p 分离器，它被分成 3 个部分。 我在每个部分都有一个 p-手风琴，而它又具有一个 p-表。 <div class="card w-full"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5"> <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" > <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="number">Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name">Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type">Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber">Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate">Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number">Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> 我这里有两个问题需要解决： 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 感谢您的阅读，如有任何帮助，我们将不胜感激！ 致以最诚挚的问候， 尼丁阿乌拉。 通常组件 CSS 的作用域仅限于组件内部，我们可以使用 ::ng-deep 来覆盖此行为，并且 CSS 在组件外部可见！ 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 我只是添加下面的 CSS 以确保完整高度传播到手风琴的所有元素，我使用类 custom-accordion 来确保 CSS 仅限于手风琴本身！ HTML ... <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 我不知道为什么你需要一个调整大小的元素，当不需要调整大小时，你可以对flexbox做同样的事情，如果你想这样做，你可以引用bootstrap grids中的CSS！ 为了实现你想要的，我们可以使用类 p-splitter-gutter 隐藏调整大小栏，我使用类 no-resize 将其范围限定到手风琴级别。 HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } 完整代码 TS import { Component } from '@angular/core'; import { ImportsModule } from './imports'; @Component({ selector: 'splitter-horizontal-demo', templateUrl: './splitter-horizontal-demo.html', standalone: true, imports: [ImportsModule], styles: [ ` ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } `, ], }) export class SplitterHorizontalDemo { noResize = false; documentList = [ { name: 'test' }, { name: 'test1' }, { name: 'test2' }, { name: 'test3' }, { name: 'test4' }, { name: 'test5' }, { name: 'test6' }, ]; paperDocumentList = [ { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, ]; docusignDocumentList = [ { name: 'test', number: 'test', }, ]; noAction(event: any) { event.preventDefault(); return false; } } HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5" (onResizeEnd)="noAction($event)" (onResizeStart)="noAction($event)" > <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0"> <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="number"> Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name"> Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type"> Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber"> Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate"> Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number"> Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> Stackblitz 演示

以角度方式滚动到顶部功能，primeng 表不起作用

我有以下问题： 我使用 PrimeNG 在 Angular 中实现了一个分页表。我希望切换页面时自动滚动到顶部。 我已经尝试过 window.scroll ...

滚动到 Angular 中的表格行

我使用 Angular 和 PrimeNG 来显示表格。我希望发生的是，当页面加载或路由片段更改时，表格将滚动到相应的行。对于

可编辑数据表中的多行文本框？

我在可编辑模式下使用PrimeNG DataTable。默认情况下，每个单元格中有一个单行文本框。 我使用自动换行：break-word；我的数据表中的样式，结果如下： 然而，当我...

PrimeNg <p-table>排序

我正在使用 primeNg 。我想实现数据排序。我所做的如下 排序.HTML 我正在使用 primeNg <p-table>。我想实现数据排序。我所做的如下 排序.HTML <p-table [columns]="cols" [value]="documents"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [pSortableColumn]="col.field"> {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td> {{doc.sName}} </td> <td> {{doc.sYear}} </td> <td> {{doc.sAge}} </td> <td> {{doc.sColor}} </td> </tr> </ng-template> </p-table> 排序.ts this.cols = [ { field: 'name', header: 'Name' }, { field: 'year', header: 'Year' }, { field: 'age', header: 'Age' }, { field: 'color', header: 'Color' } ]; ngOnInit(){ //made a service call and got data for this.documents=[{ "sName":"Jhon", "sYear":"1994", "sAge":"20", "sColor":"Red" }, { "sName":"Sam", "sYear":"1996", "sAge":"25", "sColor":"Red" }, { "sName":"Anna", "sYear":"1991", "sAge":"21", "sColor":"Green" }, { "sName":"Jhon", "sYear":"1999", "sAge":"25", "sColor":"Blue" }, { "sName":"Betty", "sYear":"1993", "sAge":"35", "sColor":"Red" }] } 目前只有Name字段进行排序，如何在其他列中也实现排序？我使用了 [pSortableColumn] 但列没有排序，我错过了某些点。你能指导我哪里错了吗？ PS：我无法使用<p-dataTable>。 要使用带有固定列的 Turbo 表/p 表进行排序，请尝试以下代码 <p-table #dt [value]="data"> <ng-template pTemplate="header"> <tr> <th [pSortableColumn]="'Name'">Name <p-sortIcon [field]="'Name'"></p-sortIcon> </th> <th [pSortableColumn]="'Age'">Age <p-sortIcon [field]="'Age'"></p-sortIcon> </th> <th [pSortableColumn]="'Height'">Height <p-sortIcon [field]="'Height'"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-col> <tr> <td>{{col.Name}}</td> <td>{{col.Age}}</td> <td>{{col.Height}}</td> </tr> </ng-template> </p-table> 如果我的问题是正确的，那么您并不是要求能够同时对多个列进行排序，而是简单地排序是行不通的。 在您的代码中，问题在于您在表标题中指定要排序的以下列字段： [pSortableColumn]="col.field" 这些字段定义为： this.cols = [ { field: 'name', header: 'Name' }, { field: 'year', header: 'Year' }, { field: 'age', header: 'Age' }, { field: 'color', header: 'Color' } ]; 但是您的数据以不同的名称到达： this.documents=[{ "sName":"Jhon", "sYear":"1994", "sAge":"20", "sColor":"Red" }, [...] "name" != "sName" 因此您的表无法对数据进行排序。 事实上，我很惊讶你说“名称”列是可排序的。 只需更改定义，代码即可运行。 无论如何，为了允许多列排序，我建议将代码更改为： <p-table [columns]="cols" [value]="documents" sortMode="multiple"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [pSortableColumn]="col.field"> {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc let-columns="columns"> <tr> <td *ngFor="let col of columns"> {{doc[col.field]}} </td> </tr> </ng-template> </p-table> 它也更轻，不需要更改 ts 文件，即使您从 Web 服务获取数据，因为从 html 文件的角度来看，您始终传递“文档”对象。 您需要启用多重模式才能使用 sortMode="multiple" 进行排序 - <p-table [columns]="cols" [value]="documents" sortMode="multiple"> 默认对单列执行排序，为了启用多字段排序，请将 sortMode 属性设置为“multiple”，并在点击另一列时使用metakey。 有关更多信息，请参阅文档 - https://primefaces.org/primeng/#/table TurboTable 还可以 <div class="table-responsive "> <p-table #turboTable [value]="claims" [rowHover]="true" [paginator]="true" [rows]="20" [showCurrentPageReport]="true" [first]="first" currentPageReportTemplate="Reclamos de {first} a {last} de {totalRecords} registros" [rowsPerPageOptions]="[10,25,50]"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="id" width="8%">ID <p-sortIcon field="id"></p-sortIcon></th> <th pSortableColumn="code" width="15%">CODE <p-sortIcon field="code"></p-sortIcon></th> <th pSortableColumn="customerClaimDate" width="18%">FECHA RECLAMO CLIENTE <p-sortIcon field="customerClaimDate"></p-sortIcon></th> <th pSortableColumn="claimDate" width="18%">FECHA CREACIÓN RECLAMO <p-sortIcon field="claimDate"></p-sortIcon></th> <th pSortableColumn="maximumResponseDate" width="15%">FECHA MAX RESPUESTA <p-sortIcon field="maximumResponseDate"></p-sortIcon></th> <th pSortableColumn="assignedUserName" width="17%">DERIVADO A <p-sortIcon field="assignedUserName" ></p-sortIcon></th> <th pSortableColumn="state" width="10%">ESTADO <p-sortIcon field="state"></p-sortIcon></th> </tr> </ng-template> <ng-template pTemplate="body" let-tblreclamos> <tr> <td> <span>{{ tblreclamos.id }}</span> </td> <td> <span><a [routerLink]="['edicion', tblreclamos.id]">{{ tblreclamos.code }}</a></span> </td> <td> <span>{{ tblreclamos.customerClaimDate }}</span> </td> <td> <span>{{ tblreclamos.claimDate }}</span> </td> <td> <span>{{ tblreclamos.maximumResponseDate }}</span> </td> <td> <span>{{ tblreclamos.assignedUserName }}</span> </td> <td> <span> <span [class]="'customer-badge'" *ngIf="tblreclamos.state==53">Borrador</span> <span [class]="'customer-badge status-warning'" *ngIf="tblreclamos.state==54">Pendiente</span> <span [class]="'customer-badge status-success'" *ngIf="tblreclamos.state== 55">Resuelto</span> <span [class]="'customer-badge status-danger'" *ngIf="tblreclamos.state==56">Anulado</span> </span> </td> </tr> </ng-template> </p-table> </div> customSort(event: SortEvent) { if (this.isSorted == null || this.isSorted === undefined) { this.isSorted = true; this.sortTableData(event); } else if (this.isSorted == true) { this.isSorted = false; this.sortTableData(event); } else if (this.isSorted == false) { this.isSorted = null; this.products = [...this.initialValue]; this.dt.reset(); } } sortTableData(event) { event.data.sort((data1, data2) => { let value1 = data1[event.field]; let value2 = data2[event.field]; let result = null; if (value1 == null && value2 != null) result = -1; else if (value1 != null && value2 == null) result = 1; else if (value1 == null && value2 == null) result = 0; else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2); else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; return event.order * result; }); }

如何让虚拟滚动和分页一起工作primeng

我有一个场景，我需要在 primeng 数据网格中一次显示 150 条记录，但它在 50 条记录后开始冻结，因为在我的网格中，我有 18 列，所以它占用了大量内存和其他...

当行在 Angular 中动态渲染时如何将冻结列添加到 primeNG

我正在寻求帮助，以在我的 primeng 表中添加冻结列功能，其中列和行是动态呈现的。 我确实有一个配置（isPK：true），它来自我想要的数据......