Yii2 gridview как поймать выбранный чекбокс?

Question

[Виктор Уманский]

Привет парни, объясните как правильно обработать чекбоксы в gridview?
Я выбираю пару пунктов, жмакаю на удалить, но в контроллер нечего не приходит????



Сама кнопка

<a href="<?= Url::to(['product-seeds/basket']) ?>">basket</a>

controller:

public function actionBasket()
    {
        VarDumper::dump($_POST,11,1);die;
    }

index:

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'layout' => "{summary}\n{pager}\n{items}\n{pager}",

        'columns' => [
            [
                'class' => 'yii\grid\CheckboxColumn',
                'checkboxOptions' => function ($model, $key, $index, $column) {
                    $model->id; <-- тут не знаю что ставить?
                }
            ], [

Answer 1

[Дмитрий]

Добрый вечер.

'class' => 'yii\grid\CheckboxColumn',
'checkboxOptions' => function(){
    return [
        'onchange' => '
           var keys = $("#grid").yiiGridView("getSelectedRows");
           $(this).parent().parent().toggleClass("danger")
        '
    ];
}

И ниже такой js, подправьте под себя.

$("#delete-select").on("click", function(e){
       e.preventDefault()
       var keys = $("#grid").yiiGridView("getSelectedRows");
       $.ajax({
         url: "'. \yii\helpers\Url::toRoute('delete') .'",
         type: "POST",
         data: {id: keys},
         success: function(){
            alert("yes")
         }
       })
   });

Comments

[Виктор Уманский]

Доброй ночи, после добавления такой строчки ...

'checkboxOptions' => function(){
    return [
        'onchange' => '
           var keys = $("#grid").yiiGridView("getSelectedRows");
           $(this).parent().parent().toggleClass("danger")
        '
    ];
}

вылезла ошибка

[Дмитрий]

Виктор Уманский, ну это уже только у Вас. Я дал Вам вполне рабочий код, сам его использую.
Надо смотреть, куда и что Вы передаёте, подставляете, объявляете и так далее.
Участок кода на скриншоте ничего не даст в решении проблемы. Смотрите свой код, в который Вы добавили мой код.

[Дмитрий]

Виктор Уманский, куда и как Вы вписали мой пример? Покажите полностью код.

[Виктор Уманский]

slo_nik, вот пожалуйста

<?php Pjax::begin(); ?>
        <?= GridView::widget([
            'dataProvider' => $dataProvider,
            'filterModel' => $searchModel,
            'layout' => "{summary}\n{pager}\n{items}\n{pager}",

            'columns' => [
                'class' => 'yii\grid\CheckboxColumn',
                'checkboxOptions' => function () {
                    return [
                        'onchange' => 'var keys = $("#grid").yiiGridView("getSelectedRows");
                         $(this).parent().parent().toggleClass("danger")'
                    ];
                },

                [
                    'label' => 'Изображения',
                    'attribute' => 'img_id',
                    'format' => 'raw',
                    'options' => ['width' => '100'],
                    'value' => function ($data) {
                        return !ProductSeeds::getImageTitle($data->img_id) ? Html::img('/web/uploads/system/no-image.png', ['width' => '50', 'height' => '50', 'class' => 'img-thumbnail']) : Html::img('/web/uploads/products/' . ProductSeeds::getImageTitle($data->img_id), ['width' => '50', 'height' => '50', 'class' => 'img-thumbnail']);
                    },
                    'filter' => '',
                ],
                [
                    'attribute' => 'status',
                    'format' => 'raw',
                    'options' => ['width' => '80'],
                    'value' => function ($data) {
                        return !$data->status ? '<span class="glyphicon glyphicon-remove text-danger glyphicon-remove-big-size"></span>' : '<span class="glyphicon glyphicon-ok text-success glyphicon-remove-big-size"></span>';
                    },
                    'filter' => ProductSeeds::$statuses,
                ],
                [
                    'attribute' => 'availability',
                    'format' => 'raw',
                    'options' => ['width' => '80'],
                    'value' => function ($data) {
                        return !$data->availability ? '<span class="glyphicon glyphicon-remove text-danger glyphicon-remove-big-size"></span>' : '<span class="glyphicon glyphicon-ok text-success glyphicon-remove-big-size"></span>';
                    },
                    'filter' => ProductSeeds::$availabilities,
                ],
                [
                    'attribute' => 'hit',
                    'format' => 'raw',
                    'options' => ['width' => '80'],
                    'value' => function ($data) {
                        return !$data->hit ? '<span class="glyphicon glyphicon-remove text-danger glyphicon-remove-big-size"></span>' : '<span class="glyphicon glyphicon-ok text-success glyphicon-remove-big-size"></span>';
                    },
                    'filter' => ProductSeeds::$hits,
                ],
                [
                    'attribute' => 'new',
                    'format' => 'raw',
                    'options' => ['width' => '80'],
                    'value' => function ($data) {
                        return !$data->new ? '<span class="glyphicon glyphicon-remove text-danger glyphicon-remove-big-size"></span>' : '<span class="glyphicon glyphicon-ok text-success glyphicon-remove-big-size"></span>';
                    },
                    'filter' => ProductSeeds::$novelty,
                ],
                [
                    'attribute' => 'sale',
                    'format' => 'raw',
                    'options' => ['width' => '80'],
                    'value' => function ($data) {
                        return !$data->sale ? '<span class="glyphicon glyphicon-remove text-danger glyphicon-remove-big-size"></span>' : '<span class="glyphicon glyphicon-ok text-success glyphicon-remove-big-size"></span>';
                    },
                    'filter' => ProductSeeds::$sales,
                ],
                [
                    'attribute' => 'top_sales',
                    'format' => 'raw',
                    'options' => ['width' => '80'],
                    'value' => function ($data) {
                        return !$data->top_sales ? '<span class="glyphicon glyphicon-remove text-danger glyphicon-remove-big-size"></span>' : '<span class="glyphicon glyphicon-ok text-success glyphicon-remove-big-size"></span>';
                    },
                    'filter' => ProductSeeds::$topSales,
                ],
                [
                    'attribute' => 'top_ten',
                    'format' => 'raw',
                    'options' => ['width' => '80'],
                    'value' => function ($data) {
                        return !$data->top_ten ? '<span class="glyphicon glyphicon-remove text-danger glyphicon-remove-big-size"></span>' : '<span class="glyphicon glyphicon-ok text-success glyphicon-remove-big-size"></span>';
                    },
                    'filter' => ProductSeeds::$topTen,
                ],
                [
                    'attribute' => 'category_id',
                    'options' => ['width' => '150'],
                    'value' => function ($data) {
                        return $data->category->title;
                    },
                    'filter' => ArrayHelper::map(CategorySeeds::find()->all(), 'id', 'title'),
                ],
                [
                    'attribute' => 'title',
                    'format' => 'raw',
                    //'options' => ['width' => '180'],
                    'filter' => '',
                ],
                [
                    'attribute' => 'price',
                    'headerOptions' => ['width' => '100'],
                ],
                [
                    'attribute' => 'old_price',
                    'headerOptions' => ['width' => '100'],
                ],
                [
                    'class' => 'yii\grid\ActionColumn',
                    'header' => 'Действие',
                    'headerOptions' => ['width' => '65'],
                    'template' => '{view} {update} {delete}{link}',
                ],
            ],
        ]); ?>
        <?php Pjax::end(); ?>
    </div>
<?php

$script = <<< JS
    $("#basket").on("click", function(e){
       e.preventDefault()
       var keys = $("#grid").yiiGridView("getSelectedRows");
       $.ajax({
         url: "'. \yii\helpers\Url::toRoute('basket') .'",
         type: "POST",
         data: {id: keys},
         success: function(){
            alert("yes")
         }
       })
   });
JS;
$this->registerJs($script, yii\web\View::POS_READY);

?>

[Дмитрий]

Естественно ошибка!)))
Сравните как Вы вставили код, с тем, что Вы писали в вопросе

'columns' => [
                'class' => 'yii\grid\CheckboxColumn',
                'checkboxOptions' => function () {
                    return [
                        'onchange' => 'var keys = $("#grid").yiiGridView("getSelectedRows");
                         $(this).parent().parent().toggleClass("danger")'
                    ];
                },

это Ваш код)))

'columns' => [
            [
                'class' => 'yii\grid\CheckboxColumn',
                'checkboxOptions' => function ($model, $key, $index, $column) {
                    $model->id; <-- тут не знаю что ставить?
                }
            ],

внимательней надо быть)))

[Виктор Уманский]

slo_nik, И в правду я не внимательный)) не поставил квадратные скобки((. У меня все работает, спасибо за код, вот эту строчку я переделал

var keys = $("#grid").yiiGridView("getSelectedRows");  на var keys = $("#w0").yiiGridView("getSelectedRows");

.

У меня еще такой вопрос...... когда выбираю какой-то пункт (1 или два пункта) выскакивает ошибка в консоле, а когда все выбираю нечего не выскакивает?
Сможете мне объяснить что не так?!

сама ошибка

[Дмитрий]

Виктор Уманский, Виктор Уманский, ошибка говорит о том, что невозможно прочитать свойство 'selectionColumn', не определено. Тут не знаю, что сказать. Опять же, проверьте свой код, возможно опять что-то упустили.

[Виктор Уманский]

slo_nik, Добро. Хоть и на этом спасибо!!!!

[balex777]

Дмитрий, Сделал все как у вас и добавил кнопку

<?= Html::submitButton('Удалить выбранные', ['class' => 'btn btn-success', 'id' => 'delete-select']) ?>

при нажатии в консоли ошибка вылетает

TypeError: data is undefinedyii.gridView.js:207:17
getSelectedRows site.local/backend/web/assets/a18f8ac7/yii.gridVie...
yiiGridView site.local/backend/web/assets/a18f8ac7/yii.gridVie...
onchange site.local/backend/web/index.php?r=category:2
jQuery 6
setSelectionColumn site.local/backend/web/assets/a18f8ac7/yii.gridVie...
jQuery 2

И второй вопрос delete выбранных делать форичем?

[Дмитрий]

balex777, значит Вы что-то сделали неверно.
Html::submitButton я точно не использую.

[balex777]

Дмитрий, Ну а как у вас?, вот выбрали вы все cheсkbox ли не все, надо ведь нажать на что то, чтобы по событию клик сработал jquery скрипт?

[Дмитрий]

balex777, обычная ссылка, которая генерируется через Html::a()

[balex777]

Дмитрий, ок спасибо, буду пробовать

[Дмитрий]

balex777, у Вас же над gridview есть кнопка, сделайте по аналогии.

[Дмитрий]

balex777, а что тут пробовать?

<?= Html::a('<i class="fa fa-remove" aria-hidden="true"></i>',
                        ['delete'],
                        [
                            'id' => 'delete-select',
                            'class' => 'btn btn-danger',
                            'title' => 'Удалить выбранные записи'
                        ]
                       );
            ?>

[balex777]

Дмитрий, Да в принципе, и по клику кнопки заходит в этот скрипт

$("#delete-select").on("click", function(e){
       e.preventDefault()
       var keys = $("#grid").yiiGridView("getSelectedRows");
       $.ajax({
         url: "'. \yii\helpers\Url::toRoute('delete') .'",
         type: "POST",
         data: {id: keys},
         success: function(){
            alert("yes")
         }
       })
   });

Событие отрабатывает нормально.

Какая то ошибка тут

[
                        'class' => 'yii\grid\CheckboxColumn',

                        'checkboxOptions' => function () {
                            return [
                                'onchange' => 'var keys = $("#grid").yiiGridView("getSelectedRows");
                                 $(this).parent().parent().toggleClass("danger")'
                            ];
                       },

                    ],

Потому что при нажатие на чекбокс или выбор всех чекбоксов, в консоли ошибка
TypeError: data is undefined
Вот тут спотыкается на этой строке if (data.selectionColumn) {

getSelectedRows: function () {
            var $grid = $(this);
            var data = gridData[$grid.attr('id')];
            var keys = [];
            if (data.selectionColumn) {
                $grid.find("input[name='" + data.selectionColumn + "']:checked").each(function () {
                    keys.push($(this).parent().closest('tr').data('key'));
                });
            }

            return keys;
        },

[Дмитрий]

balex777, почему какая-то ошибка? Всё предельно ясно сказано "TypeError: data is undefined"
Смотрите, что и как Вы определяете в самом gridview

[balex777]

Дмитрий, Вот его код

<?=
            GridView::widget([
                'dataProvider' => $dataProvider,
                //'filterModel' => $searchModel,
                'summary' => false,
                'columns' => [
//                    ['class' => 'yii\grid\SerialColumn'],
                    [
                        'class' => 'yii\grid\CheckboxColumn',

                        'checkboxOptions' => function () {
                            return [
                                'onchange' => 'var keys = $("#grid").yiiGridView("getSelectedRows");
                                 $(this).parent().parent().toggleClass("danger")'
                            ];
                       },

                    ],
                    //'id',
                    'slug',
                    'name',
                    'title',
                    'meta_descriptions:ntext',
                    //'status',
                    //'user_id',
                    //'tree_id',
                    //'created_at',
                    //'updated_at',
                    ['class' => 'yii\grid\ActionColumn'],
                ],
            ]);
            ?>

[balex777]

Дмитрий, Я понял спасибо надо вместо $("#grid") вставить свой id

[Дмитрий]

balex777, скорей всего.

[balex777]

Дмитрий, привет в этом коде

$("#delete-select").on("click", function(e){
       e.preventDefault()
       var keys = $("#grid").yiiGridView("getSelectedRows");
       $.ajax({
         url: "'. \yii\helpers\Url::toRoute('delete') .'",
         type: "POST",
         data: {id: keys},
         success: function(){
            alert("yes")
         }
       })
   });

эта ссылка не преобразуется
url: "'. \yii\helpers\Url::toRoute('delete') .'",

вот такая ссылка получается
/backend/web/'.yiihelpersUrl::toRoute('delete').'

Как правильно написать?