如何将自定义 HTML 放入 Yii2 GridView 标头？答案

【问题标题】：How to put custom HTML into Yii2 GridView header?如何将自定义 HTML 放入 Yii2 GridView 标头？
【发布时间】：2015-04-30 08:09:24
【问题描述】：

引导程序中有这个<abbr></abbr> 标记，它会自动显示缩写词的弹出窗口。我想将此标签插入到属性名称为act 的gridview 中的某个标题中。到目前为止，这是我的代码。

        [
            'attribute'=>'act',
            'format'=>'raw',
            'label'=>'<abbr title="Area Coordinating Team">ACT</abbr>',
            'value'=>function($model){
              return '<span class="fa fa-thumbs-up text-green"></span>';
            }
        ],

但输出从字面上显示了整个<abbr title="Area Coordinating Team">ACT</abbr>

【问题讨论】：

请不要忘记添加yii2标签，因为问题是关于Yii2 framework。

标签： html gridview yii2 formatting yii2-advanced-app

【解决方案1】：

我已经回答了here。

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

[
    'attribute' => 'act',
    'format' => 'raw',
    'header' => '<abbr title="Area Coordinating Team">ACT</abbr>',
    'value' => function ($model) {
        return '<span class="fa fa-thumbs-up text-green"></span>';
    },
],

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

官方文档：

$header

【讨论】：

这行得通。但它删除了对列进行排序的链接。有没有办法让排序仍然起作用？
下一个答案是'encodeLabel' => false,

【解决方案2】：

使用：'encodeLabel' => false,

[
  'attribute'=>'act',
  'format'=>'raw',
  'label'=>'<abbr title="Area Coordinating Team">ACT</abbr>',
  'encodeLabel' => false,
  'value'=>function($model){
      return '<span class="fa fa-thumbs-up text-green"></span>';
  }
],

【讨论】：

这是一个更好的答案，因为与标签相关的所有其他内容都可以使用此选项，否则标题将失去带有标题选项的排序、颜色等选项

【解决方案3】：

如果您想拥有自定义 HTML 并且仍然具有原始排序功能，您可以创建自己的 DataColumn（比如说在 common/components 中），然后在网格视图中设置 dataColumnClass：

<?= GridView::widget([
    ...
    'dataColumnClass' => 'common\components\HtmlDataColumn',
    'columns' => [
        'id',
        [
            'attribute' => 'title',
            'htmlHeader' => 'Some Header<span class="glyphicon glyphicon-ok"></span>',
        ],
        ...

我的数据列：

namespace common\components;
use yii\helpers\Html;

/**
 * DataColumn that allows HTML in 'header' yet still appends sorting.
 */
class HtmlDataColumn extends \yii\grid\DataColumn
{
    public $htmlHeader = null;

    /**
     * @inheritdoc
     */
    protected function renderHeaderCellContent()
    {
        if ($this->header !== null || $this->label === null && $this->attribute === null) {
            return parent::renderHeaderCellContent();
        }

        if ($this->htmlHeader !== null) {
            $label = $this->htmlHeader;
        } else {
            $label = $this->getHeaderCellLabel();
            if ($this->encodeLabel) {
                $label = Html::encode($label);
            }
        }

        if ($this->attribute !== null && $this->enableSorting &&
            ($sort = $this->grid->dataProvider->getSort()) !== false && $sort->hasAttribute($this->attribute)) {
            return $sort->link($this->attribute, array_merge($this->sortLinkOptions, ['label' => $label]));
        }

        return $label;
    }
}

希望这会有所帮助。

【讨论】：