JqGrid Частина II Базові можливості, jQuery
css, html, php, javascript, jQuery, ajax … – рішення, приклади, рецепти
jqGrid Частина II: Базові можливості
Отже, у попередній статті (jqGrid Частина I:Знайомство) ми з вами підготували платформу для дослідів і виконали «пробний запуск» плагіна, з «базовими» параметрами. Згідно з якими таблиця запитує дані із сервера в XML розмітці, при цьому ми маємо можливість сортувати дані в стовпцях.
У цій статті ми продовжимо експерименти і промацаємо ще ряд чудових можливостей jqGrid, ось план дій:
I. Інші способи завантаження даних1) Завантаження даних у вигляді JSON об'єкта
Отже на практиці завантаження таких даних вимагає наступної конфігурації плагіна:
Усі зміни я виділив відступами (рядки 4, 19-21). Як ви можете бачити в лістингу параметруdatatype: присвоєно значення'json', що говорить плагіну про те, що від сервера очікується відповідь у вигляді JSON об'єкта. Далі я ввів у конфіг таблиці ще три властивостіcaption,rownumbers,rownumWidth. Що вони визначають?
- caption – якщо це властивість не порожня, то таблиці з'являється заголовок з текстом, присвоєним цієї властивості.
- rownumbers – якщо це властивість «істина», то першим стовпцем таблиці буде стовпець із номерами записів по порядку.
- rownumWidth - це властивість залежно від rownumbers. І визначає ширину шпальти з нумерацією.
З параметрами клієнтської частини розібралися, тепер перейдемо до серверної. Тут я наводжу листинг лише останніх рядків коду, що це момент формування та виведення відповіді сервера.
Приклад 1 – використовуючи масив
Приклад 2 – використовуючи об'єкт
Обидва підходи виконують одні таті ж дії, але при цьому вибір підходу залежить від ваших уподобань та рівня майстерності.
2) Завантаження даних у вигляді масиву
Тепер розглянемо приклад, як можна створити jqGrid використовуючи як джерело даних масив. Як ви знаєте для цього прикладу не знадобиться серверний скрипт, а клієнтський скрипт буде виглядати приблизно так.
Як бачите і в цьому прикладі немає нічого «воєнного», все дуже просто. Якdatatype: вказуємо'local'. Далі будь-яким чином (в даному прикладі простим присвоєнням) створюємо масив об'єктів (кожен рядок даних є об'єктом) і додавання даних методомaddRowData в циклі (for(var i = 0;i)
Ось тут слід трохи відволіктися і звернути вашу увагу на невеликий ньюанс, можливо розробники щось не доробили або не захотіли доробити, але при використанні методівnavSeparatorAdd іnavButtonAdd як перший параметр має бути передано саме рядок-селектор, але ніяк не змінна містить останній.
Параметри роздільника за замовчуванням:Де
- sepclass: – клас у CSS ui.jqgrid.css, який визначає стиль роздільника. Можна використовувати, якщо захочете змінити зовнішній вигляд роздільника.
- sepcontent: – контент, який може бути поміщений у роздільник.
Кнопка вставляється за допомогою методуnavButtonAddДе
- caption: – напис на кнопці
- title: – атрибут кнопки, що використовується як підказка
- buttonicon: – назва класу іконки з jQuery UI CSS Framework
- onClickButton: – функція, яка буде виконана при натисканні на кнопці
- position: ('first' або'last' ) –додати кнопку до або після стандартних кнопок
- cursor: – CSS властивість, що визначає вид курсору при наведенні на елемент
- id: – за допомогою цієї властивості можна задати значення атрибуту id контейнеру (TD – звичайний осередок таблиці) у якому знаходиться кнопка.
Однак при всій своїй зручності, цей підхід до створення панелі інструментів має ряд недоліків, таких як те, що панель знаходиться в нижній частині таблиці, мало місця для якихось додаткових елементів, великого розміру і т.п. Для цих цілей розробники додали ще й можливість створення панелей користувача.3) Панелі користувача Ось ДЕМО2.7 лістинги якого наведені нижче. Клієнтська частина
І серверна, що практично повністю повторює приклад 2.1
Ну а тепер за традицією давайте розберемо приклад докладніше jqGrig дозволяє створювати дві незалежні панелі інструментів. Для цього варто властивостіtoolbar: присвоїти масив[true,'both'], елементи якого в даному випадку означають, що потрібно створити обидві (верхню та нижню) панелі інструментів. Замість'both' також можна вказати'top' або'bottom' для верхньої та нижньої панелей відповідно. Тепер давайте розглянемо перший варіант маніпуляції з елементами на панелях, почнемо з верхньої панелі. При ініціалізації плагіна з певною властивістюtoolbar: jqGrid автоматично виставить атрибутid верхньої панелі якid=»t_» («t_table» нашому випадку), а нижнюid="tb_" ("tb_table" у нашому випадку). За допомогою цих ідентифікаторів можна знайти «тулбари» в DOM і виконати такі маніпуляції.
Перший рядок зробить висоту верхньої панелі, що дорівнює 60px, а другий помістить на неї кнопку, код якої ви бачите.Після цього визначається функція-обробник, яка виконається при клацанні по доданій кнопці. Думаю така методика використання не викликає труднощів. А ось другий, альтернативний варіант маніпуляцій з елементами на панелях, ілюструється на прикладі нижньої панелі. Це наступні рядки коду
Отже, я запитую серверний скрипт (url:'p2e1.php?userdata=true' ), який виконує запит. Після виконання запиту, разом із сумарною кількістю записів отримуємо суму всіх значень полівregion_code. Далі отримані дані поміщаємо масив$data і кодуємо у формат JSON.IV. Управління стовпцями даних1) Зміна розміру та положення стовпців Насправді ніяких маніпуляцій для реалізації цих можливостей таблиці робити не доведеться. Можливо ви помітили, що в лістингу попереднього прикладу є не розглянута властивість sortable: true і якщо схопити за заголовок будь-якого зі стовпців, то можна drag'n'drop'ом перемістити його на місце іншого стовпця. Визначення цієї властивості якtrue і включає можливість перетягувати стовпці. Але перед використанням цієї опції плагіна переконайтесь:
- Що ви послухали мою пораду в першій частині і при завантаженні архіву з прагіном в Download Builder ви виставили всі галки в тому числі jQuiery UI addons .
- Що ви підключили до сторінки jQueryUI, саме віджет sortable.
При цьому можна змінювати ширину будь-яких стовпців, вcolModel -опціях яких не визначено властивістьresizable: false як стовпець «Широта» в ДЕМО2.7, за умови, що ви завантажили jqGrid з опцієюjQuiery UI addons.2) Приховуємо непотрібні або відображаємо потрібні стовпці даних Почнемо обговорення з ДЕМО2.8.
Перше що впадає у вічі так це те,що не всі стовпці показані, хоча всі оголошені. Ця опція буде корисна, якщо у вас є дуже багато колонок, при цьому зазвичай не всі вони потрібні, але можуть знадобитися при детальному розгляді якихось рядків. Зробити стовпець не видимим при ініціалізації таблиці можна вказавшиcolModel колонки властивістьhidden: true. Але заховані стовпчики потрібно якось показувати за потреби. Для таких цілей можна скористатися 2 способами.
- Використовуючи метод setColumns, я віддаю перевагу цьому методу через його простоту, не часто потрібно керувати стовпцями, але якщо потрібно, то цей метод саме воно.
- Використовувати метод-плагін columnChooser – цей підходящий для справжніх гурманів естетів, дуже ефектний якщо підключити відповідні файли. Для початку завантажуємо плагін UI.MultiSelect і підключаємо файлиui.multiselect.css таui.multiselect.js як у демо. І знову нагадаю що для цього методу jqGrid має бути з модулямиjQuiery UI addons.
Післяслів'я У цій статті ми розглянули дуже багато допоміжних можливостей плагіна-таблиці jqGrid, при цьому ми перетнули межу «початкового використання» таблиці, щиро вітаю! Ми добре попрацювали і далі на нас чекає ще більше цікавого, а саме:
- jqGrid та «дерева»
- jqGrid та MySQL дерева
- jqGrid та статичні дерева