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