<
  • Главная
Статьи

jQuery Grid Plugin - «просунуте» рішення для створення таблиць

Сьогодні мова піде про плагіні для jQuery , Призначеному для відображення табличних даних. Я натрапив на нього практично випадково. Просто раніше я і не замислювався про те, що може існувати настільки потужне рішення для таблиць. Адже в більшості випадків дані можна показати за допомогою звичайної html таблиці.

jQuery Grid Plugin має сенс використовувати якщо потрібно працювати з великими таблицями. Справа в тому, що плагін істотно спрощує розбивку даних на сторінки. Тобто автоматично створюється панель з кнопками перегортання сторінок, а нові дані завантажуються за допомогою AJAX. Крім того, плагін має купу додаткових функцій і кілька тем оформлення.

Від вас вимагається налаштувати плагін і передавати йому дані. Звучить не складно, але як завжди є нюанси.

Щоб не ходити коло та навколо, давайте розглянемо невеликий приклад.

Хочу відразу попередити. Цей приклад максимально спрощений і не замінює документацію . Він допоможе зрозуміти тільки загальний принцип роботи плагіна. У реальному додатку вам доведеться зробити купу додаткових налаштувань.

До речі, є демонстраційна сторінка з безліччю цікавих прикладів.

Сформулюємо задачу.

Припустимо, у нас є невелика таблиця (в базі даних) з даними користувачів (прізвище, ім'я, по батькові). Потрібно створити html сторінку з цими даними, причому передаватися вони будуть в форматі JSON (це не єдиний формат, який підтримує плагін, але, на мій погляд, найбільш зручний).

Перш за все, викачуємо плагін і розпаковуємо в папку з проектом.

Створюємо файли index.html (наша сторінка) і getdata. php (Серверний скрипт, який буде отримувати дані з БД і відправляти їх браузеру).

Викачуємо бібліотеку jQuery.

У результаті повинна вийти наступна структура папок.

index.html getdata.php jquery-1.3.1.min.js jquery.jqGrid.js / js ... / themes ...

Розглянемо структуру нашої сторінки.

&lt;? Xml version = "1.0&quot; 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 скриптом.

&lt;? 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 прийомів, здатних її зруйнувати

Lt;?
Quot; encoding = "UTF-8"?
Lt;?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью