Yii2 Kartik Gridview + Select2 过滤器

Question

我有一个 Yii2 应用程序和我的一个索引视图（使用 gii cli 工具生成的默认 crud 的修改版本）我用 Kartik 替换了 GridView 小部件，并同样设置一列以使用 GridView::FILTER_SELECT2

的 filterType

我的问题是，当将一个数组传递给没有 filterType 的列时，我得到一个 select 菜单，"clear" 搜索过滤器有一个空白选项：

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

但是，通过将过滤器更改为 Kartik 的 select2，空选项不会出现并且同样的行为不适用：

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

我如何使用 Kartik 的 select2 过滤器实现相同的 "blank unless changed" select 过滤器？

更新： 将 prompt 与 allowClear 结合使用可以重新创建类似的功能，但仍然不够理想。初始显示如下所示：但是，一旦 select 编辑了选项，关闭的 x 就不会正确显示并覆盖文本，并且不会提供在下拉列表中具有 blank/null 值的原始行为:

这是我的 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

将您的数据列更改为

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

请我们filterWigetOptionsDataColumn

Answer 2

您需要为 Select2 使用 pluginOptions 下的 "allowClear"=>true 选项以及 "prompt"=>''.

要调整列的大小，请尝试对 id 使用 filterInputOptions，并尝试使用 manufacturer_id 来调整它们的宽度，因为它们占用的 space 比需要的多，并且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']设置为default即可解决。我已经为 scale_id 更新了上面的代码，请参阅 here

更新 2

显然，它不适用于 resolve，因为它会使 select2 宽度变宽，您可能需要手动设置它，例如 'width' => '200px'

Yii2 Kartik Gridview + Select2 过滤器

Yii2 Kartik Gridview + Select2 filter

gridview

yii2