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).
Успехов!
Понравилась статья? Подписывайтесь на продолжение
!
Добавьте эту страницу в
Tweet
Опубликовано в Ajax, JavaScript, Web разработка Комментарии (109) »
Вы можете оставить комментарий. Трекбеки закрыты.
-
StealthForce
-
StealthForce
-
http://adw0rd.ru/ adw0rd
-
http://www.simplecoding.org/ Владимир
-
http://adw0rd.ru adw0rd
-
http://www.football-pro.info/ Alex
-
http://www.football-pro.info Alex
-
Antizdoba
-
http://www.simplecoding.org/ Владимир
-
Antizdoba
-
Яков
-
http://www.simplecoding.org/ Владимир
-
Яков
-
Игорь
-
http://www.simplecoding.org/ Владимир
-
Игорь
-
Георгий
-
http://www.simplecoding.org/ Владимир
-
Георгий
-
Георгий
-
http://www.simplecoding.org/ Владимир
-
Георгий
-
Георгий
-
http://www.simplecoding.org/ Владимир
-
Георгий
-
skan
-
http://www.simplecoding.org/ Владимир
-
skan
-
skan
-
skan
-
Александр
-
http://www.simplecoding.org/ Владимир
-
Александр
-
Александр
-
http://www.simplecoding.org/ Владимир
-
Александр
-
Александр
-
http://www.simplecoding.org/ Владимир
-
http://www.simplecoding.org/ Владимир
-
Александр
-
Александр
-
http://www.simplecoding.org/ Владимир
-
http://www.xcnews.ru/ Zomb1e
-
http://www.simplecoding.org/ Владимир
-
Александр
-
http://www.xcnews.ru Zomb1e
-
Wadimka
-
http://www.simplecoding.org Владимир
-
Wadimka
-
http://www.simplecoding.org Владимир
-
JtNET
-
JtNET
-
None
-
http://www.simplecoding.org Владимир
-
None
-
None
-
http://www.simplecoding.org Владимир
-
Yra
-
Mouserok
-
http://www.simplecoding.org Владимир
-
Mouserok
-
http://www.simplecoding.org Владимир
-
Mouserok
-
Mouserok
-
http://www.simplecoding.org Владимир
-
Mouserok
-
http://www.simplecoding.org Владимир
-
Jarlaxle
-
http://www.simplecoding.org Владимир
-
Jarlaxle
-
Иван
-
http://www.simplecoding.org Владимир
-
Иван
-
http://www.simplecoding.org Владимир
-
Иван
-
Иван
-
http://www.simplecoding.org Владимир
-
Иван
-
http://www.simplecoding.org Владимир
-
Иван
-
http://www.simplecoding.org Владимир
-
Dima-kac
-
http://www.simplecoding.org Владимир
-
de1phi
-
de1phi
-
http://www.simplecoding.org Владимир
-
de1phi
-
http://www.simplecoding.org Владимир
-
de1phi
-
http://www.simplecoding.org Владимир
-
de1phi
-
http://www.simplecoding.org Владимир
-
Ivan
-
http://www.simplecoding.org Владимир
-
Ivan






