Дополнительная колонка в CGridView с чекбоксами

Разобравшись с выводом результатов запроса в компонент zii виджета CGridView хочется раширять функционал своего веб приложения и как-то массово оперировать с полученными данными, лучший способ задать какое-либо действие для определенных элементов таблицы это чекбоксы, о них мы и поговорим ниже по тексту.

Следующий код добавляет чекбоксы ко всем элементам таблицы CGridView:

array(
    'class'=>'CCheckBoxColumn',
    'selectableRows' => 2,
    'checkBoxHtmlOptions' => array('class' => 'checkclass'),
),

Вставлять его следует первым в массив columns при вызове zii.widgets.grid.CGridView. В параметрах вызова директива class говорит о том что будет использоваться стандартные CCheckBoxColumn элементы Yii, selectableRows говорит из какого столбца брать значения для поля value получившегося , а checkBoxHtmlOptions и передаваемый массив присваивает элементу класс (кстати на него стоит опираться при обработке), в нашем случае checkclass. Выглядеть весь код вызова виджета должен примерно так:

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider'=>$SqldataProvider,
    'enablePagination' => true,
    'ajaxUpdate' => false,
    'hideHeader' => false,
    'columns'=>array(
        array(
                'class'=>'CCheckBoxColumn',
                'selectableRows' => 2,
                'checkBoxHtmlOptions' => array('class' => 'checkclass'),
            ),
        array(
            'name' => 'id',
            'value' => 'CHtml::encode($data["id"])',
            'type' => 'raw',
        ),
        array(
            'name' => 'name',
            'header' => 'Имя',
            'value' => 'CHtml::encode($data["first_name"])',
            'type' => 'text',
        ),
        array(
            'name' => 'Фамилия',
            'value' => 'CHtml::encode($data["second_name"])',
            'type' => 'raw',
        ),
    ),
));

В результате получается подобная картинка:

checkbox CGridView

При этом получившийся чекбокс в шапке таблицы управляет всеми ниже стоящими.

Теперь остается обработать получившиеся чекбоксы, делать это мы будем на с помощью javascript, для этого мы создадим кнопку в представлении над наше таблицей и повесим на событие onclick выполнение функции treat():

<div style="margin-bottom: -30px;">
    <button type="button" onclick="treat();">
        <span>Действия с чекбоксами</span>
    </button>
</div>

А вот и сама функция:

<script>
function treat() {
    $(".checkclass").each(function() {
        if ($(this).prop("checked")) {
            alert($(this).attr("value"));
            $(this).parent().parent().remove();
        }
    });
}
</script>

Конечно наша функция не особо практична, она выполняет всего два действия — выводит предупреждение с значением из value нашего чекбокса и удаляет всю строчку в таблице, но вместо этого она могла бы отправлять post запросы для внесения изменений в базу данных, но об этом позднее.

Чекбоксы и кнопка

comments powered by HyperComments
Lybik53
2014-11-24 10:37:12
булоб дуже круто, якби таксамо був описаний спосіб "post запросы для внесения изменений в базу данных". Ждем
йцукен
2016-01-20 17:49:53
жди
йцукен
2016-01-20 17:50:42
вот простой пример аджакс запроса в базу, поменняй там на свои настройки (я просто скопировал с проекта на YII 1.1.16 ) jQuery.ajax({ type: 'POST', url: '/objectrabot/create/', data: {dog_id: dog_number}, success: function (response) { jQuery('#modal-body-dialog').empty().html(response); jQuery('#modal-dialog').css('z-index', '22000'); jQuery('#modal-dialog').css('height', 'auto'); jQuery('#modal-dialog').css('max-height', '100%'); jQuery('#modal-dialog').css('width', 'auto'); // jQuery.noConflict(); jQuery('#modal-dialog').modal('show'); return false; }, error: function (xhr, ajaxOptions, thrownError) { alert("Произошла ошибка , возможно у вас нет прав " + xhr); } });
При копировании материалов обратная ссылка на play-stop.ru желательна обязательна!