PrimeNG 数据表行跨示例

Question

我正在使用 PrimeNG 数据表。我希望在 table 的内容中有一些行跨越多个列。在 headers (http://www.primefaces.org/primeng/#/datatablegroup) 中有一个很好的例子可以做到这一点，但我不确定如何在 table 的内容中做到这一点。行数将是动态的（一些可能有天气和雨，其他可能有雨、水位和流量）。这能做到吗？

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: ""
                            },

                            {
                                title: "e-Tutorial",
                                price: ""
                            },
                            {
                                title: "Ratios e-Tutorial",
                                price: ""
                            },

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

                    quantity: "1",

                    price: "300",
                    currency: "CAD"

                },
                {
                    mainVO:{

                        main_title: "Securities Pack Combo",

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

                        {
                            title: "omicsrial",
                            price: ""
                        },
                        {
                            title: "e-Tutorial",
                            price: ""
                        },

                        {
                            title: "Micro Tutorial",
                            price: ""
                        }
                        ],
                        discounts: [
                        {
                            title: "Discount price 1",
                            price: "0"
                        },
                        ]
                    },

                    quantity: "1",

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

        }

PrimeNG 数据表行跨示例

PrimeNG dataTable rowspan example

datatable

primeng