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

我正在使用bootstrap4和yii2，我想自定义我的复选框输入，如下一个链接

因此，我使用的是

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>'];
     },
   ],
],

“列”=>[
[
'class'=>'yii\grid\CheckboxColumn'，
“cssClass”=>“选中复选框”，
'headerOptions'=>['style'=>'宽度：5px']，
'header'=>'.Html:：checkBox（'selection_all'，false，['id'=>'customCheck1'，'type'=>'checkBox'，'class'=>'custom control input select on check all']）。'，
“checkboxOptions”=>函数（$model）{
返回[''.Html:：checkBox（'selection'，false，['id'=>“'customCheck.”$model->id.“，'class'=>'自定义控件输入']）。'；
},
],
],

它只在表格标题中起作用，而不在其他复选框中起作用

[ '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>' ,
] ,

---

更新

看起来它现在已经修复并合并到

yii3.0.0-alpha1

版本中，请参见

---

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

复选框的HTML属性。这可以是的

数组

属性或返回此类

阵列

这意味着，无论哪种方式，它都应该是一个

属性数组

，此外，您应该使用以下

选项

为

正文

和

标题

中的复选框分配

类

和

属性

，您不需要复选框的标签

[ '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>' ,
] ,

然后将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>' ,
] ,

[
'class'=>\common\components\CheckboxColumnCustom:：className（），
“内容”=>函数（$model）{
返回'.Html:：checkBox（'selection'，false，['id'=>“'customCheck.$model->id.”，'class'=>'自定义控件输入']）；
} ,
'header'=>'.Html:：checkBox（'selection_all'，false，['id'=>'customCheck1'，'type'=>'checkBox'，'class'=>'custom control input select on check all']），
] ,

---

我刚刚测试了代码，它工作得很好，并生成了从

内容

选项返回的确切字符串。

无论是谁试图序列化downvote me，它都帮不了你，伙计。谢谢你的帮助。但实际上我需要标签标签，因为如果我跳过它，引导类就不会应用，我的复选框disappear@OmarSanchez我刚刚更新了答案有一个关于使用引导复选框的已知问题，我已经为您添加了一个修复程序，可以正常工作。我的想法几乎相同，只是我使用renderDataCellContent函数用div包装复选框和标签，并在列中使用checkboxOptions。我试过你的帖子，也很管用，谢谢穆罕默德