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

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

jqgrid custom buttons

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

Успехов!

  • StealthForce

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

  • StealthForce

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

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

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

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

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

  • Antizdoba

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

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

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

  • Antizdoba

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

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

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

  • Яков

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

  • Яков

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

  • Игорь

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

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

  • Игорь

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

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

  • Георгий

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

    • Записи в этом плагине добавляются с помощью AJAX. А файл вы AJAX'ом не отправите.
      Подробнее можно почитать здесь.

  • Георгий

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

    • Записи в этом плагине добавляются с помощью AJAX. А файл вы AJAX'ом не отправите.
      Подробнее можно почитать здесь.

  • Георгий

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

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

  • Георгий

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

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

  • Георгий

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

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

  • Георгий

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

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

  • skan

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

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

      • skan

        Спасибо за ответ! json не поддерживается на сервере.

  • skan

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

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

      • skan

        Спасибо за ответ! json не поддерживается на сервере.

  • Александр

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

    • я нашел 2 решения: раз, два.
      Но оба используют JS, т.е. похоже, что с помощью настроек или только CSS сделать это нельзя.

  • Александр

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

    • я нашел 2 решения: раз, два.
      Но оба используют JS, т.е. похоже, что с помощью настроек или только CSS сделать это нельзя.

  • Александр

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

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

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

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

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

  • Александр

    спасибо, сейчас посмотрю. Но я тут поискал, и нашёл такое решение, с помощью параметра
    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,…), они не используют такие плагины.

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

  • Александр

    спасибо за ответы, на днях я был очень рад гриту, думал что на нём я разверну админ-панель, для своего нового движка, но сегодня когда увидел что почти тоже самое можно сделать и при этом 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 не для меня, как вы упомянули больше под редактирование полей был предназначен. Лично в моих планах сделать вывод списка в виде таблици, с постраничником+сортировкой при этом должно быть без перезагрузки полной страници.

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

      • А как такое можно реализовать, используя для JS-enabled варианта связку jQuery+jqGrid ? Ну или подскажите, где почитать про примеры подобных реализаций.

  • Wadimka

    Приветствую.
    Не подскажите как убрать ранее добавленные кнопки ? т.е. мне нужен метод противоположный «navButtonAdd».

  • В комментариях на странице предложен такой вариант.
    .jqGrid(”navButtonAdd”,”#your_pager”,{
    onClickButton:yourFunction,caption:»Show Full Tree» ,id:»tree_button»
    });
    Я не проверял.

  • Wadimka

    Решил 🙂
    $(«#xxxxx»).remove();
    Главное заранее Id присвоить.
    Проверено 🙂

  • Отличный вариант 🙂

  • JtNET

    Здравствуйте. Попытался сделать как тут: http://www.trirand.com/blog/jqgrid/jqgrid.html раздел Live Data Manipulation ->Navigator

    но не получается. В чем ошибка?

    код индекса таков:

    <link href=»themes/basic/grid.css» media=»screen» rel=»stylesheet» type=»text/css»>
    <link href=»themes/jqModal.css» media=»screen» rel=»stylesheet» type=»text/css»>
    <link href=»main.css» media=»screen» rel=»stylesheet» type=»text/css»>

    <table class=»scroll» id=»list»></table>
    <div class=»scroll» id=»pager» style=»text-align:center;»></div>

    Для редактирования сделайте двойной клик на строке

    Enter — сохраняет новое значение

    Esc — отмена

    <script src=»jquery-1.3.1.min.js» type=»text/javascript»></script>
    <script src=»jquery.jqGrid.js» type=»text/javascript»></script>
    <script src=»js/min/jqDnR-min.js» type=»text/javascript»></script>

    <script type=»text/javascript»>
    jQuery(document).ready(function(){
    var lastSel;
    jQuery(«#list»).jqGrid({
    url:'getdata.php',
    datatype: 'json',
    mtype: 'POST',
    colNames:['№', 'Район', 'Адрес', 'Тип', 'Этаж', 'Этаж-ть', 'Общ', 'Жил', 'Кух', 'В/Сн', 'Угл', 'Тел',

    'с/у', 'Ком', 'Б/Л', 'Цена', 'Телефон'],
    colModel :[
    {name:'id', index:'id', width:25}
    ,{name:'district', index:'district', width:80, align:'right', editable:true, edittype:»text»}
    ,{name:'street', index:'street', width:148, align:'right', editable:true, edittype:»text»}
    ,{name:'level', index:'type', width:32, align:'right', editable:true, edittype:»text»}
    ,{name:'type', index:'level', width:45, align:'right', editable:true, edittype:»text»}
    ,{name:'all_level', index:'all_level', width:77, align:'right', editable:true, edittype:»text»}
    ,{name:'all_place', index:'all_place', width:40, align:'right', editable:true, edittype:»text»}
    ,{name:'life_place', index:'life_place', width:38, align:'right', editable:true, edittype:»text»}
    ,{name:'kitchen', index:'kitchen', width:33, align:'right', editable:true, edittype:»text»}
    ,{name:'bath', index:'bath', width:40, align:'right', editable:true, edittype:»text»}
    ,{name:'angle', index:'angle', width:30, align:'right', editable:true, edittype:»text»}
    ,{name:'telefone', index:'telefone', width:30, align:'right', editable:true, edittype:»text»}
    ,{name:'bathroom', index:'bathroom', width:26, align:'right', editable:true, edittype:»text»}
    ,{name:'type_room', index:'type_room', width:32, align:'right', editable:true, edittype:»text»}
    ,{name:'balcony', index:'balcony', width:30, align:'right', editable:true, edittype:»text»}
    ,{name:'price', index:'price', width:61, align:'right', editable:true, edittype:»text»}
    ,{name:'firm_telefone', index:'firm_telefone', width:65, align:'right', editable:true,

    edittype:»text»}
    ],
    pager: jQuery('#pager'),
    rowNum:5,
    rowList:[5,10,30],
    sortname: 'id',
    sortorder: «asc»,
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'Данные пользователей',
    ondblClickRow: function(id) {
    if (id && id != lastSel) {
    jQuery(«#list»).restoreRow(lastSel);
    jQuery(«#list»).editRow(id, true);
    lastSel = id;
    }
    },
    editurl: 'saverow.php'
    });
    });
    jQuery(«#list»).jqGrid('list','#pagernav',
    {}, //options
    {height:280,reloadAfterSubmit:false}, // edit options
    {height:280,reloadAfterSubmit:false}, // add options
    {reloadAfterSubmit:false}, // del options
    {} // search options );
    </script>

  • JtNET

    разобрался с проблемой))

  • None

    А можно подробней куда это вставлять

    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»

    });

    чтоб появились кнопки (добавить удалить итп , ) , потому что я в скриптах ноль

  • Смотрите в этой статье первый листинг. Вставлять сразу после строки 40.

  • None

    <table class=»scroll» id=»list»></table>

    <div class=»scroll» id=»pager» style=»text-align:center;»></div>

    Для редактирования сделайте двойной клик на строке

    Enter — сохраняет новое значение

    Esc — отмена

    Описание этого примера вы найдете в статье: jqGrid: редактирование табличных данных с помощью inline редакторов.

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

    <script src=»jquery-1.3.1.min.js» type=»text/javascript»></script>

    <script src=»jquery.jqGrid.js» type=»text/javascript»></script>

    <script type=»text/javascript»>

    jQuery(document).ready(function(){

    var lastSel;

    jQuery(«#list»).jqGrid({

    url:'getdata.php',

    datatype: 'json',

    mtype: 'POST',

    colNames:['Id','Логин', 'Фамилия', 'Имя', 'Отчество', 'email', 'Пол', 'Лет' , 'ICQ' , 'Телефон' , 'url', 'Интернет','Группа','Пароль'],

    colModel :[

    {name:'id', index:'id', width:22}

    ,{name:'login', index:'login', width:50, editable:true, edittype:»text»}

    ,{name:'surname', index:'surname', width:70, editable:true, edittype:»text»}

    ,{name:'fname', index:'fname', width:50, editable:true, edittype:»text»}

    ,{name:'lname', index:'lname', width:80, editable:true, edittype:»text»}

    ,{name:'email', index:'email', width:80, editable:true, edittype:»text»}

    ,{name:'sex', index:'sex', width:60, editable:true, edittype:»text»}

    ,{name:'age', index:'age', width:35, editable:true, edittype:»text»}

    ,{name:'ICQ', index:'ICQ', width:50, editable:true, edittype:»text»}

    ,{name:'phone', index:'phone', width:80, editable:true, edittype:»text»}

    ,{name:'url', index:'url', width:30, editable:true, edittype:»text»}

    ,{name:'internet', index:'internet', width:80, editable:true, edittype:»text»}

    ,{name:'group', index:'group', width:40, editable:true, edittype:»text»}

    ,{name:'password', index:'password', width:57, editable:true, edittype:»text»}

    ],

    pager: jQuery('#pager'),

    rowNum:5,

    rowList:[5,10,30],

    sortname: 'id',

    sortorder: «asc»,

    viewrecords: true,

    imgpath: 'themes/basic/images',

    caption: 'Данные пользователей',

    ondblClickRow: function(id) {

    if (id && id != lastSel) {

    jQuery(«#list»).restoreRow(lastSel);

    jQuery(«#list»).editRow(id, true);

    lastSel = id;

    }

    },

    editurl: 'saverow.php'

    });

    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»

    });

    });

    </script>

  • None

    Чёто не выходит

  • Мне сложно глядя только на этот код определить, что именно не работает. Если можете, выложите вашу страницу где-нибудь в сети, чтобы можно было firebug'ом посмотреть.

  • Yra

    Для того, чтоб увидеть кнопочки слева внизу (поиск, добавить, редактировать, …) мне помогло подключить файл: jquery.searchFilter.css.

    • Mouserok

      подложил jquery.searchFilter.css, а кнопки так и не появились (((

      • Посмотрите firebug'ом все ли файлы загрузились.

        • Mouserok

          а как к этому http://www.simplecoding.org/jqgrid-redaktirovanie-tablichnyx-dannyx-s-pomoshhyu-inline-redaktorov.html
          сделать табл. __http://trirand.com/blog/jqgrid/jqgrid.html
          меню Live Data Manipulation >> Navigator
          пробовал подставить, но что-то ничего не выходит ((

        • Посмотрите, этот пост. Там есть ссылки на примеры с навигатором.

        • Mouserok

          в консоле firebug показал Connection Error: Access denied for user 'www-data'@'localhost' (using password: NO)
          что не так ?? ведь это логин apache

        • Mouserok

          с Access denied for user 'www-data'@'localhost'
          разобрался
          а вот в рабочий вариант сделать табл. как в меню Live Data Manipulation >> Navigator
          не получилось (пробовал по разному в итоге ничего не получаю или в консоле выдает ошибку 500)

        • 500 ошибка — это ошибка сервера. Может возникать из-за ошибок в php коде или, например, в htaccess.
          Попробуйте по максимуму отключить все дополнительные возможности на сервере.

        • Mouserok

          знать бы что выключить — с таким раскладом легче сервак положить )))

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

  • Jarlaxle

    Народ, а как можно с помощью самодельной формы поиска искать и выводить данные в jqgrid? (не могу «догнать», как отправить данные в серв. скрипт (string sidx, string sord, int page, int rows, bool _search, string bugaga…).

    • У меня есть пост на эту тему.

      • Jarlaxle

        Спасибушки :), нашел.jQuery(«#list»)
              .setGridParam({url:»getdata.php?sel_city=»+value, page:1})
              .trigger(«reloadGrid»);Это то, что нужно.

  • Иван

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

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

      Алгоритм примерно такой.
      1) Найдите с помощью firebug саму кнопку и посмотрите её атрибуты (class, id и т.п.). Они нужны, чтобы найти кнопку с помощью JS.
      2) Добавьте обработчик. Например,
      $('#my_button').click(function() {
      //ваш код
      });

      • Иван

        а по конкретней можно, пожалуйста, на каком-нибудь из ваших примеров?

        • К сожалению, именно такого примера у меня нет.
          Установка обработчика события на любой элемент страницы — это 2 строчки кода.
          $('#my_button').click(function() {
          });

          Поиск кнопок в любом случае нужно выполнять с помощью firebug. Например, кнопку поиск в тулбаре jqGrid можно выбрать так $('.ui-icon-search')

        • Иван

          за основу взял ваш пример с inline-редактированием, добавил в него кнопки редактирования, как показано в вашем примере про создание доп. кнопок, добавил кнопку создания новой записи. При нажатии на создание новой записи выскакивает окошко с созданием записи, однако при нажатии на сохранение, ничего не происходит. Но при редактировании строки данные меняются. может быть дело в скрипте saverow.php в котором написан только sql update? как изменить saverow.php чтобы работал не только на изменение, но и на сохранение. Надеюсь, понятно написал ;)) 

        • Иван

          Вот сейчас получилось сделать так, чтобы в таблице появились данные, только при обновлении страницы они пропадают, а также в поле id подставляется jq1, вместо автоинкремента из базы sql

        • Установите firebug (это плагин к firefox). Он позволяет просматривать запросы и ответы сервера. Т.е. вы сможете посмотреть какие данные ушли на сервер и уходили ли они вообще. Также можно посмотреть ответ сервера.

          Без этой информации можно очень долго пытаться угадать в чем проблема.

  • Иван

    в firebuge следующее:
    post http://localhost/saverow.php OK
    в строках ответа:

    Заголовки ответаCache-Controlno-store, no-cache, must-revalidate, post-check=0, pre-check=0ConnectionKeep-AliveContent-Length0Content-Typetext/html; charset=windows-1251DateWed, 15 Feb 2012 07:31:38 GMTExpiresThu, 19 Nov 1981 08:52:00 GMTKeep-Alivetimeout=5, max=100Pragmano-cacheServerApache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8k PHP/5.2.12X-Powered-ByPHP/5.2.12Заголовки запросаAccept*/*Accept-Encodinggzip, deflateAccept-Languageru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3Connectionkeep-aliveContent-Length47Content-Typeapplication/x-www-form-urlencoded; charset=UTF-8CookiePHPSESSID=7dc5b2d03122dd892838e07f32434d7cHostherRefererhttp://her/index.phpUser-AgentMozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.1) Gecko/20100101 Firefox/10.0.1X-Requested-WithXMLHttpRequest

    в параметрах POST:

    Параметры application/x-www-form-urlencodedfield112
    field2
    _emptyoperadd
    field3
    21
    field4
    12Исходный код
    field1=21&
    field2=12&
    field3=12&oper=add&field2=_empty
     

    • Если я правильно понимаю, field1, field2… — это поля таблицы. Значит, данные уходят на сервер, посмотрите что возвращает скрипт (ответ в firebug).

      • Иван

        field с номерами — это поля. Ответа в firebug'e нету, как я понимаю надо на сервере разобрать пришедшие данные и в зависимости от типа операции выполнить ту или иную команду sql? Если так то подскажите как это реализовать?

  • Dima-kac

    А всё таки как удалить или добавить строку? Как правильно написать обработчик?

    • Вы имеете в виду серверный обработчик?
      Просто выполните запрос на удаление.
      DELETE FROM table WHERE id=$row_id

  • de1phi

    есть страница с UI Tabs. на одной закладке есть таблица на основе jqGrid.для pager'a добавлена кнопка:jQuery(«#list»).navGrid('#pager',{edit:false,add:false,del:false,refresh:true})        .navButtonAdd('#pager',{            caption:»Add», buttonimg:»add.gif», onClickButton: function(){ alert(«Adding Row»)}});при первой загрузке страницы кнопка срабатывает, но после переключения с вкладки на вкладку — реакция на кнопку — нулевая. Хотя refresh работает. firebug ошибок не выдает

    • de1phi

      alert отрабатывает, а вот например $('#dialog').dialog('open'); нет. 

    • Может быть несколько причин для такого поведения. Зависит от того как реализованы табы. Угадать я вряд ли смогу, будет лучше если вы сможете где-нибудь выложить ваш код. Так чтобы я смог его потестировать.

      • de1phi

        код предоставить не могу (корпоративный портал). табы реализованы на основе AJAX Mode. не срабатывает именно на вызовах UI методов (в моем случает показ диалога)

        • Ясно, тогда попробую угадать 🙂
          При переключении табов заново созадется таблица (вставляется в DOM), но код, который устанавливает обработчики на кнопки #pager уже не выполняется.

        • de1phi

          и существует решение этого?

        • Да, конечно.
          1) Переключать табы за счет изменения стилей, т.е. так чтобы при этом не изменялся DOM той части страницы в которую вставлена таблица.
          2) После переключения таба выполнять код, который устанавливает обработчики для кнопок.

        • de1phi

          поздно переделывать переключение. Может есть функция обновления DOM при загрузке таба

        • Попробуйте использовать jQiery.live для установки обработчиков.

  • Ivan

    Добрый день, Владимир! подскажите пожалуйста как увеличить размер кнопок внизу в таблице, кнопки типа редактировать и пр. Наверное плохо искал в css ((

    • Дело в том, что для оформления jqGrid (последних версий) используется jQuery UI, т.е. правильно будет создать собственную тему оформления для этой библиотеки.

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

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

      • Ivan

        да я так уже и сделал )) Спасибо за ответ!!! 

  • hunt43

    Нужно реализовать кнопку копирования выделенной записи. Есть такой код:
    jQuery(«#current_rec»).navGrid('#current_rec_nav',{})
    .navButtonAdd('#current_rec_nav',
    caption:»Копировать», buttonimg:»themes/basic/images/row_add.gif»,
    onClickButton: function(){
    var gr = jQuery(«#current_rec»).getGridParam(«selrow»);
    if( gr != null ) {
      jQuery(«#current_rec»).jqGrid('delGridRow',gr,{reloadAfterSubmit:true, url: 'scripts/current_copy_record.php'});
    } else { alert(«Выберите запись для копирования!»); };
    },position:»last»});

    Как я понимаю, нужно заменить delGridRow на какое-то значение, которое бы позволяло копировать, а не удалять. Подскажите, как быть?

    • Функции копирования нет. Есть функция вставки. Вызывается так
      jQuery(«#grid_id»).jqGrid('editGridRow', «new», properties );
      properties — массив со значениями новой строки.Попробуйте сформировать его из данных в переменной gr.

      • hunt43

        А как это может выглядеть? Каков примерный код?

        • Сначала посмотрите в консоле firebug что содержит переменная gr. Если в ней есть массив вида «имя_поля»:»значение», то его нужно передать в параметре properties.
          Дальше просто вызываете
          jQuery(«#grid_id»).jqGrid('editGridRow', «new», properties );

        • hunt43

          Вот, что пишет при нажатии Ctrl+Shift+L (использую Firebug Lite в Opera. FireFox не могу использовать — запускается много копий drwtsn32):

          http://localhost/dip/2/index.php
          http://localhost/dip/2/index.php#
          javascript:void(0)

        • Что-то не то вы смотрите. Если не получается использовать firebug, попробуйте инструменты google chrome. Во вкладке Scripts поставьте точку останова на строке
          if (gr != null)
          Нажмите на кнопку «Копировать», выполнение скрипта остановится на вашей точке останова. Перейдите на вкладку Консоль, напишите gr и нажмите enter.
          Ниже появится значение, записанное в переменную gr.

  • hunt43

    Пишет: gr=6. Ну, он мне дал индекс, а что с ним делать? Какой метод вставляет новую строку и как достать значения колонок нужной записи? Нашел addRowData(rowid, data, position, srcrowid). Но как с ним работать и как передать инфу в php-скрипт?

    • Есть два варианта записи метода saveRow, который отправляет данные на сервер.

      • hunt43

        Я читал все эти инструкции. там нет ответа на вопрос: как привязать выполнение скрипта при добавлении записи?
        Кроме того, как автоматом сгенерировать id  при добавлении записи? Сейчас id=99 — для примера, но ведь он должен генерироваться автоматом… Вот код:
        jQuery(«#current_rec»).navGrid('#current_rec_nav',{}) // копировать запись
        .navButtonAdd('#current_rec_toppager_left',{
        caption:»Копировать», buttonimg:»themes/basic/images/row_add.gif», onClickButton: function(){
        var gr = jQuery(«#current_rec»).getGridParam(«selrow»);
        if( gr != null ) {
        var rowId = $(«#current_rec»).getRowData(gr); var datarow = {order_name:rowId.order_name, phone:rowId.phone, email:rowId.email, university:rowId.university}; var su=jQuery(«#current_rec»).jqGrid('addRowData',99,datarow); if(su){
        jQuery(«#current_rec»).saveRow(99, {succesfunc: function() { return true; }}, 'scripts/current_copy_record.php');
        alert(«Succes. Write custom code to add data in server»);
        } else alert(«Can not update»);
        } else { alert(«Выберите запись для копирования!»); };
        },position:»last»
        });

        • > как привязать выполнение скрипта при добавлении записи?

          В вашем коде вы явно вызываете saveRow. Перед ее вызовом или после него вы можете выполнить любой код. Зачем что-то привязывать?

          > как автоматом сгенерировать id

          Обычно id генерируется при вставке записи в базу данных, т.е. на стороне сервера.

        • hunt43

          1. как выполнить php-скрипт перед saveRow вызовом или после него?
          2. как отправить id из скрипта в javascript?

        • У меня такое чувство, что вы пытаетесь решить стандартную задачу не стандартным способом. Судя по предыдущим комментариям, вам нужно добавить запись в таблицу. Для этого нужно отправить данные новой записи (без id) на сервер. php скрипт добавляет эти данные в базу и возвращает их назад вместе с id. Выполнять php скрипт перед saveRow не нужно.

  • hunt43

    Так в этом и дело: как добавить запись, не используя форму ввода? Как я понимаю, для записи используется функция saveRow, а там надо знать id! Как в БД добавить запись?

    • saveRow не создаёт новую запись, она сохраняетсуществующую (после редактирования)

      > Как в БД добавить запись?

      SQL запросом — INSERT ….

      • hunt43

        Как вызвать php-скрипт, а ПОСЛЕ этого обновить отображаемого в таблице?

        • Отправляете AJAX запрос. При создании такого запроса вы указываете функцию, которая будет вызвана после получения ответа от сервера. В этой функции запускаете обновление таблицы
          $(«#grid»).trigger(«reloadGrid»);

  • hunt43

    На странице есть табы. В каждом табе по таблице с JQGrid. Нужно, чтобы в каждой таблице была горизонтальная прокрутка. Использую такой код для каждой JQGrid:
    datatype: 'json', sortname: 'srok', sortorder: 'asc', height:500, rowNum: 100, toppager: true, rownumbers: true, scrolling: true, shrinkToFit: false, autowidth: true, checkOnSubmit: true, headertitles:true,

    В первом табе у таблицы горизонтальная прокрутка есть, а в остальных прокрутки нет. Перемещал таблицы в первый таб и там прокрутка появлялась, но в тех табах, в которых нужно, горизонтальная прокрутки нету. В чем причина?

    • Скорее всего, в том, что для всех табов кроме первого CSS стили применяются по-другому. Посмотрите firebug'ом стили для блока в котором есть прокрутка. Там должно быть свойство overflow. Возможно, правила для остальных табов перезаписывают это свойство.

      • hunt43

        Еще такое уточнение: на других табах, кроме первого, ширина таблицы больше ширины экрана и появляется прокрутка внизу страницы и, соответственно, прокручиваются не только столбцы таблицы, но ваще вся инфа на этой странице.
        Добавил к самому блоку с табами overflow:hidden — теперь пропала прокрутка самой страницы, а у таблиц не появилась.

        • Значит нужно сначала уменьшить ширину таблицы так, чтобы они помещались внутри табов. Иначе горизонтальная прокрутка на странице останется.

  • Александр General

    А возможно ли чтобы pager был сверху (над названиями колонок)?

  • максим

    Подскажите а как при нажатии на своей
    кнопке всплывало свое окно для ввода данных?

    • Посмотрите пример на странице http://www.guriddo.net/demo/guriddojs/ (в меню нужно выбрать «Editing, Adding, Deleting rows» -> «Dialogs: Edit, Add, Delete»). В примере показано создание диалогов для ввода, редактирования и удаления строк.

      • максим

        Спасибо, не ожидал, что так быстро ответите, поясню, что мне нужно, у меня есть таблица, данные выводятся (добавляются удаляются и редактируются) с помощью стандартного jqGrid('navGrid','#pager',{}. Мне же необходимо задать условия вывода данных чтобы при необходимости выводились не все данные, а только с (дата) по (дата), я в навигацию добавил кнопку и хочу чтобы по клику всплывало такое же окно, ну например как при добавлении данных, только со своими пользовательскими полями,(2 input type='edit' и кнопка сабмит) и при вводе даты в эти поля, и по нажатию сабмит, данные передавались на php скрипт, где уже в зависимости от этих данных будет формироваться sql запрос. Есть ли возможность это сделать методами jqgrid.

        • Максим

          То есть при нажатии на добавленную кнопку должно всплывать окно как при добавлении записи, только переменная oper, передаваемая постом должна быть не аdd? а своя, ну и переменные полей тоже свои, пока я не нашел решения, разве что писать свою функцию, при нажатии на кнопке и таким образом передавать данные

        • максим

          .click(function(){
          jQuery(«#mytable»).jqGrid('editGridRow',»new»,{height:280,reloadAfterSubmit:false});вот этим методом можно вывести такое же окно как при добавлении, но как поменять у него внутренности? в описании нашел только как поменять url, а вот как заменить поля?

        • Максим

          Извините, что тут Вам наспамил, а то 3 года спокойно было:), форму я все таки создал горе пополам, на основе добавления записи, остался только один вопрос как сделать чтобы по кнопке сабмит передавалось переменная oper равна была не add а какое нибудь другое значение ?

        • По-моему, лучше в качестве основы для формы использовать форму поиска, а не создания новой записи.

          У меня есть пример использования этой формы — http://www.simplecoding.org/jqgrid-poisk-dannyx.html

          Только обязательно прочитайте официальную документацию — http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config

          Дело в том, что у меня показан пример использования одного из вариантов формы поиска, в котором можно добавлять произвольное количество полей. Но есть ещё 3 варианта, возможно один из них будет более подходящим для вас. Также в документации есть пример подключения календаря (datepicker).

  • Максим

    Владимир подскажите, необходимо, чтобы при выборе ячейки, алертом выводилось значение id строки.
    Есть следующий код, добавлена пользовательская кнопка
    .navButtonAdd('#pager',{caption:»Выбор»,id :»mybut»,buttonicon:»ui-icon-shuffle»,onClickButton: function(){var k='здесь нужен id выделенной строки»; alert(k)}}) Как получить?

    • Максим

      id, имеется ввиду индификатор, поле из базы данных

      • Максим

        Нашел ответ у Вас ниже в обсуждениях, var k=jQuery(«#list1»).getGridParam(«selrow»)

  • Максим

    Владимир, хочу задать еще один вопрос, может поможете?, в таблице все что хотел реализовал, остался один момент, нужно вывести печатную форму, в которой будут присутствовать данные с полей таблицы(проще говоря сформировать страницу с html разметкой и с переменными из таблицы). создал пользовательскую кнопку, передаю POSTом данные которые необходимы для формирования печатной формы в файл print.php. И тут вопрос что дальше с этим делать, как и каким способом передать форму клиенту, хотя бы просто сориентируйте в какую сторону смотреть, или может подскажите какой нибудь другой способ реализации этой задачи. Спасибо

    • Если я правильно понял, запрос скрипту print.php, вы отправили. Теперь нужно чтобы print.php сформировал пригодную для печати страницу и отправил её пользователю.

      Есть несколько вариантов. На мой взгляд, если нужно печатать табличные данные, то лучше всего отправлять либо xls, либо pdf файл.

      Для того, чтобы их сформировать удобно использовать специальные библиотеки. dompdf для pdf и PHPExcel для xls.

      Например, попробуйте вставить в print.php следующий код

      <?php
      require_once 'PHPExcel-1.8.0/Classes/PHPExcel.php';

      $locale = 'ru';
      $validLocale = PHPExcel_Settings::setLocale($locale);
      if (!$validLocale) {
      echo 'Unable to set locale to ' . $locale . " - reverting to en_us" . PHP_EOL;
      }
      $document = new PHPExcel();
      $document->getProperties()->setCreator('Vladimir');

      $workSheet = $document->getActiveSheet();
      $workSheet->setTitle('test xls file');

      $workSheet->setCellValueByColumnAndRow(0, 1, 'value 1');
      $workSheet->setCellValueByColumnAndRow(0, 2, 'value 2');

      $workSheet->getColumnDimension('A')->setWidth(40);

      header('Content-Type: application/vnd.ms-excel');
      header('Content-Disposition: attachment;filename="test_file.xls"');
      header('Cache-Control: max-age=0');

      $objWriter = PHPExcel_IOFactory::createWriter($document, 'Excel5');
      $objWriter->save('php://output');

      После отправки запроса к print.php, у вас должна начаться загрузка xls файла. Естественно, предварительно нужно скачать библиотеку.

      • Максим

        Владимир, большое спасибо

      • Максим

        Владимир спасибо еще раз, наверняка это вариант пригодится, но хотелось бы сделать следующее. Например отправляю я print.php переменную k=10, и мне нужно чтобы на стороне клиента открылось, новое модальное окно , либо новое окно браузера следующего содержания… Привет переменная к=10….., можно ли это реализовать?

        • Максим

          уточню переменная k отправляется скрипту print.php методом post через добавленную кнопку jqgrid, то есть насколько понимаю отправляется c помощью ajax. Насчет кода который Вы дали, вставил его в print.php, при обращении напрямую к файлу print.php, все нормально, через запрос ajax ничего не происходит

        • Тут может быть две причины:

          1) ajax запрос вообще не отправляется — это легко проверить с помощью инструментов веб мастера в chrome или firebug в firefox. На вкладке «Сеть» можно отфильтровать ajax-запросы (XHR). Если запрос был отправлен, то вы увидите его в списке и сможете посмотреть заголовки и ответ сервера.

          2) ваш js код не обрабатывает ответ на ajax запрос. Мне сложно сказать в чем ошибка, т.к. ваш код я не вижу, но выглядеть запрос должен примерно так:

          $.post("print.php", {k: 10}, function(data) {
          //код создания модального окна, параметр data содержит ответ сервера
          });