Advertisement
  1. Code
  2. PHP

Створюйте сітки даних Ajax за допомогою CodeIgniter та jQuery 

by
Read Time:16 minsLanguages:

Ukrainian (українська мова) translation by Tanya Ira (you can also view the original English article)

У цьому уроці ми створимо бібліотеки в CodeIgniter, який дозволяє автоматично генерувати таблиці для управління будь-якої таблиці бази даних.  Я поясню кожен крок, необхідний для створення цього класу; так що ви, ймовірно, дізнатися деякі нові прийоми ООП понять в процесі! 

В якості бонусу, ми приступаємо до написання коду jQuery, який дозволить користувачеві оновити вміст таблиці даних без необхідності чекати оновлення сторінки. 


Будь Ласка, Зверніть Увагу... 

У цьому підручнику передбачається, що у вас є скромний розуміння фреймворків CodeIgniter і jQuery. 

Що таке таблиця? 

 Елемент управління DataGrid являє собою таблицю, яка відображає вміст бази даних або таблиці з сортуванням управління.

Елемент управління DataGrid являє собою таблицю, яка відображає вміст бази даних або таблиці з сортуванням управління.   У цьому уроці ми будемо покладено завдання забезпечення цієї функціональності, але також і користувачеві чекають оновлення сторінки кожного разу, коли виконується операція.  Завдяки jQuery, це буде досить простим завданням! 

А як щодо користувачів, які не включили JavaScript?  Не хвилюйтеся, ми будемо компенсувати їх, як добре! 


Крок 1: побудувати генератор сітки даних класу 

Ми хочемо створити інструмент, який дозволить нам створити динамічно сітки даних для будь-якої таблиці бази даних, які ми маємо.  Це означає, що код не прив'язаний до якої-небудь конкретної структури таблиці, і, таким чином, не залежить від самих даних.  Всі верстальник (розробник, який використовує наш клас) повинен знати ім'я таблиці повинні бути перетворені в таблиці первинного ключа для цієї таблиці.  Ось передмова з класу, що ми будемо розвивати по більшій частині цього підручника: 

Клас DataGrid цілком може бути доданий у папку програми/бібліотеки, але ми збираємося додати його в якості помічника на фреймворк Codeigniter.  Чому?  Оскільки завантаження бібліотек не дозволяють передати параметри конструктор класу, тим самим завантаживши його в якості помічника, дозволить вирішити проблему.  Цей момент буде мати більше сенсу для вас, коли ми завершили написання конструктора. 

Метод Конструктора Класу 

У нас багато, але не хвилюйтеся, я поясню все за вас в наступному абзаці. 

Конструктор приймає два аргументи: перший з яких-ім'я таблиці в базі даних, які ви хочете відобразити в DataGrid для користувача; другий параметр-це ім'я стовпця, яка виступає в якості первинного ключа для цієї таблиці (про це пізніше).  Всередині тіла конструктора, ми инстанцировать об'єкт в CodeIgniter, об'єкт бази даних і таблиці HTML клас/бібліотека.  Все це потрібно протягом всього об'єкта DataGrid життя і вже побудовані в рамках ки.  Зверніть увагу, що ми також перевіряємо, якщо первинний ключ дійсно існує в даній таблиці, і в разі якщо не, ми кидаємо виняток, який повідомляє про помилку.  Тепер значення $this->змінна-член tbl_fields буде доступна для подальшого використання, тому ми не повинні знову принести на базу. 

"Ми можемо використовувати команду $кі->дБ->list_fields($tbl_name оператор) для вилучення імен всіх полів таблиці.  Однак, для підвищення продуктивності, я рекомендую кешувати результати." 

Спосіб настроювання заголовків таблиці 

Це дозволяє налаштувати заголовки таблиці таблиці даних - тобто, з його допомогою можна замінити оригінальні імена стовпців для деяких полів таблиці.  Він приймає асоціативний масив, як це: regdate => "дата реєстрації".  А не тільки технічні "Regdate" в якості заголовків стовпців для типу даних, ми маємо більш удобочитаемое назву на своєму місці.  Код, відповідальний за застосування заголовки будуть незабаром з'ясовується. 

Метод ігнорування/приховування полів таблиці 

ignoreFields отримує масив, що містить поля, які повинні бути враховані при вибірці даних з бази даних.  Це корисно, коли у нас є таблиці з великою кількістю полів, але ми тільки хочемо приховати пару з них.  Цей метод досить розумний, щоб відстежувати спроби ігнорувати поле первинного ключа, а потім пропустити.  Це так, тому що первинний ключ не може бути проігнорована з технічних причин (ви зрозумієте, чому найближчим часом).   Ще, якщо ви хочете приховати стовпець первинного ключа відображаються в інтерфейсі, ви можете використовувати метод hidePkCol:

 Цей метод повертає логічне значення, яке вказує, якщо ми хочемо приховати стовпець первинного ключа, тому він не буде відображатися в таблиці.  Іноді, це огидна ідея для відображення даних ключ pkey, який зазвичай являє собою числовий код, без якого-небудь сенсу для користувача. 

Наступний метод примірника: 

Тут у нас є допоміжний метод, тому він має модифікатор "Private" і починається з символу підкреслення (конвенція кодексу).  Він буде використовуватися сформувати() метод - коротко пояснив - для того, щоб вибрані відповідних полів таблиці, а також відповідні заголовки встановлений в таблиці (генератор) об'єкта.  Зверніть увагу на наступний рядок: 

 Це де ми застосовуємо індивідуальні заголовки або вдатися до замовчуванням, якщо не задано.  Якщо стовпець ПК повинен бути прихований від дисплея, то заголовок буде пропущений. Також зверніть увагу на наступний рядок: 

 Ця команда наказує програма, щоб додати прапорець "майстер" в якості першого заголовка таблиці.  Прапорець відрізняється від інших чекбоксов в гріді в тому, що він дозволяє користувачеві перевірити або зніміть усі прапорці просто одному диханні.  Це перемикання функціонал буде реалізований в кілька хвилин з допомогою простого і jQuery фрагмент коду.

Спосіб створення/відображення в DataGrid 

Зараз приходить те, що дійсно працює для нас: 

Створити метод, як випливає з його назви, відповідає за формування самої таблиці.   Цей метод слід викликати тільки після того, як ви налаштували об'єкт у відповідності з вашими потребами. Перше, що він робить, це зателефонувати в $цьому->_selectFields() метод, щоб виконати дії, ми пояснили раніше.  Тепер він повинен отримати всі рядки бази даних і потім цикл через них, додаючи галочки на початку кожного рядка: 

 Всередині foreach петлі на створення методу, якщо значення $this->hide_pk_col прапор встановлюється в true, тоді ми повинні скасувати первинний ключ запису в $рядка масиву так, він не буде відображатися в стовпці, якщо значення $this->кі->таблиця об'єкт обробляє всі рядки і створює остаточний висновок HTML. На даний момент, це нормально, щоб видалити первинний ключ, якщо це необхідно, тому що ми більше не потрібна ця інформація.  A

А що користувач буде робити з обраного/перевірено рядків?   Щоб відповісти на це питання, я підготував ще кілька методів. Перша з них дозволяє нам створити "кнопки" без необхідності знати якісь технічні подробиці про те, як сітка працює система внутрішньо: 

Метод для додавання кнопки у форму таблиці 

 Просто передайте ім'я дії як перший аргумент, а другий аргумент, який вказує на мітку для кнопки автоматично.  Атрибут класу автоматично створюється для кнопки, щоб ми могли грати з нею легко, коли ми працюємо з ним в наш JavaScript. Але, як ми знаємо, якщо певна кнопка була натиснута користувачем?   Відповідь може бути знайдений в наступних спосіб:

 Так! Ще один статичний метод, який допомагає нам, коли ми маємо справу з формами.  Якщо які-небудь таблиці не представлено, цей метод повертає ім'я дії (або "роботи"), пов'язані з цим події submit.  Крім того, ще один зручний інструмент для обробки наші DataGrid з формами...

 ... яка повертає масив, що містить деякі ідентифікатори, так що ви можете відслідковувати, які рядки були обрані на сітці, а потім виконати деякі дії з ними.  Як приклад того, що можна зробити з набором ідентифікаторів рядків, я підготував ще один метод - це метод примірника, а не статичний, тому що це робить використання об'єкта примірника ресурси для того, щоб зробити свій бізнес:

 Якщо відзначена хоча б одна галочка, в deletePostSelection() метод дозволить створити і виконати SQL-оператор зразок наступного (припустимо, $tbl_name оператор='таблиці my_table' ID $pk_col="):

...який буде ефективно видалити деякі рядки з стійких шарів.   Там може бути більше операцій ви могли б додати в таблицю даних, але це буде залежати від специфіки вашого проекту.  Як порада, ви можете розширити цей клас, щоб, скажімо, InboxDatagrid, так, за спосіб deletePostSelection, він може включати в себе додаткові операції, такі як moveSelectedMessagesTo($місце), і т. д...

Склавши всі разом 

Тепер, якщо ви слідували цей підручник крок за кроком, ви повинні в підсумку маємо щось схоже на таке: 

Примітка: не забудьте зберегти файл як datagrid_helper.php і помістити його в "додатка/Помічник/" 


Крок 2: випробування допоміжний клас DataGrid з контролер в CodeIgniter 

 Тепер ми створимо простий контролер тестування і навантаження клас DataGrid в якості помічника в його конструктор. Але перед цим, ми повинні визначити фіктивну таблицю бази даних і заповнення її деякі зразки даних. 

Виконайте наступний SQL-код для створення бази даних і таблиці користувачів: 

Далі, давайте додамо деякі користувачі до нього: 

Тепер збережіть наступний код в якості "test.php,"  і додати його в "додаток/контролери" папку: 

Екземпляр цього класу створюється і передається як посилання на $цьому->член з DataGrid.   Зверніть увагу, що ми будемо вилучення даних з таблиці під назвою "користувачі" з первинним ключем є поле "id" стовпець, а потім, на індексний метод ми робимо наступні кроки: налаштування об'єкта DataGrid, зробити його всередині форми з допомогою видалення кнопку додали до нього і подивитися, якщо все працює, як очікувалося:

Питання: Що відбувається, коли форма відправляється? 

 Відповідь: "тест::учеб()" метод піклується обробки формі і правильний вибір роботи для застосування щодо ідентифікаторів, які були відібрані за формою відправника. Він також дбає про AJAX-запитів, так що це буде Ехо об'єкт JSON назад клієнтові.  Це AJAX-чутлива функція стане в нагоді, коли в jQuery вступає в дію, тобто прямо зараз! 

 "Це завжди розумні ідеї для створення веб-додатків, який компенсує, коли JavaScript/AJAX є недоступним. Таким чином, деяким користувачам буде багатшим і швидше, в той час як ті без JavaScript все одно зможете використовувати додаток зазвичай".


Крок 3: реалізації AJAX (jQuery на допомогу!) 

 Коли користувач натискає кнопку (або будь-яку іншу кнопку дія), нам би хотілося, напевно, щоб запобігти сторінку від перевантаження і повторного створення; це може зробити користувач нашого додатка заснути! Обійти цю проблему не буде складним завданням, якщо дотримуватися бібліотеку jQuery.   Оскільки це не "початківців", навчальний посібник, я не буду вдаватися в усі деталі, пов'язані з як отримати бібліотеки, як включити його на сторінці і т. д. Ви повинні знати ці кроки самостійно.

 Створити папку під назвою "Яш" додати бібліотеку jQuery в межах, і створити уявлення файлу, ім'я users.php. Відкрити новий файл та додати: 

Ви зрозуміли, що ми перенесли код від тест::Індекс і в новий вид скрипта?  Це означає, що ми повинні змінити тест::Index() метод наступним чином: 

Що краще.   Якщо ви хочете додати певний стиль таблиці, можна використовувати наступне правило CSS (або зробити краще макет самостійно):

Тепер, будь ласка, створіть "datagrid.js"  файл, помістити його на "каталог JS", і почати з цього коду: 

 Всередині цього замикання, ми будемо писати код, якому буде доручено управління деякими уявити події після того, як сторінка повністю завантажиться. Перше, що нам потрібно зробити, це відстежувати, коли користувач натискає кнопку відправки на формі таблиці, а потім відправити ці дані для обробки на сервері. 

Крім того, ми могли б почати з щось на кшталт: $('.dg_form').подати(функція(е){...}).   Однак, оскільки я хочу, щоб відслідковувати, яка кнопка була натиснута і витягувати ім'я вибране дію на його основі, я віддаю перевагу прив'язку обробника події для кнопки "Надіслати", а потім піти своїм шляхом нагору по ієрархії вузлів, щоб знайти форму, натиснувши кнопку належить:

 Далі, ми додаємо прихований елемент input всередині елемента форми, щоб вказати, яку дію надсилається:

 Це необхідно тому, що функція не вважає кнопку Відправити, щоб бути дійсною в'їзний формі.  Тому ми повинні мати, що рубати на місці при серіалізації даних форми.

 "Не забувайте: дана функція ігнорує кнопку "Надіслати", відкидаючи його як просто ще один шматок розмітки мотлох!"

Надсилання даних форми на сервер 

 Далі ми переходимо до вас атрибут action з форми елемента і додати рядок "/ "Аякс" до цього URL, так що метод буде знати, що це, по суті, AJAX-запит.  Після цього ми використовує jQuery.функція Post для відправки даних для обробки відповідного контролера, на стороні сервера, а потім перехопити подія відповідь з виклику/закриття:

 Зверніть увагу, що ми просимо відповідь має бути закодований як "з JSON", так як ми передаємо цю рядок у якості четвертого аргументу $.функція пост. Зміст зворотного виклику, що займаються відповідь сервера повинен бути досить простий для розуміння; вона визначає, чи є помилка, і якщо так, попереджає він.   В іншому випадку, це буде означати, що дія було успішно оброблено (в цьому випадку, якщо це дій, ми видаляємо рядка пов'язані з ідентифікаторами, які були обрані користувачем).


Крок 4: Все або нічого перевірити! 

 Єдине що зараз не вистачає, так це можливості перемикання, які я обіцяв раніше. Ми повинні зареєструвати функцію зворотного виклику, коли "майстер" прапорець - який має атрибут класу до "dg_check_toggler" - натиснута.  Додайте наступний фрагмент коду після попереднього: 

 Коли прапорець "перемикання" по клацанню, якщо вона йде у включеному стані, то всі рядки пов'язані таблиці будуть перевірятися одночасно; в іншому випадку все буде безконтрольно.


 Заключні Думки

Ми ще не досягли верхівка айсберга, коли справа доходить до таблиць для більш складних системах управління контентом.   Інші особливості, які можуть виявитися корисними для вас: 

  • Сортування таблиці по імені Поля 
  • Посилання пагинации для перегляду таблиці 
  • Редагувати/редагувати посилання на оновлення даних рядка 
  • Механізм пошуку і фільтрації результатів 

Спасибі за читання.  Якщо ви хотіли б продовженням підручника, дайте мені знати в коментарях! 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.