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 разработка View Comments

]]>
  • 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
    Чёто не выходит
  • 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
    разобрался с проблемой))
  • Wadimka
    Приветствую.
    Не подскажите как убрать ранее добавленные кнопки ? т.е. мне нужен метод противоположный "navButtonAdd".
  • В комментариях на странице предложен такой вариант.
    .jqGrid(”navButtonAdd”,”#your_pager”,{
    onClickButton:yourFunction,caption:"Show Full Tree" ,id:"tree_button"
    });
    Я не проверял.
  • Wadimka
    Решил :)
    $("#xxxxx").remove();
    Главное заранее Id присвоить.
    Проверено :)
  • Отличный вариант :)
  • Александр
    спасибо, да скорее всего jqGrid не для меня, как вы упомянули больше под редактирование полей был предназначен. Лично в моих планах сделать вывод списка в виде таблици, с постраничником+сортировкой при этом должно быть без перезагрузки полной страници.
  • Это не сложно, тот пример, который вы приводили, сделан с использованием фреймворка Yii, но можно использовать и любой другой, библиотеки для пагинации (pagination, перелистывание) есть практически везде.
    К тому же тут можно использовать прогрессивное улучшение. Т.е. если в браузере отключен JS, перелистывание будет выполняться с перегрузкой страницы, если JS работает - ajax запросами.
  • А как такое можно реализовать, используя для JS-enabled варианта связку jQuery+jqGrid ? Ну или подскажите, где почитать про примеры подобных реализаций.
  • Я не пойму зачем для этого jqGrid?
    Почитать можно эту статью.
  • Александр
    спасибо за ответы, на днях я был очень рад гриту, думал что на нём я разверну админ-панель, для своего нового движка, но сегодня когда увидел что почти тоже самое можно сделать и при этом JS код будет не такой огромный как у грита, вот страничка для примера
    http://yii.cubedwater.com/user/list

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

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

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

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

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

    Посмотрите админки в популярных CMS (WordPress, Drupal,...), они не используют такие плагины.
  • Александр
    спасибо, сейчас посмотрю. Но я тут поискал, и нашёл такое решение, с помощью параметра
    autowidht: true,

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

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

    По поводу jQuery-UI. Работать без него плагин будет, но оформления нет вообще. Т.е. придется добавить не только стили, но и все иконки.
    Кроме того, UI не обязательно тащить целиком. jqGrid нормально работает если подключить только стили из UI (без js файлов).
    Правда при этом вроде возникает какая-то ошибка (не помню точно), но я не заметил чтобы она влияла на работу плагина.
    После того, как подключил UI в самой минимальной конфигурации (только UI Core) ошибка исчезла.
  • Александр
    подскажите, не могу разобраться сделать таблицу резиновой?
    нужно чтобы таблица была на всю ширину(width: 100%) окна браузера
  • я нашел 2 решения: раз, два.
    Но оба используют JS, т.е. похоже, что с помощью настроек или только CSS сделать это нельзя.
  • skan
    Здравствуйте! Пробую залить на хостинг, не работает. Причем таблица рисуется, а вот данные не подгружаются. На локалке все работате отлично.
  • Без firebug'а не разобраться ;)
    Нужно проверить:
    1) Куда отправляется запрос (в консоле firebug), если изменился путь к php скрипту, будет 404-ая ошибка.
    2) Не возникают ли ошибки при выполнении php скрипта (может быть, например, из-за отсутствия поддержки json на сервере). Разворачивайте запрос в консоле и смотрите вкладку Response (в ней будет ответ сервера).
  • skan
    Спасибо за ответ! json не поддерживается на сервере.
  • Георгий
    Прошу прощения за наглость и назойливость. А не могли бы Вы пример описать ? Или подсказать где можно посмотреть подобный пример? Google - не спас.
  • А я не говорил, что это будет просто :)
    К тому же готового решения у меня нет, есть идеи как это сделать.
    Я бы начал с примера на оф.сайте (раздел Live Data Manipulation - Add row). Там показано как создать диалог для добавления записи.
    Причем во время создания этого диалога можно установить обработчики различных событий (beforeInitData, beforeShowForm, afterShowForm и т.д.).
    В один из этих обработчиков можно попробовать добавить код, который вставит форму загрузки файла внутрь диалога, т.е. получится диалог с двумя формами.
    Повторюсь, это только идеи, реализовать такой загрузчик я не пробовал.
  • Георгий
    А как бы с учётом статьи о загрузке файлов без перезагрузки страницы, научить данный плагин грузить файлы ? Я думаю если данный плагин будет работать ещё и с файлами то цены ему не будет :)
  • Это можно сделать.
    1) При добавлении или изменении записи открываем диалог с формой, которая содержит поля записи.
    2) В этот диалог нужно добавить еще одну форму для загрузки файла.
    Процедура будет выглядеть так. Нажимаете кнопку "Add", загружаете файл, после этого заполняете форму и жмете "Save".
  • Георгий
    Прошу прощения за офтоп. Столкнулся с проблемой при работе с данным плагином. Никак не получается при добовлении новой записи отправить файл на сервер. Может кто нибудь сталкивался с подобным ?
  • Записи в этом плагине добавляются с помощью AJAX. А файл вы AJAX'ом не отправите.
    Подробнее можно почитать здесь.
  • Игорь
    Обьясните пожалуйста как сделать таблицу как на примере http://trirand.com/jqgrid/jqgrid.html# таблица Form Navigation?
    Когда просто копируешь код он не работает!Мне надо чтоб в таблице были все кнопки работы с таблицей(поиск,ред.добавление и тд).
  • Код в том примере - это только клиентская часть. Ваш серверный (PHP) скрипт должен поддерживать все нужные функции (т.е. каждый тип запроса, которые отправляются при нажатии на кнопки).
    О части из них я рассказывал (поиск, например).
    По остальным вам, наверное, придется почитать документацию ;)
  • Яков
    Присоединяюсь к просьбе про поиск! и если не трудно, то на примере jqGrid 3.5.1.
  • ОК! Просьба учтена :)
  • Antizdoba
    Раскажите пожалуста как настроить поиск, а то что-то не получается. Кто вообще совершает его, сама таблица или запрос к базе и вывод в таблицу. Спасибо за статьи даже мне чайнику всё дошло!))
  • Я постараюсь написать в ближайшее время... правда у меня немного другая тема запланирована...

    Поиск выполняется на стороне сервера, т.к. данные находятся в базе. Таблица получает только те строки, которые отображаются на текущей странице. Поэтому сделать поиск по всему содержимому без запросов к БД не получится.
  • Эх... Убил на ваш сайт минут 20 - пока читал (: Начальник зашёл - пришлось браться за работу... Обязательно вернусь
  • Еще расскажи про поиск, очень удобно, я у себя в админке Кинсбурга замутил, все радует :)
  • Хорошо, учту на будущее ;)
  • StealthForce
    Альтернатива этому плагину FlexGrid и мне с ней приятней и проще и браузеры все кушает.
blog comments powered by Disqus ]]>