如何将 HTML 模板与primeng DataTables 一起使用？答案

【问题标题】：How can I use HTML Templates with primeng DataTables?如何将 HTML 模板与primeng DataTables 一起使用？
【发布时间】：2017-06-20 03:46:44
【问题描述】：

我正在使用Primeng的dataTable，但是找不到如何将HTML代码设置为标题的值。

我必须设置表的第一个标题是复选框/单选，但我只能使用 p-column 中的 header 属性添加文本

我知道 Datatable 中的模板。这个怎么用？

Here I want to set checkbox instead of text in header (first row)

有什么想法吗？

【问题讨论】：

标签： angular primeng

【解决方案1】：

普雷迪普，

PrimeNG Beta-11 于 7 月 26 日发布，支持选择模式作为单选和复选框的“单个”和“多个”选项。

单选按钮：

<p-column [style]="{'width':'38px'}" selectionMode="single"></p-column>

复选框：

<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>

您可以在这里找到详细信息 - http://www.primefaces.org/primeng/#/datatableselection

【讨论】：

【解决方案2】：

PrimeNG Beta.14 支持页眉和页脚部分的模板。

对应行的字段数据默认显示为单元格内容，可以使用模板自定义，其中传递给模板的隐式变量是列定义，当前行的数据是rowData属性。此外，可以使用可选的 rowIndex 变量访问当前的索引。同样，自定义内容可以放置在带有模板的列的页眉和页脚。

列中的模板必须使用 pTemplate 指令以及 type 属性进行修饰，以指示模板所属的位置。可能的值为“header”、“body”和“footer”。

<p-column field="color" header="Color">
    <template let-col #car="rowData" #ri="rowIndex" pTemplate type="body">
        <span">{{car[col.field]}}</span>
    </template>
</p-column>
<p-column>
    <template pTemplate type="header">
        <button type="button" pButton (click)="selectAllCars()" icon="fa-check"></button>
    </template>
    <template let-car="rowData" pTemplate type="body">
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
    </template>
</p-column>

【讨论】：

【解决方案3】：

从 Angular 4 和 PrimeNG 4 开始，模板已被弃用，取而代之的是 ng-template。

以下代码演示了如何使用 ng-template 向 PrimeNG p-dataTable 组件添加链接。

<p-dataTable [value]="myStore.myList | async">
<p-column field="name" header="Name">
  <ng-template let-col let-myItem="rowData" pTemplate="body">
    <a href="#" (click)="selectItem(myItem);">
      {{myItem[col.field]}}
    </a>
  </ng-template>
</p-column>
...

标签“let-col”通过上下文变量 $implicit 使 Column 对象可以在模板中使用。请参阅 PrimeNG common shared.d.ts 源文件中的列以查看所有可能的字段。有不少。

标签

let-myItem="rowData"

使整个 rowData 字段可用于模板。

另一个标签 let-i 使当前行索引可供使用：

let-ri="rowIndex"

当使用模板确定如何关联每个模板时，PrimeNG DataTable 需要 pTemplate 指令。潜在值是“header”、“body”和“footer”。 PrimeNG DataTable Documentation

【讨论】：