jqGrid – создание дополнительных кнопок
Пишу этот пост, т.к. недавно столкнулся с проблемой при использовании jqGrid. Об этом плагине для jQuery я уже рассказывал (часть 1, часть 2), поэтому повторяться нет смысла, скажу только, что, на мой взгляд, он представляет собой одно из лучших JS решений для работы с большими таблицами.
А проблема возникла, в общем-то, тривиальная – не достаточно подробная документация.
Дело было так. Один из читателей этого блога (Виктор Волков) попросил меня помочь добавить дополнительные кнопки в навигационную панель jqGrid. Я естественно отправил ему ссылку на соответствующую страницу справки 
… Но при этом я не знал, что если скопировать код от туда, то работать он не будет.
Хотя их демонстрационные примеры с дополнительными кнопками прекрасно работают.
В общем, ситуация такая. В дистрибутив плагина помимо основного файла (jquery.jqGrid.js) входят ещё 37 JS файлов, причём подгружаются они автоматически.
Т.е. вы подключаете только jQuery и jqGrid
-
<script type="text/javascript" src="jquery.js"></script>
-
<script type="text/javascript" src="jquery.jqGrid.js"></script>
Но, как оказывается, для создания собственных кнопок этого не достаточно. Нужно вручную подключить ещё и jqDnR-min.js.
-
<script type="text/javascript" src="js/min/jqDnR-min.js"></script>
Вообще-то в документации есть пример создания специального загрузочного скрипта, в котором можно указать какие файлы нужно подключить. Но в том разделе речь идет об изменении структуры папок в проекте.
К тому же в документации не сказано, какие файлы, в каком случае нужно подключать. Очень похоже на ситуацию «угадай с 3-х раз»
Конечно, всегда можно открыть страницу с их демонстрационными примерами и с помощью Firebug посмотреть какие скрипты при этом используются (кстати, я так и сделал), но все-таки удобнее пользоваться документацией.
В заключение привожу скрипт, создающий три дополнительные кнопки (Find, Add и Del).
-
jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"})
-
.navButtonAdd('#pager',{
-
caption:"Add", buttonimg:"themes/basic/images/row_add.gif", onClickButton: function(){ alert("Adding Row")}, position:"last"
-
}).navButtonAdd('#pager',{
-
caption:"Del", buttonimg:"themes/basic/images/row_del.gif", onClickButton: function(id){ alert("Deleting Row: "+id)}, position:"last"
-
});
Принцип достаточно простой. Если вы хотите использовать стандартную кнопку, то указываете её в параметрах метода navGrid. В этом примере так создана кнопка Find.
Если вы хотите создать собственные кнопки, то используйте метод navButtonAdd. В его параметрах можно указать надпись, картинку, размещение и обработчик.
Естественно, если вы создаёте свой вариант кнопки Add, то в параметрах navGrid нужно отключить стандартную (add:false).
Успехов!
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в Ajax, JavaScript, Web разработка Комментарии (30) »
Комментарии (30)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Альтернатива этому плагину FlexGrid и мне с ней приятней и проще и браузеры все кушает.
Еще расскажи про поиск, очень удобно, я у себя в админке Кинсбурга замутил, все радует
Хорошо, учту на будущее
Эх… Убил на ваш сайт минут 20 – пока читал (: Начальник зашёл – пришлось браться за работу… Обязательно вернусь
Раскажите пожалуста как настроить поиск, а то что-то не получается. Кто вообще совершает его, сама таблица или запрос к базе и вывод в таблицу. Спасибо за статьи даже мне чайнику всё дошло!))
Я постараюсь написать в ближайшее время… правда у меня немного другая тема запланирована…
Поиск выполняется на стороне сервера, т.к. данные находятся в базе. Таблица получает только те строки, которые отображаются на текущей странице. Поэтому сделать поиск по всему содержимому без запросов к БД не получится.
Присоединяюсь к просьбе про поиск! и если не трудно, то на примере jqGrid 3.5.1.
ОК! Просьба учтена
Обьясните пожалуйста как сделать таблицу как на примере http://trirand.com/jqgrid/jqgrid.html# таблица Form Navigation?
Когда просто копируешь код он не работает!Мне надо чтоб в таблице были все кнопки работы с таблицей(поиск,ред.добавление и тд).
Код в том примере – это только клиентская часть. Ваш серверный (PHP) скрипт должен поддерживать все нужные функции (т.е. каждый тип запроса, которые отправляются при нажатии на кнопки).
О части из них я рассказывал (поиск, например).
По остальным вам, наверное, придется почитать документацию
Прошу прощения за офтоп. Столкнулся с проблемой при работе с данным плагином. Никак не получается при добовлении новой записи отправить файл на сервер. Может кто нибудь сталкивался с подобным ?
Записи в этом плагине добавляются с помощью AJAX. А файл вы AJAX'ом не отправите.
Подробнее можно почитать здесь.
А как бы с учётом статьи о загрузке файлов без перезагрузки страницы, научить данный плагин грузить файлы ? Я думаю если данный плагин будет работать ещё и с файлами то цены ему не будет
Это можно сделать.
1) При добавлении или изменении записи открываем диалог с формой, которая содержит поля записи.
2) В этот диалог нужно добавить еще одну форму для загрузки файла.
Процедура будет выглядеть так. Нажимаете кнопку "Add", загружаете файл, после этого заполняете форму и жмете "Save".
Прошу прощения за наглость и назойливость. А не могли бы Вы пример описать ? Или подсказать где можно посмотреть подобный пример? Google – не спас.
А я не говорил, что это будет просто
К тому же готового решения у меня нет, есть идеи как это сделать.
Я бы начал с примера на оф.сайте (раздел Live Data Manipulation – Add row). Там показано как создать диалог для добавления записи.
Причем во время создания этого диалога можно установить обработчики различных событий (beforeInitData, beforeShowForm, afterShowForm и т.д.).
В один из этих обработчиков можно попробовать добавить код, который вставит форму загрузки файла внутрь диалога, т.е. получится диалог с двумя формами.
Повторюсь, это только идеи, реализовать такой загрузчик я не пробовал.
Здравствуйте! Пробую залить на хостинг, не работает. Причем таблица рисуется, а вот данные не подгружаются. На локалке все работате отлично.
Без firebug'а не разобраться
Нужно проверить:
1) Куда отправляется запрос (в консоле firebug), если изменился путь к php скрипту, будет 404-ая ошибка.
2) Не возникают ли ошибки при выполнении php скрипта (может быть, например, из-за отсутствия поддержки json на сервере). Разворачивайте запрос в консоле и смотрите вкладку Response (в ней будет ответ сервера).
Спасибо за ответ! json не поддерживается на сервере.
подскажите, не могу разобраться сделать таблицу резиновой?
нужно чтобы таблица была на всю ширину(width: 100%) окна браузера
я нашел 2 решения: раз, два.
Но оба используют JS, т.е. похоже, что с помощью настроек или только CSS сделать это нельзя.
спасибо, сейчас посмотрю. Но я тут поискал, и нашёл такое решение, с помощью параметра
autowidht: true,
в этом случаи таблица примит ширину окна браузера. Единственное, оно не динамичное, если потом попытаться изменить размеры окна браузера, то таблица будет не измененной, и будет сохранять ту ширину что было при загрузке страницы. В принципе этот вариант неплохой.
Да и вот тут ещё такой вопрос, заметил что Грит теперь использует стили от jQuery-UI, раньше в первых версиях на сколько я помню он не применялся, можно ли как-то избавиться от UI? я бы не хотел тащить такой тяжёлый груз только для таблицы, а использовать свои стили?
Вообще-то я не думаю, что использование JS для изменения ширины таблицы такой уж большой недостаток, ведь все равно без JS плагин вообще работать не будет.
По поводу jQuery-UI. Работать без него плагин будет, но оформления нет вообще. Т.е. придется добавить не только стили, но и все иконки.
Кроме того, UI не обязательно тащить целиком. jqGrid нормально работает если подключить только стили из UI (без js файлов).
Правда при этом вроде возникает какая-то ошибка (не помню точно), но я не заметил чтобы она влияла на работу плагина.
После того, как подключил UI в самой минимальной конфигурации (только UI Core) ошибка исчезла.
спасибо за ответы, на днях я был очень рад гриту, думал что на нём я разверну админ-панель, для своего нового движка, но сегодня когда увидел что почти тоже самое можно сделать и при этом JS код будет не такой огромный как у грита, вот страничка для примера
http://yii.cubedwater.com/user/list
тут есть постраничник, а также сортировка, если нужно то можно и поиск дописать, а редактирование ячеек у таблиц, в принципе не столь и важная часть, хотя это можно сделать немного по другому..
кстати, Владимир, наверняка существуют ещё подобные сайты что я привёл ссылку, где реализована примерно также, не могли бы подсказать ссылки на такие сайты если конечно знаете, было бы интересно посмотреть по изучать как и сам jQuery
кстати, протестировал я тот параметр про который писал выше autowidht: true, оказывается что проблемно будет что-то вывести с правой части от таблици, всё уходит под ниё, так что это не вариант. Но если делать через JS, возможно исправить проблему, но опять же, по коментам там я прочитал высказывания, что есть смещение у последней колонке, так что придётся использовать тот вариант что привёл по ссылке чуть выше, он лёгкий, и кода используется не так много, и встроить прислучаи можно куда угодно и без проблем.
Понимаете, судя по тому примеру, который вы показали, вам вообще не обязательно использовать JS
Вы можете использовать обычную HTML таблицу и может быть для некоторых функций использовать JS.
jqGrid – это попытка приблизиться к возможностям табличных редакторов (вроде Excel) в браузере. И пользоваться им имеет смысл если эти функции действительно нужны.
Посмотрите админки в популярных CMS (WordPress, Drupal,…), они не используют такие плагины.
Я хотел сказать: "Определитесь с задачами. Тогда я попробую что-то посоветовать."
спасибо, да скорее всего jqGrid не для меня, как вы упомянули больше под редактирование полей был предназначен. Лично в моих планах сделать вывод списка в виде таблици, с постраничником+сортировкой при этом должно быть без перезагрузки полной страници.
Это не сложно, тот пример, который вы приводили, сделан с использованием фреймворка Yii, но можно использовать и любой другой, библиотеки для пагинации (pagination, перелистывание) есть практически везде.
К тому же тут можно использовать прогрессивное улучшение. Т.е. если в браузере отключен JS, перелистывание будет выполняться с перегрузкой страницы, если JS работает – ajax запросами.
А как такое можно реализовать, используя для JS-enabled варианта связку jQuery+jqGrid ? Ну или подскажите, где почитать про примеры подобных реализаций.
Я не пойму зачем для этого jqGrid?
Почитать можно эту статью.