Yii2 GridView 自定义 Header 行

Question

在我的视图代码中，我有这个：

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
             ['label' => 'Training Score',
               'attribute' => 'scoreTraining',
               'format' => ['decimal',2],
             ],
             ['label' => 'Exam Score',
               'attribute' => 'scoreExam',
               'format' => ['decimal',2],
             ],
        ],
    ]);

通常 header 名称将是 "Training Score" 和 "Exam Score"

是否可以在 yii2 gridview 中自定义 header 行？这样我的 header 行看起来像 2 行..

<table border=1>
  <tr><th>Training <br> Score</th><th>Exam <br> Score</th></tr>
</table>

Answer 1

为此，请使用 header 属性而不是 label:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        [
            'header' => 'Training <br> Score',
            'attribute' => 'scoreTraining',
            'format' => ['decimal', 2],
        ],
        [
            'header' => 'Exam <br> Score',
            'attribute' => 'scoreExam',
            'format' => ['decimal', 2],
        ],
    ],
]);

这样 HTML 内容将不会被编码。

官方文档：

$header

Answer 2

使用 'label' 属性设置 header:

http://www.yiiframework.com/doc-2.0/yii-grid-datacolumn.html#$label-detail

这样排序功能仍然有效。

使用 'encodeLabel' => false 以允许 HTML-entities 像
一样工作：

http://www.yiiframework.com/doc-2.0/yii-grid-datacolumn.html#$encodeLabel-detail

示例：

 [
              'attribute' => 'firstname',
              'label' => 'First <br /> Name',
              'encodeLabel' => false,
 ],

Answer 3

'beforeHeader' => [
    [
        'columns' => [
            ['content' => '', 'options' => ['colspan' => 5, 'class' => 'text-center']],
            ['content' => 'Detail 1', 'options' => ['colspan' => 7, 'class' => 'text-center warning','style'=>'background-color:yellow']],
            ['content' => 'Detail5', 'options' => ['colspan' => 7, 'class' => 'text-center','style'=>'background-color:#ADD8E6']],
            ],
            
        ],
    ]],

Yii2 GridView 自定义 Header 行

Yii2 GridView Customize Header Row

gridview

row

header

yii2