标签: primeng-datatable

我在我的项目设置中使用Primeng数据表.但我想要所有行的第一列是超链接,以便我可以使用[routerLink](角度2方式)将它们链接到下一页.我很难实现...

有什么方法可以解决这个问题吗？

提前致谢!

错误TypeError：

val.slice不是函数

dataTable配置

$.p-dataTable #dt [value]="customers" [(selection)]="chkBoxSelect" 
 dataKey="customerId" [rows]="10" [paginator]="true" 
 paginatorPosition="both" [pageLinks]="5" [rowsPerPageOptions]="[5,10,20]" 
 [globalFilter]="gb" [headerCheckboxToggleAllPages]="false" 
 [editable]="true" exportFilename="customers" [lazy]="true" 
 [totalRecords]="totalRecords" onLazyLoad)="loadCustomersByPage($event)"

回拨功能

$loadCustomersByPage(event: LazyLoadEvent) {

    const parameters = "?page=" + event.first + "&size=" + (event.first + event.rows);

     this._cs.findAllActiveCustomerDetailsByPage(parameters).subscribe(
       (data: any) => {
         this.customers = data;
       },
       (error) => {
          console.log("--error--" + error)
       }
  );
}

我正在使用PrimeNG数据表供我使用。下面是我的代码：

<p-dataTable [value]="alerts" [expandableRows]="true" [expandedRows]="expandedItems" #dt>
 <p-column expander="true"></p-column>
</p-dataTable>

如何更改行扩展器的默认图标？

我想在DataTable单元格primeNg中隐藏溢出文本,但似乎没有任何效果.我没有找到任何可以帮助我的文档.

  <p-dataTable #dataTable 
tableStyleClass="defaultDataTable"
[value]="rows | async"
resizableColumns="false"
reorderableColumns="true" 
responsive="true"
[rowHover]="true" 
[(selection)]="selectedRows"
[rowStyleClass]="getRowClass" 
[loading] = "loading"
(onRowClick)="onSelect($event)" 
(onRowSelect)="onSelect($event)" 
(onRowUnselect)="onSelect($event)"
(onRowDblclick)="onRowDblclick($event)" 
(onHeaderCheckboxToggle)="checkAll($event)">
<p-footer class="table-footer p-text-muted" *ngIf="showFooter">
  <ng-container i18n> {{footerText}}: {{dataTable?.dataToRender?.length || 0}} </ng-container>
</p-footer>
<p-column *ngIf="hasCheckboxColumn == true" [field]="IsSelected" [header]="" selectionMode="multiple"
  onclick="checkAll($event)" [sortable]="false" ></p-column>
      <p-column *ngFor="let column of columns" [field]="column.prop" [style] = "{width: '20%'}" [header]="column.name" [hidden]="!column.visible" [sortable]="isLockColumn(column.name) == false"  >
          <ng-template let-col let-row="rowData" pTemplate="body">
            <div *ngIf="isValueBoolean(row[col.field]); else renderValue" align="center" title=" ">
              <md-checkbox [(ngModel)]="row[col.field]" (change)="lockColumnChecked($event, row)" style = "width:20%;text-overflow: ellipsis;" [disabled]="true"></md-checkbox>
            </div> …

我有一个PrimeNG grid，由所PrimeNG提供的数据来自具有服务器端分页数据的服务，而从服务器中我们将仅收到当前页面记录。

我的HTML代码如下：

 <p-dataTable *ngIf="displayTable" #dataTable [value]="JSONArray"
            [lazy]="true" [responsive]="true" [rows]="10"
            [paginator]="true" selectionMode="single" 
            [(selection)]="selectedEvent" 
            (onRowSelect)="onRowSelect($event)" 
            [pageLinks]="5" [(first)] = "first"
            class="ui-datatable-scrollable-wrapper view-table" 
            [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
            <p-header>
                <div class="ui-helper-clearfix">
                    <button type="button" pButton icon="fa-file-o" iconPos="left"
                  label="CSV" (click)="dataTable.exportCSV()" style="float:left">
                    </button>
                </div>
            </p-header>
            <p-column field="col1" header="Column 1"></p-column>
            <p-column field="col2" header="Column 2"></p-column>
            <p-footer>
                <div>
                </div>
            </p-footer>
</p-dataTable>

JSONArray变量只有10条记录（我的页面大小），但是我们要从服务器导出所有数据。假设我有5页，我想导出所有50条记录。

dataTable.exportCSV()仅导出我当前的第10页记录。有什么办法可以导出全部50条记录？

https://www.primefaces.org/primeng/#/datatable/scroll

PrimeNG 提供延迟加载，可在 scrollDown 和 ScrollUp 上刷新数据。我想实现无限滚动，它在 scrollDown 上逐页从服务器获取数据，并在我 scrollUp 时保留该数据。

PrimeNG 网站上没有此类文档。我如何使用 PrimeNG 实现它？

谢谢。

过滤日期范围 || 数据表

我需要一些有关如何过滤日期范围的帮助。

我想搜索在搜索输入中创建的日期，但似乎不起作用。没有找到记录。我正在搜索有关自定义过滤器的信息，但是我很难做到这一点。

我正在使用momentjs。

我在表中使用 p-autoComplete，一旦选择了一行，我的自动完成应该预先选择当前值。我尝试使用 [(ngModel)]="row.bsaName" 但它不起作用。（单击下拉菜单后，我会看到所有值，我确认这些值确实存在于我的 p-autoComplete 下拉菜单中）

另请注意，我使用了 p-calendar，一旦单击编辑，我就可以预先选择当前日期，并且不确定为什么自动完成不同

人TML

        <p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                     [rows]="10">

                <ng-template pTemplate="header">
                    <tr>
                        <th>ID</th>
                        <th>Followup DT</th>
                        <th>Comment</th>
                        <th>BSA Name</th>
                        <th>Action</th>

                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-row>
                    <tr>
                        <td>{{row.ID}}</td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-calendar name="followupDate" [(ngModel)]="row.followupDate"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
                            <div *ngIf="row.isBSAEditable">
                                                                       <input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200">
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" …

我有一个 primeng 数据表，它在正常模式下正确呈现。但是，当我在移动视图中查看时，不显示表格标题。我将表的响应属性设置为 true。请看截图。

我在另一个屏幕的移动视图中正确显示了数据表的标题。我比较了代码，它们很相似，只是这个表有一个全局过滤器。

我的组件html代码：

<p-table
  #dt
  [columns]="cols"
  [value]="deals"
  [autoLayout]="true"
  [responsive]="true"
>
  <ng-template pTemplate="caption">
    <div style="text-align: right">
      <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
      <input
        type="text"
        pInputText
        size="30"
        placeholder="Search"
        (input)="dt.filterGlobal($event.target.value, 'contains')"
      />
    </div>
  </ng-template>
  <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">
        <span *ngIf="col.header === 'Opportunity Id'"
          ><a routerLink="/proposal">{{ rowData[col.field] }}</a></span
        >
        <span *ngIf="col.header !== 'Opportunity Id'">{{
          rowData[col.field]
        }}</span> …

我正在使用 PrimeNG 开发 Angular 应用程序。特别是我正在使用 PrimeNG DataTable，这个组件：https ://primefaces.org/primeng/showcase/#/table

我按照之前官方文档所示的方式使用没有问题。基本上，我可以从 Firebase FireStore 数据库检索对象列表，然后以建议的方式将此对象列表使用到数据表 HTML 定义中，如下所示：

<p-table [value]="MY-RETRIEVED-OBJECT-LIST">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td *ngFor="let col of cols">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

我问是否有可能（以及如何）使用更具反应性的方法。

我尝试用一​​个例子来解释。在我的组件 TypeScript 代码中，我没有对象列表，但我有这个Observable：

employeesList$:Observable<Employee[]>;

在我的组件的ngOnInit()中，我有：

ngOnInit() {

    this.loadEmployeesList();
    ................................
    ................................
    ................................

}

这个loadEmployeesList()是一个组件方法，它只需调用一个服务类即可获取之前的EmployeesList$:Observable<Employee[]>对象：

async loadEmployeesList() {
    this.employeesList$ = await this.employeeService.getAllEmployees();
}

所以基本上以这种方式，我不会订阅 Observable 来检索必须传递给我的 PrimeNG 数据表定义的显式对象列表，但我有一个Observable发出Employee …