Yii2 Kartik Gridview + фильтр Select2

Question

У меня есть приложение Yii2, и в одном из моих представлений индекса (модифицированная версия стандартного crud, созданного с помощью инструмента gii cli) я заменил виджет GridView на Kartik, а также установил для столбца значениеиспользуйте filterType из GridView::FILTER_SELECT2

Моя проблема заключается в том, что при передаче массива в столбец без filterType появляется меню выбора с пустым параметром для «очистки» фильтра поиска:

[
    'attribute' => 'scale_id',
    'label' => 'Scale',
    'value' => function($model) {
        return empty($model->scale) ? null : $model->scale->name;
    },
    'filter' => ArrayHelper::map(Scale::find()->asArray()->all(), 'id', 'name'),
],

Однако, изменив фильтр на select2 Kartik, пустая опция не появится, и то же самое поведение не будет применяться:

[
    'attribute' => 'scale_id',
    'label' => 'Scale',
    'value' => function($model) {
        return empty($model->scale) ? null : $model->scale->name;
    },
    'filter' => ArrayHelper::map(Scale::find()->asArray()->all(), 'id', 'name'),
    'filterType' => GridView::FILTER_SELECT2,
],

Как бы я достиг того же "пусто, если не изменено? выберите фильтры с помощью фильтра select2 от Kartik?

Обновление: Комбинация prompt с allowClear воссоздает аналогичную функциональность, но она все еще не идеальна.Первоначальный экран выглядит следующим образом: Однако после выбора параметров закрытие x не подходит по размеру и накладывается на текст, а также не обеспечивает первоначальное поведениепустое / пустое значение в раскрывающемся списке:

Вот мой код для GridView

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [

        'id',
        'description',
        'sku_number',
        [
            'attribute' => 'owner_id',
            'label' => 'Owner',
            'value' => function($model) {
                return $model->owner->name;
            },
            'filter' => ArrayHelper::map(Owner::find()->asArray()->all(), 'id', 'name'),
            'filterType' => GridView::FILTER_SELECT2,
            'filterWidgetOptions' => [
                'options' => ['prompt' => ''],
                'pluginOptions' => ['allowClear' => true],
            ],
        ],
        [
            'attribute' => 'product_id',
            'label' => 'Product',
            'value' => function($model) {
                return $model->product->name;
            },
            'filter' => ArrayHelper::map(Product::find()->asArray()->all(), 'id', 'name'),
            'filterType' => GridView::FILTER_SELECT2,
            'filterWidgetOptions' => [
                'options' => ['prompt' => ''],
                'pluginOptions' => ['allowClear' => true],
            ],
        ],
        [
            'attribute' => 'manufacturer_id',
            'label' => 'Manufacturer',
            'value' => function($model) {
                return $model->manufacturer->name;
            },
            'filter' => ArrayHelper::map(Manufacturer::find()->asArray()->all(), 'id', 'name'),
            'filterType' => GridView::FILTER_SELECT2,
            'filterWidgetOptions' => [
                'options' => ['prompt' => ''],
                'pluginOptions' => ['allowClear' => true],
            ],
        ],
        [
            'attribute' => 'scale_id',
            'label' => 'Scale',
            'value' => function($model) {
                return empty($model->scale) ? null : $model->scale->name;
            },
            'filter' => ArrayHelper::map(Scale::find()->asArray()->all(), 'id', 'name'),
            'filterType' => GridView::FILTER_SELECT2,
            'filterWidgetOptions' => [
                'options' => ['prompt' => ''],
                'pluginOptions' => ['allowClear' => true],
            ],
        ],

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Answer 1

Вам необходимо использовать опции "allowClear"=>true в pluginOptions для Select2 вместе с "prompt"=>''.

. Чтобы настроить размеры столбцов, попробуйте использовать filterInputOptions для id,и manufacturer_id для регулировки их ширины, так как они занимают больше места, чем требуется, и select2 сжимается.

[
    'attribute' => 'id',
    'filterInputOptions' => ['class' => 'form-control', 'style' => 'width:50px'],
],
[
    'attribute' => 'manufacturer_id',
    'filterInputOptions' => ['class' => 'form-control', 'style' => 'width:50px'],
],
[
    'attribute' => 'scale_id',
    'filter' => ArrayHelper::map(Scale::find()->asArray()->all(), 'id', 'name'),
    'filterType' => GridView::FILTER_SELECT2,
    'filterWidgetOptions' => [
        'options' => ['prompt' => ''],
        'pluginOptions' => [
            'allowClear' => true,
            'width'=>'resolve'
        ],
    ],
],

Обновление

Обеспечение лучшей ширины по умолчанию для GridView::FILTER_SELECT2.Установите pluginOptions['width'] по умолчанию для разрешения.Я обновил код выше для scale_id см. здесь

Обновление 2

Видимо, он не работает с resolve какэто делает ширину select2 безумно широкой, и вам может потребоваться установить ее вручную, например 'width' => '200px'

Answer 2

Измените свой столбец данных как

[
   'attribute' => 'scale_id',
   'label' => 'Scale',
   'value' => function($model) {
           return empty($model->scale) ? null : $model->scale->name;
    },
   'filter' => ArrayHelper::map(Scale::find()->asArray()->all(), 'id', 'name'),
   'filterType' => GridView::FILTER_SELECT2,
   'filterWidgetOptions' => [
      'options' => ['prompt' => '']
   ]
],

Пожалуйста, сообщите нам filterWigetOptions Столбец данных