Yii2：在 yii\grid\CheckboxColumn 中实现 bootstrap 4 复选框样式

Question

我正在使用 Bootstrap 4 和 YII 2，我想自定义我的复选框输入，如下一个链接

https://getbootstrap.com/docs/4.0/components/forms/#checkboxes。

所以我正在使用该类yii\grid\CheckboxColumn，但我不知道该怎么做。

我尝试了以下方法

'columns' => [
   [
     'class' => 'yii\grid\CheckboxColumn',
     'cssClass' => 'checkbox-select',
     'headerOptions' => ['style' => 'width:5px'],
     'header' =>  '<div class="custom-control custom-checkbox">'.Html::checkBox('selection_all', false, ['id' => 'customCheck1', 'type' => 'checkbox', 'class' => 'custom-control-input select-on-check-all']).'<label class="custom-control-label" for="customCheck1"></label></div>',
     'checkboxOptions' => function($model){
        return ['<div class="custom-control custom-checkbox">'.Html::checkBox('selection', false, ['id' => "'customCheck".$model->id."'", 'class' => 'custom-control-input']).'<label class="custom-control-label" for="customCheck'.$model->id.'"></label></div>'];
     },
   ],
],

它仅适用于表标题，不适用于其他复选框。

Answer 1

更新

看起来它现在已修复并合并到yii3.0.0-alpha1版本中，请参阅此处

checkboxOptions根据文档，您使用了错误的方式

复选框的 HTML 属性。这可以是一个arrayof 属性，也可以是一个返回此类 array.

意味着，无论哪种方式，它都应该是 的数组attributes，此外，您应该使用以下内容为和中的复选框options分配和，您不需要复选框的标签。classesattributesbodyheader

[ 'class' => \yii\grid\CheckboxColumn::className () ,
    'checkboxOptions' => function ($model, $key, $index, $column) {
        return [
            'value' => $model->id ,
            'class' => 'custom-control-input' ,
            'id' => 'customCheck' . $model->id
        ];
    } ,
    'contentOptions' => function($model, $key, $index, $column) {
        return [
            'class' => 'custom-control custom-checkbox' ,
        ];
    } ,
    'header' => '<div class="custom-control custom-checkbox">' . Html::checkBox ( 'selection_all' , false , [ 'id' => 'customCheck1' , 'type' => 'checkbox' , 'class' => 'custom-control-input select-on-check-all' ] ) . '<label class="custom-control-label" for="customCheck1"></label></div>' ,
] ,

编辑

有一个ISSUE与引导程序很棒的复选框相关并且gridview不兼容，并且这个问题仍然没有合并，正如您所说，您希望每个单元格内的label标签和包装器呈现复选框，为此您只需使用以下选项自定义 正文中复选框的感觉和外观。divtdcontentGridView

但是，要使上述内容当前正常工作，您只需复制粘贴以下扩展类，其中包括对 gridview 的修复，并使用CheckboxColumnCustom.php文件夹中的 名称保存common/components/

<?php

namespace common\components;
use Closure;

use yii\helpers\Html;
use yii\helpers\Json;
use yii\grid\CheckboxColumn;

class CheckboxColumnCustom extends CheckboxColumn
{

    public $content;

    /**
     * @inheritdoc
     */
    protected function renderDataCellContent($model, $key, $index)
    {
        if ($this->content instanceof Closure) {
            $checkbox = call_user_func($this->content, $model, $key, $index, $this);
        } else {
            $checkbox = $this->getContentCheckBox($model,$key,$index);
        }
        return $checkbox;
    }

    public function getContentCheckBox($model,$key,$index)
    {
        if ($this->checkboxOptions instanceof Closure) {
            $options = call_user_func($this->checkboxOptions, $model, $key, $index, $this);
        } else {
            $options = $this->checkboxOptions;
        }
        if (!isset($options['value'])) {
            $options['value'] = is_array($key) ? Json::encode($key) : $key;
        }
        if ($this->cssClass !== null) {
            Html::addCssClass($options, $this->cssClass);
        }
        return Html::checkbox($this->name, !empty($options['checked']), $options);
    }

}

然后将 checkboxColumn 的代码更新为以下内容

[ 
    'class' => \common\components\CheckboxColumnCustom::className () ,
    'content' => function($model) {
        return  '<div class="custom-control custom-checkbox">' . Html::checkBox ( 'selection' , false , [ 'id' => "'customCheck" . $model->id . "'" , 'class' => 'custom-control-input' ] ) . '<label class="custom-control-label" for="customCheck' . $model->id . '"></label></div>';
    } ,
    'header' => '<div class="custom-control custom-checkbox">' . Html::checkBox ( 'selection_all' , false , [ 'id' => 'customCheck1' , 'type' => 'checkbox' , 'class' => 'custom-control-input select-on-check-all' ] ) . '<label class="custom-control-label" for="customCheck1"></label></div>' ,
] ,

我刚刚测试了代码，它运行良好，并生成从content选项返回的确切字符串。