Yii2 Kartik Gridview+选择2过滤器

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

我的问题是，当将数组传递到不带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'),
],

但是，如果将过滤器更改为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过滤器更改选择过滤器，否则如何实现相同的空白

更新： 将prompt与allowClear相结合可以重新创建类似的功能，但仍然不理想。初始显示如下所示： 但是，一旦选择了选项，“关闭x”将不合适并覆盖文本，并且不会在下拉列表中提供空白/空值的原始行为：

这是我的GridView代码

---

将数据列更改为

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

---

请将您的数据列更改为

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

请使用FilterWiteOptions

您需要在Select2的pluginOptions下使用allowClear=>true选项，同时使用提示符=>

要调整列大小，请尝试对id使用filterInputOptions，制造商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']设置为默认值以解析。我已经更新了上面的代码，以获得刻度，请参见

更新2

显然，它不适用于resolve，因为它会使select2的宽度变宽，您可能需要手动将其设置为“width”=>“200px”

您需要使用select2的pluginOptions下的allowClear=>true选项以及提示符=>

要调整列大小，请尝试对id使用filterInputOptions，制造商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']设置为默认值以解析。我已经更新了上面的代码，以获得刻度，请参见

更新2

---

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

我认为您需要在插件操作下使用allowClear=>trueselect2@MuhammadOmerAslam我试过并在其他select2小部件中使用它，但它不清楚，因为没有空/清除值。稍后我将尝试将其与“提示”结合使用。您需要提供一个提示或占位符，以便将其清除，因为它需要一个空白选项来重置to@MuhammadOmerAslam将提示符和allowClear组合在一起确实使它工作了，尽管x被压扁了。自动调整工作台大小不太好，所以我需要调整。有没有方法可以从下拉菜单中选择空白条目，像默认的那样？可以显示当前屏幕的屏幕抓取，据我所知，如果您指定宽度自动，它将根据占位符的长度或所选值/选项展开。我认为您需要在select2@MuhammadOmerAslam我试过了，并在其他select2小部件中使用了它，但它不允许清除，因为没有空/清除值。稍后我将尝试将其与“提示”结合使用。您需要提供一个提示或占位符，以便将其清除，因为它需要一个空白选项来重置to@MuhammadOmerAslam将提示符和allowClear组合在一起确实使它工作了，尽管x被压扁了。自动调整工作台大小不太好，所以我需要调整。有没有方法可以从下拉菜单中选择空白条目，像默认的那样？你能显示当前屏幕的屏幕抓取吗？据我所知，如果你指定宽度Auto-它将根据占位符的长度或选择的值/选择展开，这开始给我一个空白的输入，这是一个很大的帮助，但是一旦选择了输入，就不允许我清除它。稍后我将尝试将它与allowClear结合。将prompt与allowClear结合起来是可行的，尽管这并不理想。如果你能更新你的答案，我会接受。这会让我开始一个空白的输入，这是一个很大的帮助，但不让我清除输入一旦被选中。稍后我将尝试将它与allowClear结合。将prompt与allowClear结合起来是可行的，尽管这并不理想。如果你能更新你的答案，我会接受的。仅仅设置id宽度是不够的，但我会弄乱大小，试图让它们正确。不好，这会导致一列超宽1000%？然后出发screen@sharf隐马尔可夫模型。。。我刚试过，它看起来确实很奇怪，但如果你在这里提供手动宽度，比如“宽度”=>“200px”，我想是的

---

应该相应地调整仅仅设置id宽度是不够的，但我会弄乱大小以尝试正确调整。不好，这会导致一列超宽增长1000%？然后出发screen@sharf隐马尔可夫模型。。。我刚试过，它看起来很奇怪，但如果你在这里提供手动宽度，比如“宽度”=>“200px”，我认为它应该相应地调整