2

На странице выводится таблица сотрудников при помощи виджета yii\grid\GridView. В заголовочной строке при помощи виджета kartik\select2\Select2 выводится два инпута для фильтрации. Один для выбора филиала, второй для выбора должности. При выборе какого-либо значения из select-a происходит перезагрузка страницы и выводится таблица с применением фильтра. Задача добавить лоадер после того момента как пользователь выбрал какой-либо пункт в фильтре, так как при долгой отработке фильтрации для пользователя непонятно что происходит. В связи с этим у меня два вопроса:

  • Это должен быть ajax запрос?
  • Если да, то как это можно организовать? Я не могу найти обработчики указанных выше событий и не знаю на что их надо заменить Вот как выглядит виджет GridView со встроенными в него фильтрами-виджетами Select2:

'dataProvider' => $dataProvider, 'filterModel' => $searchModel,

                'tableOptions' => [
                    'class' => 'table table-list', 
                ],
                'layout'=>"{items}{pager}", 

                'columns' => [
                    [
                        'attribute' => 'id',
                        'filter' => false
                    ],
                    [
                        'attribute'=>'filial_id',
                        'filter'=>Select2::widget([
                            'model' => $searchModel,
                            'attribute' => 'filial_id',
                            'data' => ArrayHelper::map($filials, 'id', 'filial_name'),
                            'theme' => Select2::THEME_BOOTSTRAP,
                            'options' => [
                                'multiple' => true,
                                'placeholder' => 'Выберите филиал'
                            ],
                            'toggleAllSettings' => [
                                'selectLabel' => false,
                            ],
                            'pluginOptions' => [
                                'width' => '200px',
                            ],
                            'pluginEvents' => [
                                'select2:select' => "
                                    function() { 
                                        $(this).prop('disabled', true);
                                    }
                                "
                            ],
                        ]),
                        'label'=>'Филиал',
                        'value'=>function($model){
                                return $model->filial->filial_name;
                            },
                        'format'=>'text',
                        'visible' => $is_admin
                    ],        
                    'name',
                    [
                        'attribute'=>'post_code',
                        'label'=>'Должность/Специальность/Разряд',
                        'filter'=>Select2::widget([
                            'model' => $searchModel,
                            'attribute' => 'post_code',
                            'data' => ArrayHelper::map($posts, 'code', 'name'),
                            'theme' => Select2::THEME_BOOTSTRAP,
                            'options' => [
                                'multiple' => true,
                                'selectLabel' => false,
                                'placeholder' => 'Выберите должность',
                            ],
                            'toggleAllSettings' => [
                                'selectLabel' => false,
                            ],
                            'pluginOptions' => [
                                'width' => '200px',
                            ],
                            'pluginEvents' => [
                                'select2:select' => "
                                    function() { 
                                        $(this).prop('disabled', true);
                                    }
                                "
                            ],
                        ]),
                        'value'=>function($model){
                            return implode(ArrayHelper::map($model->workerPosts, "id", "fullname"), "<br/>");
                            },
                        'format'=>'html',
                    ],
                    [
                        'attribute'=>'schedule_id',
                        'value'=>function($model){
                            return $model->getScheduleName();
                        },
                        'format'=>'text',
                    ],
                    [
                        'class' => 'yii\grid\ActionColumn',
                        'template' => '{dissmiss} {history} {update} {delete}',
                        'buttons' => [
                            'dissmiss' => function ($url,$model) {
                                if($model->is_worker == 1){
                                    $btn = Html::a(
                                        '<span class="hidden"><i class="fa fa-spinner fa-spin"></i> </span>'."Уволить",
                                        ['dissmiss', 'id' => $model->id],
                                        [
                                            "data" => [
                                                'id' => $model->id,
                                                'target' => '#dissmissModal',
                                                //'toggle' => 'modal',
                                                'backdrop' => 'static',
                                            ],
                                            "class" => "btn btn-sm btn-default load-ajax-worker"
                                        ]
                                    );
                                } else {
                                    $btn = Html::a(
                                        "Вернуть",
                                        ['return', 'id' => $model->id],
                                        [
                                            "title" => "Вернуть работника",
                                            "data" => [ "method" => "POST" ],
                                            "class" => "btn btn-sm btn-default"
                                        ]
                                    );
                                }

                                return $btn;
                            },
                            'history' => function ($url,$model) {
                                return Html::a(
                                    '<span class="hidden"><i class="fa fa-spinner fa-spin"></i> </span>' . " История",
                                    ['history', 'id' => $model->id],
                                    [
                                        "data" => [
                                            'id' => $model->id,
                                            'target' => '#historyModal',
                                            //'toggle' => 'modal',
                                            'backdrop' => 'static',
                                        ],
                                        "class" => "btn btn-sm btn-default history-ajax-worker"
                                    ]
                                );
                            },
                            'update' => function ($url,$model) {
                                return Html::a(
                                    FA::icon('pencil'), 
                                    $url,
                                    [
                                        "title" => "Редактировать информацию",
                                        "data" => [ "method" => "POST" ],
                                        "class" => "btn btn-sm btn-default"
                                    ]
                                );
                            },
                            'delete' => function ($url, $model) {
                                return Html::a(
                                    FA::icon('times'), 
                                    $url,
                                    [
                                        "title" => "Удалить сотрудника",
                                        "data" => [ "method" => "POST", "confirm" => "Сотрудник будет удален. Вы уверены?" ],
                                        "class" => "btn btn-sm btn-default"
                                    ]
                                );
                            },
                        ],                
                    ],
                ],
            ]); ?>
2
  • В момент отправки ajax-запроса нужно запускать функцию анимации (включать анимацию загрузки), в момент получения ответа - выключать. Поэтому нужен код отправки запроса.
    – Dmytro
    1 фев 2018 в 7:40
  • @Дмытрык, вот этот код как и где вставлять?
    – Baurzhan
    1 фев 2018 в 8:32

1 ответ 1

1

В дополнение к комментарию. Вот как у меня это сделано

//функция отображения товаров в корзине
function loadProductInMiniCart(){
    //....тут идет всякий подготовительный код
    //если все ок, запуск функции анимации, которая принимает элемент, который нужно анимаровать
    //функция анимации написана собственноручно(не скрипт из сети)
                animateLoaderAjax(svgLoaderAjax); 
                var xhr = new XMLHttpRequest();//подготовка Ajax-запроса
                var g = JSON.stringify(u.a);
                xhr.open("POST", "/cart", true);
                xhr.setRequestHeader("Content-Type", "text/plain");
                xhr.send(g); //отправка Ajax-запроса
                xhr.onreadystatechange = function(){ //событие, которое отслеживает состояние запроса
                    if (xhr.readyState !=4) return;
                    if(xhr.status == 200) { 
//все это время работает анимация
    //если статус запроса 200 (Ок), то отключаем анимацию
                    animateLoaderAjaxEnd(svgLoaderAjax);
                    var k = JSON.parse(xhr.responseText);
                    console.log(k);

    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.