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

Question

我使用 Yii2 并有一个带有 ExpandRowColumn 的 gridview，并且在一列中我的每一行都有一个 Select2 和一个带有按钮的小 div。我成功地在每个元素上添加了 css class kv-disable-click 我不想触发展开但卡在 Select2 中：我试过 select，在 select2 中添加 class 或 containerClass 我也尝试过 'rowClickExcludedTags'=>['select'], 但从来没有让它工作，每当我点击 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, $key, $index, $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'],
            ],

Answer 1

我最终找到了 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'
);
?>

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

On yii2 kartik Gridview: Disable click to expand for a Select2 in a cell

gridview

yii2

expand