Разобравшись с выводом результатов запроса в компонент 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', ), ), ));
В результате получается подобная картинка:
При этом получившийся чекбокс в шапке таблицы управляет всеми ниже стоящими.
Теперь остается обработать получившиеся чекбоксы, делать это мы будем на с помощью 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