Yii Framework, відображення списку (таблиці) записів за допомогою віджету CGridView
І так розглянемо докладний приклад використання віджету CGridView.
Для чого потрібен CGridView
CGridView відображає список елементів даних у вигляді таблиці.
Кожен рядок таблиці - це дані одного елемента з джерела даних (найчастіше таблиці), а стовпець зазвичай представляє атрибут елемента (деякі стовпці можуть відповідати складному виразу атрибутів або статичним текстом).
Підготовка
Для реалізації прикладу нам знадобиться 2 таблиці. Перша таблиця міститиме список статей, назвемо її posts. SQL запит створення таблиці:
Зв'язок між таблицями user і posts буде одне до багатьох, тобто. 1 користувач може мати багато статей. Для цих таблиць ми створюємо моделі за допомогою gii.
Для отримання привабливого виджету будемо використовувати стиль Bootstrap 3. Припускаю, що Ви його вже підключили або можете використовувати свій стиль.
І так приступимо.
Базове виведення списку записів
Код подання (view) (файл: /themes/themeName/views/posts/list.php ):
У результаті ми отримаємо такі:
На даному етапі ми маємо список записів сортування по полях (для сортування необхідно натиснути на заголовок таблиці потрібної колонки) і посторінкову навігацію.
Стилізація віджету CGridView
Продовжимо. Стилюємо віджет CGridView під стиль Bootstrap 3. Для цього наведемо подання до наступного виду (файл: /themes/themeName/views/posts/list.php ):
Тепер трохи докладніше.
Рядок 6, ідентифікатор віджету
Рядок 7, клас обгортки віджету CGridView:
Рядок 8, клас для таблиці віджету CGridView:
Рядок 9, клас прелоадера ajax завантаження даних. На даному етапі це сортування та посторінкова навігація:
Всі стилі вже є в Bootstrap 3, крім grid-preloader, CSS для цього класу:
За бажанням можна залишити стандартний прелоадер віджету, для цього просто видаліть рядок, що містить клас прелоадера (рядок: 9).
Також необхідно додати CSS стиль для класів .desc і .asc які додаються при сортуванні в заголовок таблиці:
down.gif і up.gif можна замінити своїми або взяти їх з фреймворку (/framework/zii/widgets/assets/gridview).
Стилізація посторінкового навігатора
Для повноти картини необхідно упорядкувати вид посторінкової навігації, додамо наступний код у віджет:
Отже, код представлення набуде вигляду (файл: /themes/themeName/views/posts/list.php ):
Кількість записів віджета CGridView на сторінку
У результаті віджет буде виглядати так:
Пошук у віджеті CGridView
А до подання додати код:
Отже код подання набуде вигляду (файл: /themes/themeName/views/posts/list.php ):
Для полів за якими необхідно здійснювати пошук у частині значення (тобто не точне збіг) необхідно у методі search() при виклику compare третім параметром ставити значення true . Наприклад як у разі пошуку за заголовком, а для пошуку по id нам необхідний точний збіг, приклад:
Після цього віджет буде виглядати так:
Налаштування та стилізація колонок віджету CGridView
У результаті код подання набуде вигляду (файл: /themes/themeName/views/posts/list.php ):
Після цього віджет буде виглядати так:
Виведення даних із пов'язаних таблиці
Після чого код подання набуде вигляду:
Після цього віджет виглядатиме так:
Список, що випадає, для пошуку записів у віджеті CGridView
Дляпошуку за записами у віджеті CGridView можна використовувати список, що випадає (select). Наведемо два простих приклади пошуку з використанням списку, що випадає
Простий список
За допомогою CSS зменшимо довжину select'a:
Список, що випадає зі зв'язаної таблиці
Код подання
Після додавання списків, що випадають у фільтр віджета CGridView, подання набуде вигляду (файл: /themes/themeName/views/posts/list.php ):
Віджет виглядатиме так:
Пошук за датою за допомогою datepicker
Для того щоб додати пошук за датою, спочатку необхідно додати колонку з датою і в елементі filter підключити datepicker :
Щоб datepicker працював після ajax завантаження даних (після пошуку, сортування або посторінкового навігатора) необхідно додати у віджет CGridView наступний параметр:
а в кінці подання після виклику віджету CGridView:
Вставити наступний код:
У результаті представлення набуде вигляду (файл: /themes/themeName/views/posts/list.php ):
Після внесення цих змін віджет виглядатиме так:
Кнопки керування записами
Стандартні кнопки керування
Для додавання стандартних кнопок керування записами необхідно додати ще одну колонку з кодом:
Свої кнопки керування записами
У результаті ми отримаємо свої іконки кнопок та url до них. Також при натисканні на кнопку видалення буде викликане вікно з підтвердженням видалення запису.
У результаті код подання набуде наступного вигляду (файл: /themes/themeName/views/posts/list.php ):
Вибір кількості записів на сторінку
У поданні перед віджетом CGridView:
І в віджет CGridView, наприклад, замість заголовка колонок з кнопками додамо код списку, що випадає, з виборомкількості елементів на сторінку:
Не забудьте перевірити чи збігається ідентифікатор ( id ) віджету (рядок 7) з ідентифікатором ( id ) у рядку 10 ( posts-grid ).
Остаточний вид віджету:
Віджет CGridView при вмілому використанні значно прискорить розробку та спростить роботу з виведенням табличних даних, а також сортування, фільтрацію та навігацію за цими даними.
Додатково
Докладний список властивостей віджету можна переглянути на офіційному сайті Yii Framework: http://www.yiiframework.com/doc/api/1.1/CGridView
">