primeng-datatable 相关问题

滚动到 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），它来自我想要的数据......

Primeng 15 如何覆盖 Angular 15 中的默认排序图标

我在 Angular 15 中使用 Primeng 15.4。你能帮忙覆盖默认图标吗？ 我尝试了以下 2 个解决方案，但没有任何效果 我在 Angular 15 中使用 Primeng 15.4。你能帮忙覆盖默认图标吗？ 我尝试了以下 2 个解决方案，但没有任何效果 <p-sortIcon class="icon" sortAscIcon="pi-sort-up" sortDescIcon="pi-sort-down" sortNoneIcon="pi-sort-alt" [field]="col.field"></p-sortIcon> 和 p-sortIcon class="{'pi pi-arrow-up': sortOrder === 1, 'pi pi-arrow-up': sortOrder === -1, 'pi pi-arrow-up': sortOrder === 0}" [field]="col.field"></p-sortIcon> 您尝试过的方法不起作用，因为它不在 primeng 中：Github 问题。您可以从这里尝试CSS解决方案 您可以像下面这样覆盖它， p-sortIcon { .p-iconwrapper { font-family: 'primeicons', Arial, sans-serif; justify-content: center; font-size: 19px; &:before{ content: '\e900'; /* modify as per your requirement */ } svg { display: none; } } sortamountupalticon.p-iconwrapper:before { content: '\e900'; /* modify as per your requirement */ } sortamountdownicon.p-iconwrapper:before { content: '\e900'; /* modify as per your requirement */ } } 在上面的例子中，我们使用 primeicons 覆盖图标。您可以根据您的要求进行修改。

粘性标题不适用于 Primeng 中可调整大小的列。？

我正在尝试实现列调整大小和粘贴标题。但如果我不使用列调整大小，粘性标题就可以正常工作。如果我同时实现这两个功能，则列调整大小可以正常工作，但粘性标题不起作用...

如何将工具提示添加到 primeNG 表中的特定标题列

Html HTML <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{col.header}} </th> </tr> </ng-template> </p-table> TS export class Table implements OnInit { cols: any[]; ngOnInit() { this.cols = [ { field: 'year', header: 'Year' }, { field: 'brand', header: 'Brand' }, { field: 'color', header: 'Color' } ];}} 我只想为品牌栏显示工具提示 在 Angular 9.1.3 上使用 PrimeNG 9.2.1 版本 使用 primeNg 工具提示 docs <th *ngFor="let col of columns" [pTooltip]="col.field === 'brand' ? col.header : null"> {{col.header}} </th> 根据需要放置实际的工具提示值，而不是在 col.header 之后放置 ?。 您可以更新 cols 以包含一些 pTooltip 值。 组件 this.cols = [ { field: 'year', header: 'Year' , tooltip: 'Year 📅'}, { field: 'brand', header: 'Brand' }, { field: 'color', header: 'Color' , tooltip: 'Color of 🧙‍♂️'} ]; 模板 <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [pTooltip]="col.tooltip"> {{col.header}} </th> </tr> </ng-template> stackblitz 演示

使用primeNG表格时，如何在点击另一行时退出行编辑

我知道 primeNG 使用 让编辑=“编辑” 我知道 primeNG 使用 let-editing="editing" <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button> <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success mr-2"></button> <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button> 做某事。 但是我怎样才能完成我所需要的标题。 <td style='width: 160px;' pCancelEditableRow> {{field.fName}} </td> 我尝试添加顶部代码来做一些粗暴的事情。 以下是在单击 PrimeNG 表中的另一行时实现退出行编辑所需行为的代码： <p-table [value]="products" dataKey="id"> <ng-template pTemplate="header"> <tr> <th></th> <th>Name</th> <th>Price</th> <th>Action</th> </tr> </ng-template> <ng-template pTemplate="body" let-product let-rowIndex="rowIndex" let-editing="editing"> <tr [pEditableRow]="product" [pEditing]="editing"> <td> <button *ngIf="!editing" pButton type="button" icon="pi pi-pencil" (click)="onRowEditInit(product, rowIndex)" class="p-button-rounded p-button-text"></button> <button *ngIf="editing" pButton type="button" icon="pi pi-check" (click)="onRowEditSave(product, rowIndex)" class="p-button-rounded p-button-text p-button-success mr-2"></button> <button *ngIf="editing" pButton type="button" icon="pi pi-times" (click)="onRowEditCancel(product, rowIndex)" class="p-button-rounded p-button-text p-button-danger"></button> </td> <td> <div *ngIf="!editing; else editMode"> {{ product.name }} </div> <ng-template #editMode> <input type="text" [(ngModel)]="product.name"> </ng-template> </td> <td> <div *ngIf="!editing; else editMode"> {{ product.price }} </div> <ng-template #editMode> <input type="text" [(ngModel)]="product.price"> </ng-template> </td> <td> <button *ngIf="editing && rowIndex !== editingRowIndex" pButton type="button" icon="pi pi-check" (click)="onRowEditSave(products[editingRowIndex], editingRowIndex)" class="p-button-rounded p-button-text p-button-success"></button> <button *ngIf="editing && rowIndex !== editingRowIndex" pButton type="button" icon="pi pi-times" (click)="onRowEditCancel(products[editingRowIndex], editingRowIndex)" class="p-button-rounded p-button-text p-button-danger"></button> </td> </tr> </ng-template> </p-table> 在此代码中，我对您现有的代码进行了一些修改。关键的变化是我在每行的“保存”和“取消”按钮中添加了一个条件 rowIndex !== editingRowIndex。此条件可确保仅当当前正在编辑的行与您单击的行不同时才显示保存或取消编辑的按钮。这样，点击另一行就会退出上一行的编辑模式。 editingRowIndex 变量用于跟踪当前正在编辑的行。

PrimeNG 表 - 将类应用于行但背景颜色不起作用

我正在使用 PrimeNG 表 。 它具有虚拟滚动和可选择的行。 我想根据数据中的某个整数值使行背景颜色变量。 使用这个建议...

使用 P-dropdown 组件过滤 Value 选项在组件初始化时不会设置默认过滤值

我正在使用 primeng p-drowpdown 组件来过滤表格，它的选项是动态出现的 我想设置一个默认的过滤选项，以便在组件初始化时表日期将为

Primeng 表 - 是否可以结合双向滚动和虚拟滚动？

是否可以使用双向滚动和虚拟滚动的表格？ 例如。如果我使用： 是否可以使用双向滚动和虚拟滚动的表格？ 例如如果我使用： <p-table [columns]="startColumns" [value]="data" [scrollable]="true" scrollHeight="400px" scrollDirection="both"> 一切都按预期工作，但一旦我添加虚拟滚动，如： <p-table [columns]="startColumns" [value]="data" [scrollable]="true" scrollHeight="400px" scrollDirection="both" [rows]="100" [virtualScroll]="true" [virtualRowHeight]="40" > 水平滚动条不见了。 删除这个 [行]="100" 而不是 [virtualRowHeight]="40" 使用 [virtualScrollItemSize]="40"

如何使用 primereact 中的 Splitbutton 获取数据表行数据/对象

我对 ReactJs 很陌生，正在尝试制作一个项目来学习。我正在使用 PrimeReact UI 组件库。一切正常，但面临将行数据访问到函数中的问题。

集成primeng后无法构建项目angular

我尝试将“primeicons”：“^5.0.0”，“primeng”：“^13.4.1”与angular 13集成，我正确安装了包，在app.mo中添加了导入之后......

Primeng Treetable中不同的儿童级标题。

如何实现一个 primeng 树表的不同子级表头？我使用的是angular 7和primeng V7，数据如下。{ "label": "Parent 1", "data":{ "name":" ...

将包含动态数据的json字符串作为源传递给primeNG数据化。

我将从服务中动态获取json，如下所示。{"项目":[[{"key": "SerialID", "value": "P1.M1.T1"},{"key": "描述", "值": "Dummy Desc 1"},{ "key": "Label", "value": "A123"}],[{...

当集成到第三方应用程序时，在PrimeNG的输入框上不能使用退格键。

我正在使用PrimeNG创建基本组件。我已经在我的组件上添加了输入框。 如果我单独运行组件，输入框工作正常。然而，...

emptyMessage属性不显示

我需要显示一个消息，当lista数据值为空。

如何将primeng旧的dataTable转换为新的TurboTable？

试图将旧的primeNG dataTable转换为新的primeNG TurboTable用于旧的应用程序，似乎我们不能再使用p-column了，这里的代码给我带来了麻烦，任何帮助都将是... ...

无法在primeng表格中使用粘性标题。

我试图使用粘性头和P-table。然而，我不能这样做。我使用的是他们文档中提到的css。我使用的是primeng 7。请帮助我。先谢谢你。...