标签: primeng-datatable

我需要根据条件禁用priming数据表中的几个复选框：

例如：

<p-column *ngFor="let col of cols; let i = index" [field]="col.field" [header]="col.header" [styleClass]="col.class" selectionMode="{{col.header==fields.BULKACTIONS.header ? 'multiple': ''}}" [disabled]="isDisabled()">

但这似乎不起作用。在primeng论坛上有针对相同功能的请求：https ://forum.primefaces.org/viewtopic.php ? f = 35 & t = 47101 & p = 155122 & hilit = disable#p155122

有人为此做过黑客吗？

我正在使用 PrimeNG，并将全局过滤器添加到我的表中：

 <input #gb type="text" pInputText size="50" placeholder="Filter">

数据表：

<p-dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">

我需要向已过滤的用户发送邮件。然而，我注意到用户计数（用户数量）不会在过滤器时更新。

记录根据表中的过滤器正确显示，但向这些用户发送邮件会将邮件发送给从数据库检索到的所有用户。

有没有办法使用 PrimeNG 过滤器选项在过滤器上更新实际用户的数量？

我使用PrimeNG创建了一个数据表.我刚为数据表创建了2个标题.我实际上将从服务器获取数据,因此如果没有数据,我不希望显示默认的"找不到记录消息".

如果表中没有数据,我希望表是空的.

请看一下我在下面创建的表格:

<p-dataTable>
       <p-headerColumnGroup >
         <p-row>
           <p-column header="Weekday"></p-column>
           <p-column header="Set Class Time"></p-column>

         </p-row>
       </p-headerColumnGroup>
 </p-dataTable>

我需要在 PrimeNG 数据表中显示大量数据（400.000 条记录）。为此，我需要一个延迟加载表，因为您无法一次将所有数据加载到表中（这会使浏览器崩溃）。

为了创建表，我使用了以下技术：

• 角 7.2.4
• 角/cdk 7.3.1
• ngrx-data 6.1.0-beta.3（Ngrx http 请求包装器）
• PrimeNG 7.0.5（用户界面框架）
• 接收器 6.4.0

我想要什么

我正在尝试创建一个延迟加载表，如PrimeNG 文档中所示，其中数据从服务器加载并显示在表中。当用户导航到下一个选项卡时，将加载并显示下一个 x 数据量。

唯一的区别是我从服务器获取所有数据，然后再将其提供给表组件。这样我只需要从数据源中选择某些数据并将其显示给用户。

问题

在尝试实现它时，我遇到了一个问题，即在从服务器加载数据之前的阶段，该(onLazyLoad)函数仅被调用一次onInit()。

我可以通过添加来撤消此操作[lazyLoadOnInit]="false"，但这会导致根本不会调用延迟加载函数。我希望我可以通过在[totalRecords]加载数据时更改属性来触发加载功能，但这也不会触发该功能。

我在PrimeNG p-table 代码中找不到可用于触发 的任何其他函数(onLazyLoad)，还是我遗漏了什么？

代码

public ngOnInit(): void {
  this.cars$ = this.carService.entities$; // = []
  this.carService.getAll(); // = [Car, Car, Car, Car] OR []
}

this.carService.entities$有一个默认值，[]并用getAll()函数的结果填充（[]如果没有结果，这也可以）

我在StackBlitz 中重现了我的问题。在这里您可以看到数据从未显示，因为(onLazyLoad) …

我正在尝试使用 primeng 对大量数据实现延迟加载<p-datatable>。我已经完成了官方网站上记录的所有内容，但是我无法使其工作。

回调onLazyLoad仅在加载表时运行一次。它不会按预期在每次滚动时触发。

<div style="max-height:300px; border:1px solid black;overflow-y:auto">
      <p-dataTable #pocListref [value]="data" rowHover="true" [(selection)] = "selectedData" scrollable="true" scrollHeight="200px" [rows]="4"
      [style]="{'margin-top':'30px'}"  [paginator]="true" [rowsPerPageOptions]="[5,10,20]"
        [lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="lazyLoad($event)">
        <p-column header="Id">
        <ng-template pTemplate="body" let-index="rowIndex">
            {{index}}
        </ng-template>
        </p-column>
        <p-column  selectionMode="multiple" [style]="{'width':'5%'}"></p-column>
        <p-column field="name" header="Name"[sortable]="true"></p-column>
        <p-column field="age" header="Age" [sortable]="true"></p-column>
        <p-column field="company" header="Company" [sortable]="true"></p-column>
      </p-dataTable>
  </div>

对于分页器实现来说，同样可以正常工作。我注意到，仅当我不使用属性时，它才适用于分页器virtualScroll，这是有道理的，但不知何故 virtualScroll 不会对滚动产生任何影响。

我知道已经有类似的问题，但仍然得到回答。

有人成功使用虚拟滚动和延迟加载吗？任何建议都会有用的。

考虑一个场景，我在p-dataTable列中显示 START 和 END YEAR 。

这是列代码片段：

<p-column field="startYear" header="Active Period" filterPlaceholder="Search" [filter]="true">
  <ng-template let-col let-manual="rowData" pTemplate="body">
    {{record.startYear}} - {{record.endYear}}
  </ng-template>
</p-column>

其中显示为：

|--------------|
| ActivePeriod |
|--------------|
|2015 - 2017   |
|--------------|
|2012 - 2016   |
|--------------|
|2023 - 2025   |
|--------------|
|2024 - 2030   |
|--------------|
|2011 - 2013   |
|--------------|

我想应用自定义过滤器，以便当用户输入 YEAR 时，该表应该只显示属于该活动期间的记录。

这意味着我必须编写一个逻辑来检查用户搜索的年份是否在每个活动期之间。

我怎样才能做到这一点？

我正在将 PrimeNG DataTable 与 Angular 一起使用，并尝试实现类似于此StackBlitz 的内容。

如何在我尝试编辑的行上添加必填字段验证器？基本上，当他们编辑评论时，我需要确保他们输入了文本。

HTML

<p-table #dt  [value]="iToDoList" dataKey="ID"  [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10">
     <ng-template pTemplate="header">
         <tr>
            <th>ID</th>
            <th>Comment</th>
            <th>Action</th>
         </tr>
     </ng-template>
     <ng-template pTemplate="body" let-row>  
         <tr>
            <td>{{row.ID}}</td>
            <td>
                <div  *ngIf="!row.isEditable">{{row.Comment}}</div>
                <div *ngIf="row.isEditable">
                     <input type="text" [(ngModel)]="row.comment">
                </div>
            </td>
            <td><button (click)="editRow(row)">Edit</button></td>
            <td>                                
               <button (click)="save(row)">Save</button>
            </td>
          </tr>
     </ng-template>
</p-table>

组件.ts

iToDoList: IToDoList[] = null;

ngOnInit(): void {
     this.GetToDoList(this.userID);
}

GetToDoList(ID: string) {
    this._dashboardService.getToDoList(ID)
            .subscribe(
            data => {
                this.iToDoList = data.result;
                data.map(row => {
                    row.isEditable = false;
                });    
            },
    error …

此处的链接https://www.primefaces.org/primeng/#/table/rowexpansionp-table显示了可以通过单击使用指令的第一列来展开行的示例pRowToggler。

我试图通过单击行上任意位置的行来实现这种切换。

我曾尝试寻找这样的例子，但找不到。[pRowToggler]我也尝试过在该行上使用ng-template，但这也不起作用。

有人可以指导我如何实现这种行为吗？

我在 Angular Material 扩展面板中遇到了这个问题。部分分页下拉菜单被切断。如何使下拉菜单与扩展面板的末端重叠？我尝试z-index过但没有成功。

Material Accordion 内部包含三个面板。

这是相关代码：

<mat-accordion class="example-headers-align" multi>
            <mat-expansion-panel hideToggle>
              <mat-expansion-panel-header>
                <mat-panel-title>
                Title
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p-table
                #dt
                [columns]="cols"
                [value]="tableDataSummary"
                [paginator]="false"
                scrollable="true"
                sortMode="multiple"
                [resizableColumns]="true"
                [rowHover]="true"
                [rows]="10"
                scrollable="true"
                resizableColumns="true"
                [rowsPerPageOptions]="[10,100]"
                appendTo="body"
                [paginator]="true"
              >
                <ng-template pTemplate="header" let-columns>
                  <tr>
                    <th pSortableColumn="col" *ngFor="let col of columns">
                      {{col.header}}
                    </th>
                  </tr>
                  <tr>
                    <th
                      *ngFor="let col of columns"
                      [ngSwitch]="col.field"
                      [pSortableColumn]="col.field"
                    >
                      <p-sortIcon [field]="'col.field'"></p-sortIcon>
                    </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                  <tr [pSelectableRow]="rowData">
                    <td
                      *ngFor="let col of columns"
                      style="line-break: anywhere;"
                    >
                      <span
                        *ngIf="col.field === …

我需要在视图加载时过滤表。

例如，我有一个包含 5 列的表 ( Woid, Customer, AdapterID, Assignee, Status)。加载时，我想woid使用过滤列'contains'。我完成了过滤onLoad，但是当我稍后想再次过滤该列时，出现错误：

[i]'找不到类型为'object'的不同支持对象'[object Object]'。NgFor 仅支持绑定到可迭代对象，例如数组。'[/i]

程序代码如下...

@ViewChild('dt', { static: true }) dt: any;
ngOnInit() {
    this.dt.filter('22', 'woid', 'contains');
}

另外，通过 .ts 代码（woid过滤器）过滤并直接使用PrimeNG Angular 集合中的<p-columnFilter>（customer过滤器）查看后，我得到了这个 JSON。woid 属性不是数组，与 custom 不同的是。onFiltering方法和 JSON 下面。

onFiltering(event: any) {
    console.log('Filtered value: '+ JSON.stringify(event.filters));
}


{
    "woid": {
        "value": "22",
        "matchMode": "contains"
    },
    "customer": [{
        "value": "2",
        "matchMode": …