datatable - PrimeNG dataTable の行スパンの例

Question

PrimeNG データテーブルを使用しています。テーブルのコンテンツ内でいくつかの行が複数の列にまたがるようにしたいと考えています。ヘッダー内でこれを行うための優れた例があります ( http://www.primefaces.org/primeng/#/datatablegroup ) が、テーブルのコンテンツ内でこれを行う方法がわかりません。行の数は動的になります (天気と雨が含まれる場合もあれば、雨、水位、河川の流れが含まれる場合もあります)。これはできますか？

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

        }