yii2-krajee-select2 插件的两个“坑”

到写这个的时候，yii2-krajee-select2插件版本v2.1.0，坑还在

首先说，yii2 krajee select2插件就是按yii2插件方式包装的jquery插件select2，这个select2还是很好用的，最大特色是下拉列表项目很多的时候，它支持模糊搜索并选择，也支持多选，也可以禁用某些项目，总之，是对select的极大增强。

但在实际使用过程中，遇到了两个需要绕行的“坑”：1、在jquery 的模态对话框（modal dialog）中使用时，会出现显示不全或者搜索框无法点击聚焦的情况，这个是select2的毛病；2、同一个表单中多个select2，表单复位时，只能复位最后一个select2，这个其实是yii2-krajee-select2的毛病

第一个问题的解决方案：

插件设定 id（options中可以设置placeholder和id），然后写js代码，给对应插件设定dropdownParent属性为modal dialog的id （通常是index视图中class为modal fade的那个，即模态对话框最外层）

第二个问题的问题所在与解决方案：

karik-v/yii2-widget-select2/assets/js/select2-krajee.js文件131-137行：

if (doReset) {
            $el.closest("form").off('.krajees2').on("reset.krajees2", function () {
                setTimeout(function () {
                    $el.trigger("change").trigger("krajeeselect2:reset");
                }, 100);
            });
        }

对应插件$el给表单复位事件添加事件处理器时，on的同时off了（即它自己事件处理完了就把对应处理代码注销了），这样，其余更多的select2虽然添加了同样的事件处理器，但在触发时，还没等到处理，事件处理器已经被注销了。经过试验，把off('.krajees2')删除，就不存在问题，但直接改作者源码，下次composer update时麻烦就大了，所以，我们改为让最后一个select2去帮助手动复位上一个，上一个再复位上一个或者最后一个负责前面所有的复位

$this->registerJs("
var s2Options = eval($('#labclass-search-course-ids').attr('data-krajee-select2'));
s2Options.dropdownParent = $('#labclass-front-advanced-search');
");

 <?= $form->field($model, 'course_ids')->widget(Select2::className(), [   //modal dialog内必须设定 dropdownParent
            'data' => Course::getItems(null, $model->term_id),
            'options' => ['multiple' => true, 'placeholder' => '仅显示本学期课程', 'id' => 'labclass-search-course-ids'],
            'pluginOptions' => ['allowClear' => true]
        ]) ?>

    <?= $form->field($model, 'exe_teacher_ids')->widget(Select2::className(), [
        'data' => User::getItems(),
        'options' => ['multiple' => true, 'placeholder' => '可选多位教师', 'id' => 'labclass-search-et-ids'],
        'pluginOptions' => ['allowClear' => true],
    ]) ?>

    <?= $form->field($model, 'room_ids')->widget(Select2::className(), [    //已经有元素设定 dropdownParent
        'data' => $roomItems,
        'options' => ['multiple' => true, 'placeholder' => '可选多个房间', 'id' => 'labclass-search-room-ids'],
        'pluginOptions' => ['allowClear' => true],
        'pluginEvents' => [     //krajee Select2插件似乎存在bug，只能随表单复位最后一个select2
            "change" => "function() {
                $('#labclass-search-et-ids').trigger('change').trigger('krajeeselect2:reset');
                $('#labclass-search-course-ids').trigger('change').trigger('krajeeselect2:reset');
             }",
        ],
    ]) ?>

另外，在 bootstrap modal dialog （模态对话框）中显示 multiple （多选）的 select2 时， placeholder 字符串长一点初始显示会不完全，暂时似乎没有好办法，只能给 modal dialog 添加显示时触发来修改了，类似如下

$this->registerJs("
$('#lab-class-search-modal').on('show.bs.modal', function (e) {
    $('input.select2-search__field').each(function () {
        $(this).width('100%')
    })
})
", $this::POS_END); // 确保 多选select2 的 placeholder 显示完全