YII2 добавить colspan в заголовок gridview
Как добавить colspan
в шапке в gridview??
Обычно заголовок выглядит так...
<table class="table">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>HeaderA1</th>
<th>HeaderA2</th>
<th>HeaderA3</th>
<th>HeaderB1</th>
<th>HeaderB2</th>
<th>HeaderB3</th>
</tr>
</thead>
<tbody>
<tr>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
</tr>
</tbody>
</table>
Я хочу, чтобы это выглядело так...
<table class="table">
<thead>
<tr>
<th rowspan=2>Header1</th>
<th rowspan=2>Header2</th>
<th rowspan=2>Header3</th>
<th rowspan=2>Header4</th>
<th colspan=3>Header A</th>
<th colspan=3>Header B</th>
</tr>
<tr>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>B1</th>
<th>B2</th>
<th>B3</th>
</tr>
</thead>
<tbody>
<tr>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
</tr>
</tbody>
</table>
2 ответа
Решение
Это невозможно без расширения и переписывания виджета сетки. Посмотрите на Kartik GridView. Если вы посмотрите на демоверсию, вы увидите, что она обладает необходимой вам функциональностью.
Чтобы добавить colspan
в заголовке таблицы вы должны вставить атрибут colspan
в headerOptions
колонны:
'headerOptions' => [
'colspan' => '2',
]
Для следующего столбца вы должны скрыть его заголовок с помощью:
'headerOptions' => [
'style' => 'display: none;',
]