primeNG dataTable colspan tbody - solution

问题

I came across this problem like many other where you want a col span for tbody instead of just headers given in the PrimeNG Documentation. I tried to use some directives and Javascript to add it programatically. I am demonstrating the code here. I am not sure if this is a universal solution and would work for everybody but this will definitely act as a starter for solution of your problem.

回答1:

Create a custom directive:

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);
 }
}

Then you can just pass in the data in the directive. I am pasting my code:

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

来源：https://stackoverflow.com/questions/40249952/primeng-datatable-colspan-tbody-solution

标签

angular

angular2-template

primeng