jQuery Grid Plugin - «просунуте» рішення для створення таблиць
Сьогодні мова піде про плагіні для jQuery , Призначеному для відображення табличних даних. Я натрапив на нього практично випадково. Просто раніше я і не замислювався про те, що може існувати настільки потужне рішення для таблиць. Адже в більшості випадків дані можна показати за допомогою звичайної html таблиці.
Від вас вимагається налаштувати плагін і передавати йому дані. Звучить не складно, але як завжди є нюанси.
Щоб не ходити коло та навколо, давайте розглянемо невеликий приклад.
Хочу відразу попередити. Цей приклад максимально спрощений і не замінює документацію . Він допоможе зрозуміти тільки загальний принцип роботи плагіна. У реальному додатку вам доведеться зробити купу додаткових налаштувань.
До речі, є демонстраційна сторінка з безліччю цікавих прикладів.
Сформулюємо задачу.
Припустимо, у нас є невелика таблиця (в базі даних) з даними користувачів (прізвище, ім'я, по батькові). Потрібно створити html сторінку з цими даними, причому передаватися вони будуть в форматі JSON (це не єдиний формат, який підтримує плагін, але, на мій погляд, найбільш зручний).
Перш за все, викачуємо плагін і розпаковуємо в папку з проектом.
Створюємо файли index.html (наша сторінка) і getdata. php (Серверний скрипт, який буде отримувати дані з БД і відправляти їх браузеру).
Викачуємо бібліотеку jQuery.
У результаті повинна вийти наступна структура папок.
index.html getdata.php jquery-1.3.1.min.js jquery.jqGrid.js / js ... / themes ...Розглянемо структуру нашої сторінки.
<? Xml version = "1.0" encoding = "UTF-8"?> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/ xhtml1 / DTD / xhtml1-strict.dtd "> <html xmlns =" http://www.w3.org/1999/xhtml "xml: lang =" en "lang =" en "> <head> <title> Використання jqGrid </ title> <meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> <meta http-equiv = "Content-Style-Type" content = "text / css "/> <link rel =" stylesheet "type =" text / css "media =" screen "href =" themes / basic / grid.css "/> <link rel =" stylesheet "type =" text / css "media = "screen" href = "themes / jqModal.css" /> </ head> <body> <table id = "list" class = "scroll"> </ table> <div id = "pager" class = "scroll "style =" text-align: center; "> </ div> <script type =" text / javascript "src =" jquery-1.3.1.min.js "> </ script> <script type =" text / javascript "src =" jquery.jqGrid.js "> </ script> <script type =" text / javascript "> jQuery (document) .ready (function () {jQuery (" # list "). jqGrid ({url: 'getdata.php', datatype: 'json', mtype: 'POST', colNames: [ '#', 'Прізвище', 'Ім'я', 'По батькові'], colModel: [{name: 'id', index: 'id', width: 30}, {name: 'surname', index: 'surname', width: 80, align: ' right '}, {name:' fname ', index:' fname ', width: 90}, {name:' lname ', index:' lname ', width: 80, align:' right '}], pager: jQuery ( '#pager'), rowNum: 5, rowList: [5,10,30], sortname: 'id', sortorder: "asc", viewrecords: true, imgpath: 'themes / basic / images', caption: ' дані користувачів '}); }); </ Script> </ body> </ html>Перш за все, зверніть увагу на рядки 10 і 11, в яких ми підключили файли зі стилями. У цьому прикладі використовується тема basic, але, природно, її можна змінити.
У тілі сторінки ми створюємо таблицю (рядок 14) і панель навігації (тег div, рядок 15). На даний момент вони порожні, їх вміст буде створено плагіном.
Після цього, ми підключаємо бібліотеку jQuery, jQuery Grid Plugin і створюємо скрипт з настройками (рядки 20-41). На них ми зупинимося окремо.
url - адреса скрипта, що формує масив з даними;
datatype - формат даних;
mtype - метод відправки запиту;
colNames - назви стовпців (використовуються в якості заголовків таблиці);
colModel - параметри полів (значення і кількість цих елементів повинні відповідати формату переданих даних);
pager - id блоку в якому буде розміщена навігаційна панель;
rowNum - кількість рядків в таблиці;
rowList - цей масив використовується для настройки списку, який користувач може використовувати для зміни кількості рядків в таблиці;
sortname - поле, яке за замовчуванням використовується для сортування;
sortorder - порядок сортування (в даному випадку зростаючий);
viewrecords - вказує, чи потрібно показувати в панелі управління загальна кількість записів;
imgpath - розміщення папки з зображеннями;
caption - заголовок таблиці.
Налаштування досить прості, але дуже важливо їх уважно заповнити.
Тепер створюємо базу даних та таблицю в ній (ви можете імпортувати файл users.sql з архіву з цим прикладом, посилання внизу сторінки).
Після цього займемося PHP скриптом.
<? Php try {// читаємо параметри $ curPage = $ _POST [ 'page']; $ RowsPerPage = $ _POST [ 'rows']; $ SortingField = $ _POST [ 'sidx']; $ SortingOrder = $ _POST [ 'sord']; // підключаємося до бази $ dbh = new PDO ( 'mysql: host = localhost; dbname = name', 'user', 'pass'); // вказуємо, ми хочемо використовувати utf8 $ dbh-> exec ( 'SET CHARACTER SET utf8'); // визначаємо кількість записів в таблиці $ rows = $ dbh-> query ( 'SELECT COUNT (id) AS count FROM users'); $ TotalRows = $ rows-> fetch (PDO :: FETCH_ASSOC); $ FirstRowIndex = $ curPage * $ rowsPerPage - $ rowsPerPage; // отримуємо список користувачів з бази $ res = $ dbh-> query ( 'SELECT * FROM users ORDER BY'. $ SortingField. ''. $ SortingOrder. 'LIMIT'. $ FirstRowIndex. ','. $ RowsPerPage); // зберігаємо номер поточної сторінки, загальна кількість сторінок і загальна кількість записів $ response-> page = $ curPage; $ Response-> total = ceil ($ totalRows [ 'count'] / $ rowsPerPage); $ Response-> records = $ totalRows [ 'count']; $ I = 0; while ($ row = $ res-> fetch (PDO :: FETCH_ASSOC)) {$ response-> rows [$ i] [ 'id'] = $ row [ 'id']; $ Response-> rows [$ i] [ 'cell'] = array ($ row [ 'id'], $ row [ 'surname'], $ row [ 'fname'], $ row [ 'lname']); $ I ++; } Echo json_encode ($ response); } Catch (PDOException $ e) {echo 'Database error:'. $ E-> getMessage (); } // end of getdata.phpПерш за все, зверніть увагу на параметри, які передаються в запиті (рядки 4-7). З їх допомогою плагін вказує, яку сторінку даних він хоче отримати, а також по якому полю і в якому порядку вона повинна бути відсортована.
Після цього, ми отримуємо дані. У цьому прикладі для роботи з базою ми використовували бібліотеку PDO (параметри підключення до бази вам, звичайно, потрібно буде вказати свої, рядок 10).
Зверніть увагу. Скрипт максимально спрощений, тобто прибрана перевірку параметрів, які передає плагін. У реальному додатку так робити не можна.
Потім ми формуємо об'єкт з даними ($ response).
В параметрах цього об'єкта потрібно передати:
- номер поточної сторінки ($ response-> page);
- кількість сторінок ($ response-> total);
- загальна кількість записів ($ response-> records);
- самі дані ($ response-> rows).
Формат, в якому потрібно зберігати дані, можна змінити. Для цього доведеться змінити налаштування плагіна (в документації розділ Retrieving Data -> JSON Data).
В кінці скрипта ми перетворимо дані в JSON формат і відправляємо браузеру (рядок 33).
Все, задача вирішена. Якщо хочете поекспериментувати, качайте архів з прикладом
Sourceвисновок
Цей приклад не розкриває і 10% можливостей плагіна. Наприклад, ви можете вбудовувати inline редактори для рядків, змінювати оформлення, використовувати інші формати даних (той же xml), створювати вкладені таблиці і т.п.
Загалом, дуже зручний інструмент.
Якщо у вас виникли питання, є поради або зауваження, не соромтеся, пишіть їх в коментарях. Буду радий відповісти або обговорити 😉
цікаво почитати
Тендітна краса програмного коду:
10 прийомів, здатних її зруйнувати
Quot; encoding = "UTF-8"?
Lt;?