我目前正在开发Angular 4项目并使用PrimeNG DataTable.到目前为止,这个框架看起来很整洁,但我想让我的分页服务器端.这样我一次只加载10,20,..记录,而不是一次加载所有1000+.
有没有人之前做过这个或有没有人知道这个解决方案？
PS:如果你没有解决方案,但知道一个支持这个的框架,请告诉我!
我在网上搜索了一个使用 rowTrackBy 的 Primeng 数据表示例。文档不完整，没有说太多。有没有人可以帮忙？
嗨，我正在尝试将我的PrimeNG数据表转换为Turbo表。实际上，我已经[hidden]="!cols.visibility"在PrimeNG中使用 了我的数据表。现在，我应该使用什么来实现Turbo表中的相同功能。
以前的数据表列代码：
<p-column *ngFor="let col of cols" [hidden]="!col.visibility" [field]="col.field" [header]="col.header"></p-column>
？文档URL：https : //www.primefaces.org/primeng/#/datatable
新的Turbo表列代码：
<ng-template pTemplate="header" let-cols>
<tr>
<th style="width: 2.25em"></th>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
？文档URL：https : //www.primefaces.org/primeng/#/table
我应该使用什么？我也检查了文档，但没有找到解决方案。
我正在使用primeNg <p-table>。我想实现数据排序。我所做的如下
排序
<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>
排序
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 …我有一个页面，它只有一个用户的东西。但是现在我必须创建一个表并且我需要获取数据，所以在表中我必须有内联的编辑和删除按钮。如果我点击编辑按钮，那么我必须能够编辑整行，删除意味着必须删除整行。当我单击“新建”按钮时，它必须为我创建一个包含编辑和删除操作的新行。我需要使用 ng-prime 本身来执行此操作。所以，任何人都可以帮助我提供链接或任何演示。
我正在使用Primeng 表，并尝试使用列“重新排序”功能，但没有成功。
当我移动列时，会显示“箭头”图像，但是当我将列放在其他位置时 - 没有任何反应（该列仍位于“先前位置”）。
<div class="container">
<p-table #dt [value]="pagedTasks"
[paginator]="true"
[rows]="pageSize"
[first]="first"
[lazy]="true"
[totalRecords]="totalRecords"
[autoLayout]="true"
(onLazyLoad)="loadTasksLazy($event)"
[responsive]="true"
sortField="id"
sortOrder="-1"
[reorderableColumns]="true"
>
<ng-template pTemplate="caption">
...
/ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of cols" [pSortableColumn]="col.field" pReorderableColumn>
<div *ngIf="col.field !== 'actions'">
{{ col.header }}
<p-sortIcon [field]="col.field"></p-sortIcon>
</div>
<div *ngIf="col.field === 'actions'">
<fa name="file-code"></fa>
</div>
</th>
</tr>
...
</p-table>
</div>
如您所见，我正在使用[reorderableColumns]="true"in p-tableelement 和pReorderableColumnon thelement。我错过了什么吗？
我在尝试将数据获取到叠加层时遇到问题。我哪里出错了？
我的目标是从用户数组中获取数据（如 cId、记录的时间）并将其显示在我的表格中。
<button
[disabled]="false"
(click)="op1.show($event)"
pButton
type="button"
class="ui-button-primary"
label="View"
></button>
<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
<p-table [value]="day" [style]="{ width: '400px' }" [rows]="5">
<ng-template pTemplate="header">
<tr>
<td class="headerItem">{{ wbsElement }}</td>
<td class="headerItem">{{ saturday }}</td>
<td class="headerItem">{{ sunday }}</td>
...
<td class="headerItem">{{ total }}</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-day>
<tr>
<td>{{ user.cId }}</td>
<td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
<td>{{ totalHours }}</td>
</tr>
</ng-template>
</p-table>
</p-overlayPanel>
上面我有我的模板，应该创建我的叠加层，如下所示
wbsElement = Constants.WBS_ELEMENT;
saturday = Day.SATURDAY;
sunday = Day.SUNDAY;
monday = Day.MONDAY;
... …我实际上需要遍历到另一个组件，其中单击行时选择了数据。我一直在使用 p-table 来执行相同的操作。我完全不知道为什么。onRowClick / onRowSelection 根本不会被触发。我什至添加了一个 console.log 字符串来查看方法是否至少被调用，但事实并非如此。甚至[(选择)]表现也不佳。p-table 没有问题，因为分页和全局过滤器实际上运行良好并且没有任何问题。但这是我无法弄清楚为什么。素萌版"primeng": "^7.1.3"
<p-table [columns]="cols" [value]="companiesList" selectionMode="single"
(onRowClick)="handleSelect($event)"
>
<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-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
我有一张primeng桌子。当我单击按钮时，我希望选择所有行。
html:
<p-table [columns]="columns" [value]="values"
selectionMode="multiple" [(selection)]="selectedValues"
(onRowSelect)=selectRow(selectedValues)
(onRowUnselect)="unselectRow($event)" #table>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-val>
<tr [pSelectableRow]="val">
<td *ngFor="let col of columns">
{{val[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
<div class="table-button">
<p-button (onClick)="selectAll()">Select All</p-button>
<p-button>Remove</p-button>
</div>
打字稿：
import {Component, OnInit, ViewChild} from '@angular/core';
import {Model} from "../../models/model.model";
@Component({
selector: 'app-comp',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {
@ViewChild('table', {static: false}) table;
//left out for now
//values: Model[]; …PRIMENG 是 Angular 的组件库，我目前正在使用他们的p-table组件来显示数据库中的数据。表中显示的一列包含一个布尔值，我希望true该列过滤器有一个默认值。
下面是该表的 HTML 示例：
<p-table class="my-table"
[value]="(myValues$ | async)!"
[scrollable]="true"
scrollHeight="flex"
[virtualScroll]="true"
selectionMode="single">
<ng-template pTemplate="header">
<tr>
<th>
Some Boolean
<div>
<!--
How can I set the filter to only show
items where someBoolean == true by default?
-->
<p-columnFilter type="boolean" field="someBoolean"></p-columnFilter>
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-val>
<tr [pSelectableRow]="val">
<td>
<i class="pi" [ngClass]="{'true-icon pi-check': val.someBoolean, 'false-icon pi-times': !val.someBoolean}"></i>
</td>
</tr>
</ng-template>
</p-table>
该属性myValues$是一个Observable<MyValue[]>并且MyValue类似于：
export interface MyValue …