在yii2 kartik网格视图上:禁用单击以展开单元格中的Select2

Question

我使用Yii2，有一个带ExpandRowColumn的网格视图，在一列中，每行有一个Select2和一个带按钮的小div。我成功地在每个元素上添加了css类kv-disable-click，我不想触发扩展，但却被Select2卡住了：我尝试了选择，在选择2中添加了class或containerClass我也试过'rowClickExcludedTags'=>['select'],但从来没有让它工作，每当我点击"选择"时，它仍然会触发展开。对于列：

$gridColumns = [
[
'class' => 'kartikgridExpandRowColumn',
'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'
);
?>