JqGrid Частина I Знайомство, mkb333

Моя основа знань.

— Не бойтесь, — сказала Чорна Корольова, — це всього лише бараняча нога, ні більше ні менше. Вона вам сподобається, запевняю вас. Познайомтеся. Аліса, це Баранья Нога. Барання Нога, це Аліса.

Предмова

Запровадження

Будь-який набір даних можна у вигляді двовимірного масиву – таблиці. Я вважаю таблицю одним із фундаментальних елементів представлення інформації. Завдяки такій структурі організації людина може побачити, оцінити та легко маніпулювати даними у такій формі.

У цьому циклі статей я постараюся познайомити вас і разом з вами сам осягнути всі принади чудового плагіна для jQuery - jqGrid. Щоб дати вам відчути цього «монстра», так-так саме «монстра», я наведу посилання на галерею сайту розробника. Рекомендую переглянути всі приклади роботи з таблицею.

Особисто я, коли побачив «це», був шокований і вирішив розібрати цей плагін. Але одразу ж був розчарований, він не заробив! А перевіривши ще раз я зрозумів, що проблема не в плагіні, а в мені. Ось ще одна причина, через яку я сів за цей цикл. Далі мене спіткало ще одне розчарування, скрипт викликав помилку в IE і відмовлявся працювати. Це було з багом у коді плагіна, яку усунули до версії 3.6.1 (На момент написання статті, остання версія була 3.6.2). Таким чином я «вляпався» у цей плагін. Впевнений ви втомилися від моєї порожньої балаканини і слід перейти до справи.

I. Підготовка до встановлення

Перед початком будь-яких робіт нам необхідно заготовити «інструменти» та «матеріали».Інструменти (я використовую я)

Втім всі стандартні пакети в репозиторії Debian. Якщо ви віддаєте перевагу Windows, то я можу порадитивамDenwerМатеріали

  • jQuery – завантажити з офіційного сайту або підключити на посилання Google http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
  • jQueryUI CSS Framework (простіше кажучи тема для jQueryUI) – вибирайте та скачуйте на офіційному сайті
  • jqGrid Plugin - завантажуйте з офіційного сайту.ВАЖЛИВО! Виберіть усі модулі, т.к. ми поки що розбираємось і тестуватимемо всі можливості jqGrid! У подальшій роботі ви можете вибирати тільки ті модулі, які вам необхідні.

II. Документ, у якому використовуватиметься jqGrid Інструкція:

  • Весь матеріал, який починається з цього моменту я освоюватиму заново, тому всі відповіді на запитання я шукатиму разом з вами.
  • Ми будемо працювати з кирилицею в кодуванні UTF-8. Але я дам деякі рекомендації щодо використання плагіна з кодуванням Windows-1251(CP1251) .

1) Html – розмітка Отже створимо документ з розміткою наступного виду:

Як бачите найнепересічніший код чистої сторінки, де

2) Html + CSS + JS Далі переходимо до підключаємо необхідні стилі та скрипти. Спочатку створимо на сервері, у робочому каталозі наступну структуру.

  • css/ – у цьому каталозі будуть всі *.css файли та інші файли, що стосуються візуального оформлення сторінки.
  • js/ – у цьому каталозі будуть усі *.js файли

Тепер по кожному каталогу докладніше:

    css – у нього слід покласти«jqueryUI Theme»
      – каталог із темою оформлення jQueryUI (наприклад flick)

ui.jqgrid.css

    – додаткові стилі jqGrid (перебувають у завантаженому в п.I архіві css/ui.jqgrid.css)
js - у нього слідпокластиjQuery
    - бібліотеку

Каталог i18n

    - Це каталог з локалізаціями плагіна, простіше кажучи з "мовами" (перебувають у завантаженому в п.I архіві js/i18n). На цьому етапі я зупинюся докладніше, тому що тут дам обіцяну пораду щодо використання плагіна з кирилицею кодування CP1251. Якщо ви плануєте використовувати плагін у таких умовах, то вам необхідно в каталозі i18n знайти та переконвертувати кодування файлу grid.locale-ru.js з UTF-8 у CP1251. Розповідь про те, як це зробити, виходить за рамки цієї статті. Також ви можете не завантажувати всі мови, а вибрати тільки ту, яка вам необхідна.

jquery.jqGrid.min.js

    - Власне сам плагін.

Тепер слід перевіряти ще раз всю структуру каталогу ще раз. Саме на цьому етапі я припустився першої помилки, згадуваної у вступі.

Далі необхідно підключити всю цю кухню

Як бачите, у розмітці є ще додатковий стиль. Цей стиль визначає базові параметри для відступів і найголовніше розмір шрифту! Якщо цього не зробити, то при використанні jQueryUI CSS Framework розмір шрифту буде не маленьким і при цьому різним у різних браузерах.

4) PHP На даному етапі слід створити PHP скрипт, який повертатиме таблиці, яку вона запитує. Ось приклад такого скрипту для наших потреб

5) Ініціалізація плагіна Останній етап підготовчих робіт. Тут ми маємо ініціалізувати плагін JqGrid. Робиться це викликом методу jqGrid(), який як параметр приймає об'єкт з властивостями таблиці. Тепер давайте подивимося на прикладі розмітки, наведеної вище.

III. Розбір параметрів Залишився останній пункт сьогоднішньої статті в якому я дам пояснення щодокожному з властивостей плагіна, що використовуються в даному прикладі.

IV. Зміст наступної статті

  • Інші способи завантаження даних
  • У вигляді об'єкта JSON
  • У вигляді масиву
  • Конвертування простий таблиці в jqGrid
  • Форматування даних
  • Вбудовані функції форматування
  • Функції форматування користувача
  • Додаткові панелі та панелі інструментів
  • Панель-листалка
  • Панелі інструментів
  • Панель користувача
  • Управління стовпцями даних

    • Висновки У цій статті ми познайомилися з плагіном jqGrid, запустили його в базовій функціональності та створили полігон для майбутніх прикладів.

    Під час роботи ми зрозуміли принцип роботи плагіна. Фактично сам плагін це інтерфейс користувача, який надсилає AJAX запити серверу та отримує від нього відповідь. Таблиця відправляє всі необхідні параметри для вибірки даних на стороні сервера у вигляді GET запиту, а сервер повертає у вигляді набору рядків у XML-розмітці.