Question

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

我必须设置表格的第一个标题是复选框/广播，但我只能使用header

中的p-column属性添加文字

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

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

任何想法？

Answer 1

与Pradeep，

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

Answer 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>

Answer 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>
...

标签＆＃34; let-col＆＃34;通过上下文变量$ implicit使Column对象可在模板中使用。请参阅PrimeNG公共shared.d.ts源文件中的列以查看所有可能的字段。有很多。

标签

let-myItem="rowData"

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

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

let-ri="rowIndex"

当模板用于确定如何关联每个模板时，PrimeNG DataTable需要pTemplate指令。潜在的价值是＆＃34;标题＆＃34;，＆＃34; body＆＃34;和＆＃34;页脚＆＃34;。 PrimeNG DataTable Documentation

如何使用带有primeng DataTables的HTML模板？

3 个答案: