Question

我正在使用PrimeNG dataTable。我希望在表的内容中有一些行跨越几列。在标题（http://www.primefaces.org/primeng/#/datatablegroup）中执行此操作有一个很好的示例，但我不确定如何在表的内容中执行此操作。行数将是动态的（一些可能有天气和雨，其他可能有雨，水位和流量）。可以这样做吗？

visual for rowspan > 1

Answer 1

我遇到了同样的问题。我无法找到原生解决方案，所以我做到了。

<p-dataTable [value]="checkout.items" [footerRows]="footerRows">
        <p-column field="main_title" header="Items" styleClass="item-width">

            <template let-col let-mainVO="rowData">

                <tr><h4>{{mainVO[col.field].main_title}}</h4></tr>
                <tr *ngFor="let c of mainVO[col.field].childVO">
                    <td>{{c.title}}</td>
                    <td>{{c.price}}</td>
                </tr>
                <tr><h4>Discounts:</h4></tr>
                <tr *ngFor="let d of mainVO[col.field].discounts">
                    <td>{{d.title}}</td>
                    <td>{{d.price}}</td>
                </tr>
                </template>
        </p-column>
        <p-column field="quantity" header="Quantity"></p-column>
        <p-column field="price" header="Price"></p-column>
        <p-column field="action" header="Action">
            <template>
                <a href="javascript:void(0)">Delete</a>
            </template>
        </p-column>

    </p-dataTable>

这是我的json：

 this.checkout =
        {
            Message: "CheckoutList",

            items: [
                {
                    mainVO:{

                        main_title: "Value Pack Combo",

                        childVO: [
                            {
                                title: "Financial e-Tutorial",
                                price: "$55"
                            },

                            {
                                title: "e-Tutorial",
                                price: "$75"
                            },
                            {
                                title: "Ratios e-Tutorial",
                                price: "$85"
                            },

                            {
                                title: "economics e-Tutorial",
                                price: "$95"
                            }
                        ],
                        discounts: [
                            {
                                title: "Discount price 1",
                                price: "$120"
                            },
                        ]
                    },

                    quantity: "1",

                    price: "300",
                    currency: "CAD"

                },
                {
                    mainVO:{

                        main_title: "Securities Pack Combo",

                        childVO: [
                        {
                            title: "atios e-Tutorial",
                            price: "$55"
                        },

                        {
                            title: "omicsrial",
                            price: "$75"
                        },
                        {
                            title: "e-Tutorial",
                            price: "$85"
                        },

                        {
                            title: "Micro Tutorial",
                            price: "$95"
                        }
                        ],
                        discounts: [
                        {
                            title: "Discount price 1",
                            price: "$120"
                        },
                        ]
                    },

                    quantity: "1",

                    price: "300",
                    currency:"CAD"
                },
            ],

        }

PrimeNG dataTable rowspan示例

1 个答案: