Question

我遇到了这个问题，就像许多其他你想要一个用于tbody的col span而不仅仅是PrimeNG文档中给出的标题。我尝试使用一些指令和Javascript以编程方式添加它。我在这里展示代码。我不确定这是否是一个通用的解决方案，并且适用于所有人，但这肯定会成为解决问题的先机。

Answer 1

创建自定义指令：

colspan.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({
 selector:'[inColSpan]',
 inputs:['description:inColSpan']
})

export class ColSpanDirective {

 constructor(private el: ElementRef) {}

 set description(desc:string){
    let row = document.createElement("tr");
    let data = document.createElement("td");
    data.colSpan = 3;
    let description = document.createTextNode(desc);
    data.appendChild(description);
    row.appendChild(data);
    this.insertAfter(this.el.nativeElement.parentNode.parentNode.parentNode,row);
 }

 insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);
 }
}

然后你可以传入指令中的数据。我正在粘贴我的代码：

<p-dataTable [value]="products" [responsive]="true" styleClass="margin-top-20">

            <p-column field="productNames" header="Product Item" styleClass="item-width">
                <template let-col let-product="rowData" pTemplate type="body">
                    <h4><tr>{{product[col.field][0]?.name}}</tr></h4>
                    <p inColSpan="{{ product['productDescriptions'][0]?.description }}"></p>
                </template>
            </p-column>

            <p-column field="price" header="Price" styleClass="price-width"></p-column>

            <p-column styleClass="select-width">
                <template pTemplate type="header">
                    <span class="ui-column-title">Select</span>
                </template>
                <template let-col let-product="rowData" pTemplate type="body">
                    <p-checkbox name="selectOrderItem" [value]="stringifyProductItem(product)"
                                [(ngModel)]="selectedProductItemStrings"
                                (onChange)="setSubTotal()"></p-checkbox>
                </template>
            </p-column>

        </p-dataTable>

primeNG dataTable colspan tbody - 解决方案

1 个答案: