primeNG dataTable colspan阀体-解决方案 [英] primeNG dataTable colspan tbody - solution

问题描述

我和其他许多人一样遇到了这个问题，在这些问题中，您想要tbody的col跨度，而不仅仅是PrimeNG文档中提供的标题.我尝试使用一些指令和Javascript以编程方式添加它.我在这里演示代码.我不确定这是否是通用解决方案，是否对每个人都适用，但这肯定可以作为您解决问题的起点.

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.

推荐答案

创建自定义指令:

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>

这篇关于primeNG dataTable colspan阀体-解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！