jqGrid – создание дополнительных кнопок

Владимир | | Ajax, JavaScript, Web разработка.

Пишу этот пост, т.к. недавно столкнулся с проблемой при использовании 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).

Успехов!