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

4 августа, 2009
jqgrid custom buttons

Пишу этот пост, т.к. недавно столкнулся с проблемой при использовании jqGrid. Об этом плагине для jQuery я уже рассказывал (часть 1, часть 2), поэтому повторяться нет смысла, скажу только, что, на мой взгляд, он представляет собой одно из лучших JS решений для работы с большими таблицами.

А проблема возникла, в общем-то, тривиальная – не достаточно подробная документация.

Дело было так. Один из читателей этого блога (Виктор Волков) попросил меня помочь добавить дополнительные кнопки в навигационную панель jqGrid. Я естественно отправил ему ссылку на соответствующую страницу справки :) … Но при этом я не знал, что если скопировать код от туда, то работать он не будет.

Хотя их демонстрационные примеры с дополнительными кнопками прекрасно работают.

В общем, ситуация такая. В дистрибутив плагина помимо основного файла (jquery.jqGrid.js) входят ещё 37 JS файлов, причём подгружаются они автоматически.

Т.е. вы подключаете только jQuery и jqGrid

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.jqGrid.js"></script>

Но, как оказывается, для создания собственных кнопок этого не достаточно. Нужно вручную подключить ещё и jqDnR-min.js.

  1. <script type="text/javascript" src="js/min/jqDnR-min.js"></script>

Вообще-то в документации есть пример создания специального загрузочного скрипта, в котором можно указать какие файлы нужно подключить. Но в том разделе речь идет об изменении структуры папок в проекте.

К тому же в документации не сказано, какие файлы, в каком случае нужно подключать. Очень похоже на ситуацию «угадай с 3-х раз» :)

Конечно, всегда можно открыть страницу с их демонстрационными примерами и с помощью Firebug посмотреть какие скрипты при этом используются (кстати, я так и сделал), но все-таки удобнее пользоваться документацией.

В заключение привожу скрипт, создающий три дополнительные кнопки (Find, Add и Del).

  1. jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"})
  2.         .navButtonAdd('#pager',{
  3.             caption:"Add", buttonimg:"themes/basic/images/row_add.gif", onClickButton: function(){ alert("Adding Row")}, position:"last"
  4.             }).navButtonAdd('#pager',{
  5.               caption:"Del", buttonimg:"themes/basic/images/row_del.gif", onClickButton: function(id){ alert("Deleting Row: "+id)}, position:"last"
  6.              });

Принцип достаточно простой. Если вы хотите использовать стандартную кнопку, то указываете её в параметрах метода navGrid. В этом примере так создана кнопка Find.

Если вы хотите создать собственные кнопки, то используйте метод navButtonAdd. В его параметрах можно указать надпись, картинку, размещение и обработчик.

Естественно, если вы создаёте свой вариант кнопки Add, то в параметрах navGrid нужно отключить стандартную (add:false).

Успехов!

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в Ajax, JavaScript, Web разработка Комментарии (30) »

]]>

Комментарии (30)

Вы можете отслеживать обсуждение записи с помощью RSS 2.0 rss link

Вы также можете оставить комментарий, или трекбек с Вашего сайта.

]]>
  1. StealthForce

    Альтернатива этому плагину FlexGrid и мне с ней приятней и проще и браузеры все кушает.

  2. Еще расскажи про поиск, очень удобно, я у себя в админке Кинсбурга замутил, все радует :)

  3. Эх… Убил на ваш сайт минут 20 – пока читал (: Начальник зашёл – пришлось браться за работу… Обязательно вернусь

  4. Antizdoba

    Раскажите пожалуста как настроить поиск, а то что-то не получается. Кто вообще совершает его, сама таблица или запрос к базе и вывод в таблицу. Спасибо за статьи даже мне чайнику всё дошло!))

    • Я постараюсь написать в ближайшее время… правда у меня немного другая тема запланирована…

      Поиск выполняется на стороне сервера, т.к. данные находятся в базе. Таблица получает только те строки, которые отображаются на текущей странице. Поэтому сделать поиск по всему содержимому без запросов к БД не получится.

  5. Яков

    Присоединяюсь к просьбе про поиск! и если не трудно, то на примере jqGrid 3.5.1.

  6. Игорь

    Обьясните пожалуйста как сделать таблицу как на примере http://trirand.com/jqgrid/jqgrid.html# таблица Form Navigation?
    Когда просто копируешь код он не работает!Мне надо чтоб в таблице были все кнопки работы с таблицей(поиск,ред.добавление и тд).

    • Код в том примере – это только клиентская часть. Ваш серверный (PHP) скрипт должен поддерживать все нужные функции (т.е. каждый тип запроса, которые отправляются при нажатии на кнопки).
      О части из них я рассказывал (поиск, например).
      По остальным вам, наверное, придется почитать документацию ;)

  7. Георгий

    Прошу прощения за офтоп. Столкнулся с проблемой при работе с данным плагином. Никак не получается при добовлении новой записи отправить файл на сервер. Может кто нибудь сталкивался с подобным ?

  8. Георгий

    А как бы с учётом статьи о загрузке файлов без перезагрузки страницы, научить данный плагин грузить файлы ? Я думаю если данный плагин будет работать ещё и с файлами то цены ему не будет :)

    • Это можно сделать.
      1) При добавлении или изменении записи открываем диалог с формой, которая содержит поля записи.
      2) В этот диалог нужно добавить еще одну форму для загрузки файла.
      Процедура будет выглядеть так. Нажимаете кнопку "Add", загружаете файл, после этого заполняете форму и жмете "Save".

  9. Георгий

    Прошу прощения за наглость и назойливость. А не могли бы Вы пример описать ? Или подсказать где можно посмотреть подобный пример? Google – не спас.

    • А я не говорил, что это будет просто :)
      К тому же готового решения у меня нет, есть идеи как это сделать.
      Я бы начал с примера на оф.сайте (раздел Live Data Manipulation – Add row). Там показано как создать диалог для добавления записи.
      Причем во время создания этого диалога можно установить обработчики различных событий (beforeInitData, beforeShowForm, afterShowForm и т.д.).
      В один из этих обработчиков можно попробовать добавить код, который вставит форму загрузки файла внутрь диалога, т.е. получится диалог с двумя формами.
      Повторюсь, это только идеи, реализовать такой загрузчик я не пробовал.

  10. skan

    Здравствуйте! Пробую залить на хостинг, не работает. Причем таблица рисуется, а вот данные не подгружаются. На локалке все работате отлично.

    • Без firebug'а не разобраться ;)
      Нужно проверить:
      1) Куда отправляется запрос (в консоле firebug), если изменился путь к php скрипту, будет 404-ая ошибка.
      2) Не возникают ли ошибки при выполнении php скрипта (может быть, например, из-за отсутствия поддержки json на сервере). Разворачивайте запрос в консоле и смотрите вкладку Response (в ней будет ответ сервера).

  11. Александр

    подскажите, не могу разобраться сделать таблицу резиновой?
    нужно чтобы таблица была на всю ширину(width: 100%) окна браузера

  12. Александр

    спасибо, сейчас посмотрю. Но я тут поискал, и нашёл такое решение, с помощью параметра
    autowidht: true,

    в этом случаи таблица примит ширину окна браузера. Единственное, оно не динамичное, если потом попытаться изменить размеры окна браузера, то таблица будет не измененной, и будет сохранять ту ширину что было при загрузке страницы. В принципе этот вариант неплохой.

    Да и вот тут ещё такой вопрос, заметил что Грит теперь использует стили от jQuery-UI, раньше в первых версиях на сколько я помню он не применялся, можно ли как-то избавиться от UI? я бы не хотел тащить такой тяжёлый груз только для таблицы, а использовать свои стили?

    • Вообще-то я не думаю, что использование JS для изменения ширины таблицы такой уж большой недостаток, ведь все равно без JS плагин вообще работать не будет.

      По поводу jQuery-UI. Работать без него плагин будет, но оформления нет вообще. Т.е. придется добавить не только стили, но и все иконки.
      Кроме того, UI не обязательно тащить целиком. jqGrid нормально работает если подключить только стили из UI (без js файлов).
      Правда при этом вроде возникает какая-то ошибка (не помню точно), но я не заметил чтобы она влияла на работу плагина.
      После того, как подключил UI в самой минимальной конфигурации (только UI Core) ошибка исчезла.

  13. Александр

    спасибо за ответы, на днях я был очень рад гриту, думал что на нём я разверну админ-панель, для своего нового движка, но сегодня когда увидел что почти тоже самое можно сделать и при этом JS код будет не такой огромный как у грита, вот страничка для примера
    http://yii.cubedwater.com/user/list

    тут есть постраничник, а также сортировка, если нужно то можно и поиск дописать, а редактирование ячеек у таблиц, в принципе не столь и важная часть, хотя это можно сделать немного по другому..

    кстати, Владимир, наверняка существуют ещё подобные сайты что я привёл ссылку, где реализована примерно также, не могли бы подсказать ссылки на такие сайты если конечно знаете, было бы интересно посмотреть по изучать как и сам jQuery

    кстати, протестировал я тот параметр про который писал выше autowidht: true, оказывается что проблемно будет что-то вывести с правой части от таблици, всё уходит под ниё, так что это не вариант. Но если делать через JS, возможно исправить проблему, но опять же, по коментам там я прочитал высказывания, что есть смещение у последней колонке, так что придётся использовать тот вариант что привёл по ссылке чуть выше, он лёгкий, и кода используется не так много, и встроить прислучаи можно куда угодно и без проблем.

    • Понимаете, судя по тому примеру, который вы показали, вам вообще не обязательно использовать JS :)

      Вы можете использовать обычную HTML таблицу и может быть для некоторых функций использовать JS.

      jqGrid – это попытка приблизиться к возможностям табличных редакторов (вроде Excel) в браузере. И пользоваться им имеет смысл если эти функции действительно нужны.

      Посмотрите админки в популярных CMS (WordPress, Drupal,…), они не используют такие плагины.

    • Я хотел сказать: "Определитесь с задачами. Тогда я попробую что-то посоветовать."

  14. Александр

    спасибо, да скорее всего jqGrid не для меня, как вы упомянули больше под редактирование полей был предназначен. Лично в моих планах сделать вывод списка в виде таблици, с постраничником+сортировкой при этом должно быть без перезагрузки полной страници.

    • Это не сложно, тот пример, который вы приводили, сделан с использованием фреймворка Yii, но можно использовать и любой другой, библиотеки для пагинации (pagination, перелистывание) есть практически везде.
      К тому же тут можно использовать прогрессивное улучшение. Т.е. если в браузере отключен JS, перелистывание будет выполняться с перегрузкой страницы, если JS работает – ajax запросами.

]]>

Оставить комментарий

* - обязательные для заполнения поля

]]>