在 yii2 kartik Gridview 上：禁用单击以展开单元格中的 Select2

如何解决在 yii2 kartik Gridview 上：禁用单击以展开单元格中的 Select2

我使用 Yii2 并有一个带有 ExpandRowColumn 的 gridview，在每一列中我有一个 Select2 和一个带按钮的小 div。我成功地在每个元素上添加了 css class kv-disable-click 我不想触发扩展但被 Select2 卡住了： 我试过选择，向 select2 添加 class 或 containerClass 我也试过 'rowClickExcludedTags'=>['select'], 但永远不会让它工作，每当我点击选择它仍然会触发扩展。 对于列：

$gridColumns = [
    [
      'class' => 'kartik\grid\ExpandRowColumn','contentOptions' => ['style' => 'width:20px; white-space: normal;'],'value' => function ($model,$key,$index,$column) {
                  return GridView::ROW_COLLAPSED;
                },'detail' => function ($model,$column) {
           return Yii::$app->controller->renderPartial('_expand-row-details',['model' => $model]);
                },'header'=>'','heeaderOptions' => ['class' => 'kartik-sheet-style'],'allowBatchToggle'=>false,'expandOneOnly' => true,'enableRowClick'=>true,],.....,[
    'attribute' =>'varietes','label'=> 'Variétés','format'=>'raw','value' => function($model){
        $items= ArrayHelper::map($model->varietes,'IDVarietes','Nom'); 
        $leSelect2 = Select2::widget([
           'name'=>'varietes_select'.$model->IDPlantes,'size'=>Select2::SMALL,'readonly'=>true,'data' => $items,'hideSearch'=>true,'pluginEvents' => [
              "select2:opening" => "function() {
                $('.my-select2-list option').attr('disabled','disabled');   
               }",'language' => 'fr','options' => ['placeholder' => 'Variétés disponibles ...','id'=>'varietes_select'.$model->IDPlantes,'class'=>'my-select2-list kv-disable-click','containerCssClass'=>'kv-disable-click'],'pluginOptions' => [
               'allowClear' => false,'width'=>'80%',]);
          if(count($items) >0){
            ['class' => 'drop-in-gridview','id' => 'varietes_select']);            
            $retour = $leSelect2;
           }else{
             $retour ="--";
           }
           $url ='<a href="/index.php?r=variete%2Findex&  planteId='.$model->IDPlantes.'"class="kv-disable-click">';
                    $laDiv= $url. '<div title="Ajouter ou modifier une variété" class="div-varietes-border" class="kv-disable-click"> <i class="glyphicon glyphicon-pencil pull-right kv-disable-click" ></i><i class="glyphicon glyphicon-plus-sign pull-right kv-disable-click" ></i></div></a>';
                    $boutons =  Html::tag('div',$laDiv,['class'=>'div-zone-varietes kv-disable-click']);                               
                    return $retour.$boutons;
                 },'contentOptions' => ['style' => 'width:250px; white-space: normal;font-weight:600;','class'=>'kv-disable-click'],

解决方法

我最终找到了一个 javascript 解决方案，并将以下代码添加到我的视图中。所以现在点击事件仍然由 Select 处理，但不再冒泡到网格行：

<?php
//To avoid the expand of the detailsView when clicking on the Select
$this->registerJs(
    "$('.select2-selection').on('click',function(e) {  e.stopPropagation();});",View::POS_READY,'my-button-handler'
);
?>