Angular で PrimeNG の p-table を使って表を表示する時、一行のデータを 複数行に分けた場合 rowspan 指定のない行の選択方法
使用しているAngularおよびPrimeNGのバージョン
- angular-cli : 8.3.19
- primeng : 8.1.1
やろうとしていること
- 一行のデータを画面幅の都合で2行にして p-table で表示する
- 一番左にチェックボックスを表示する列があり rowspan="2" で表示する
- チェックボックスのオン・オフによって、2行で表示しているデータを選択あるいは選択解除の状態で表示する
問題
上記のうち3が、rowspan で表示している一行分のみが選択されてしまう(下図参照)。
実現したいこと
行の左側のチェックボックスによって上図の背景が白いセルも同時に背景色をその上のセルと同じように青くしたり、元の白いセルの状態に戻したい以下の html テンプレートで上記の状態となります。
<p-table [columns]="cols" [value]="cars" [(selection)]="selectedCars3" dataKey="vin" [scrollable]="true"
scrollHeight="200px">
<ng-template pTemplate="caption">
<table class="tbl-caption">
<tr>
<td>List of Cars</td>
<td>
<p-paginator></p-paginator>
</td>
</tr>
</table>
</ng-template>
<ng-template pTemplate="colgroup">
<colgroup>
<col style="width:50px">
<col style="width:150px">
<col style="width:150px">
<col style="width:250px">
<col style="width:250px">
<col style="width:150px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr class="tbl-row-height">
<th colspan="3">colspan 3</th>
<th colspan="2">colspan 2</th>
<th>no span</th>
</tr>
<tr class="tbl-row-height">
<th rowspan="2">
全選択<br>
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th rowspan="2">Vin</th>
<th rowspan="2">Year</th>
<th>Brand</th>
<th>Color</th>
<th rowspan="2">Date</th>
</tr>
<tr class="tbl-row-height">
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr class="tbl-row-height" [pSelectableRow]="rowData">
<td style="text-align: center;" rowspan="2">
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td rowspan="2">
{{rowData[columns[0].field]}}
</td>
<td rowspan="2">
{{rowData[columns[1].field]}}
</td>
<td *ngIf="!rowData[columns[2].field+'Editable']">
{{rowData[columns[2].field]}}
</td>
<td *ngIf="rowData[columns[2].field+'Editable']" pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<p-dropdown appendTo="body" [options]="brands" [(ngModel)]="rowData[columns[2].field]" [style]="{'width':'100%'}">
</p-dropdown>
</ng-template>
<ng-template pTemplate="output">
{{rowData[columns[2].field]}}
</ng-template>
</p-cellEditor>
</td>
<td>
{{rowData[columns[3].field]}}
</td>
<td rowspan="2">
<div>
<input pInputText style="width: 8em;" [matDatepicker]="picker" [(ngModel)]="rowData.date" placeholder="更新日">
<mat-datepicker-toggle style="margin-left: -35px;" matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</div>
</td>
</tr>
<tr class="tbl-row-height">
<td>
{{rowData[columns[3].field]}}
</td>
<td>
{{rowData[columns[2].field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="footer">
<tr class="tbl-row-height">
<td> </td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td style="background-color: darkgray;"></td>
</tr>
</ng-template>
</p-table>
(注)列を増やす代わりに、いくつかの列を二行目にも表示することでテストしていますが、実際には異なる値の入った項目が二行にわたって表示させる想定です
チェックボックスにチェックをつけた際に 二行分まとめて選択状態にするにはどのようにすれば良いでしょうか。(もちろんチェックを外したら二行分まとめて選択除隊を解除できないといけません)
ネットの情報で <tbody>~</tbody> をまとめる単位に指定する方法で hover で背景色を変える例は見つけたのですが、 PrimeNG の p-table を使って上のように書いた場合、pTemplate="body" で一つの <tbody>~</tbody> の中に全データの行が挿入された形となります。
他に PrimeNG のサンプルの中に複数の行の同一キーをまとめて選択する例はありました。
ですが、1つの行を複数行にして表示した際の方法の直接の例が見つけられませんでした。
実現方法が分かる方がいらっしゃれば教えてください。
よろしくお願いします。