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

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

jqgrid

В одной из прошлых статей (jQuery Grid Plugin — "продвинутое" решение для создания таблиц) я рассказывал об использовании jqGrid для создания таблиц.

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

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

Прежде всего, напомню, что данные хранятся на стороне сервера (в базе данных) и плагин к ним непосредственного доступа не имеет. Он может только вызвать серверный (PHP) скрипт и передать ему новые значения.

Редактировать записи в таблице можно 2 способами.

1) В отдельном окне. При редактировании строки появляется окно со всеми полями, в которые нужно ввести новые значения. Клик по кнопке «OK» отправит данные серверу.

2) С использованием inline редакторов. В режиме редактирования текст строки заменяется полями для ввода данных. Нажатие на клавишу Enter отправляет измененные данные.

Общий принцип работы в обоих случаях один и тот же. Поэтому мы рассмотрим только один вариант (с использованием inline редакторов).

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

В тексте этой статьи приводить полный код скриптов нет смысла, остановимся только на тех моментах, которые касаются редактирования. Но вы можете скачать архив с этим примером и поэкспериментировать с демонстрационной страницей.

Source Demo

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

jQuery(document).ready(function(){
	var lastSel;
	jQuery("#list").jqGrid({
		url:'getdata.php',
		datatype: 'json',
		mtype: 'POST',
		colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
		colModel :[
			{name:'id', index:'id', width:30}
			,{name:'surname', index:'surname', width:80, align:'right', editable:true, edittype:"text"}
			,{name:'fname', index:'fname', width:90, editable:true, edittype:"text"}
			,{name:'lname', index:'lname', width:80, 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'
	}); 
});

В строке 2 мы добавили переменную lastSel, которая служит для хранения id строки, редактируемой в данный момент.

Также немного изменились строки 10-12 (по сравнению с предыдущим примером). В них перечислены параметры ячеек таблицы и для каждой ячейки (кроме первой, в которой хранится id записи) мы добавили параметры editable:true и edittype:"text".

Первый параметр делает ячейку редактируемой, второй – указывает, что в ячейке нужно создать обычное текстовое поле. Другие значения этого параметра: textarea, checkbox и select.

После этого создаем обработчик события ondblClickRow (строки 22-28). В нем мы проверяем что пользователь кликнул по строке и эта строка в данный момент не редактируется. Восстанавливаем значения в строке, которая редактировалась перед этим (с помощью restoreRow) и переводим новую строку в режим редактирования (функция editRow).

Обратите внимание на второй параметр функции editRow. Он должен быть равен true для того, чтобы сохранение данных выполнялось при нажатии на клавишу Enter.

И последнее изменение (строка 29). В параметре editurl указываем имя серверного скрипта, который будет сохранять данные.

Теперь остается только написать серверный (PHP) скрипт (saverow.php).

<?php
require_once('dbdata.php');

try {
    //читаем новые значения
    $id = $_POST['id'];
    $surname = $_POST['surname'];
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    
    //подключаемся к базе
    $dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
    //указываем, мы хотим использовать utf8
    $dbh->exec('SET CHARACTER SET utf8');

    //определяем количество записей в таблице
    $stm = $dbh->prepare('UPDATE users SET surname=?, fname=?, lname=? WHERE id=?');
    $stm->execute(array($surname, $fname, $lname, $id));
}
catch (PDOException $e) {
    echo 'Database error: '.$e->getMessage();
}

// end of saverow.php

Здесь мы читаем новые значения (названия параметров в массиве $_POST совпадают с названиями столбцов таблицы) (строки 6-9).

После этого подключаемся к базе и обновляем запись (строки 11-18). Чтобы показать основную идею я максимально сократил код, убрал проверки и использовал PDO для работы с базой.

Всё, теперь можно спокойно редактировать записи в таблице.

Если есть вопросы или замечания, пишите, постараюсь ответить 😉

До встречи!

  • Tovit

    Как-то пропустил в Reader'е Вашу первую статью об этом плагине…
    Давно присматриваюсь к нему, но как-то не мог найти времени заняться документацией.

    Спасибо за эти статьи — это хороший старт для начала использования этого плагина.

  • Tovit

    Как-то пропустил в Reader'е Вашу первую статью об этом плагине…
    Давно присматриваюсь к нему, но как-то не мог найти времени заняться документацией.

    Спасибо за эти статьи — это хороший старт для начала использования этого плагина.

  • Serator

    Владимир, а как же защита?
    alert(1);Хоть не валидно, но прошло на ура 😉
    + при открытии поля для редактирования как-то логично было бы закрывать при клике вне его, аль при потере фокуса всех его инпутов (мышкой-то тоже бывает нужно закрыть)
    + при двойном клике (кстати не всегда срабатывает) выбирается первое поле, хоть щелкаешь и на другом
    + для юзабилити можно убрать выделение по двойному клику, иначе видно, что слово выделяется, а после превращается в инпут

    Все испытывалось в Fx 3.5 Preview (beta 99)

  • Serator

    Владимир, а как же защита?
    alert(1);Хоть не валидно, но прошло на ура 😉
    + при открытии поля для редактирования как-то логично было бы закрывать при клике вне его, аль при потере фокуса всех его инпутов (мышкой-то тоже бывает нужно закрыть)
    + при двойном клике (кстати не всегда срабатывает) выбирается первое поле, хоть щелкаешь и на другом
    + для юзабилити можно убрать выделение по двойному клику, иначе видно, что слово выделяется, а после превращается в инпут

    Все испытывалось в Fx 3.5 Preview (beta 99)

  • Serator

    (script)alert(1);(/script) — код был таким, парсер комментариев скушал теги (вместо больше и меньше подставьте соответствующие символы).

    • С защитой все просто. Я сокращал пример и первоначально не собирался делать демо-страницу, а потом передумал.
      Поэтому и осталась только защита от SQL Injection, которая автоматически выполняется PDO.
      Но вы правы, оставлять в таком виде нельзя.

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

      Глюки: основная причина в том, что я просто скопипастил код из документации. Недостатки есть, но идею показывает отлично.

      В любом случае эти недостатки быстро устраняются. Я убрал проверку в событие ondblClickRow и добавил обработчик onSelectRow. Теперь закрыть обработчики можно одиночным кликом по любой строке. И исправил проблему с несрабатывающим двойным кликом.

      Менять код в статье и архиве я не буду, а посмотреть изменения можно с помощью Firebug.

  • Serator

    (script)alert(1);(/script) — код был таким, парсер комментариев скушал теги (вместо больше и меньше подставьте соответствующие символы).

    • С защитой все просто. Я сокращал пример и первоначально не собирался делать демо-страницу, а потом передумал.
      Поэтому и осталась только защита от SQL Injection, которая автоматически выполняется PDO.
      Но вы правы, оставлять в таком виде нельзя.

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

      Глюки: основная причина в том, что я просто скопипастил код из документации. Недостатки есть, но идею показывает отлично.

      В любом случае эти недостатки быстро устраняются. Я убрал проверку в событие ondblClickRow и добавил обработчик onSelectRow. Теперь закрыть обработчики можно одиночным кликом по любой строке. И исправил проблему с несрабатывающим двойным кликом.

      Менять код в статье и архиве я не буду, а посмотреть изменения можно с помощью Firebug.

  • Big_Shark

    Проблема с кодировкой

    • Я вижу, но не могу повторить.
      Пробовал из FireFox 3, Opera 9.62 и IE 8. Кириллица отображается правильно, там везде используется UTF-8.

  • Big_Shark

    Проблема с кодировкой

    • Я вижу, но не могу повторить.
      Пробовал из FireFox 3, Opera 9.62 и IE 8. Кириллица отображается правильно, там везде используется UTF-8.

  • >if (id &&

    поправь на &&

    да и вообще у тебя подсветка синтаксиса так себе (при копировании лишний шлак в буфер попадает), заюзай codecolorer, на порядок лучше

    • Спасибо!
      Эти проблемы с подсветкой уже порядком надоели. Только у всех плагинов, которые я пробовал были свои недостатки.

      • у codecolorer нет таких проблем, сам его юзаю

  • >if (id &&

    поправь на &&

    да и вообще у тебя подсветка синтаксиса так себе (при копировании лишний шлак в буфер попадает), заюзай codecolorer, на порядок лучше

    • Спасибо!
      Эти проблемы с подсветкой уже порядком надоели. Только у всех плагинов, которые я пробовал были свои недостатки.

      • у codecolorer нет таких проблем, сам его юзаю

  • Когда юзаешь:
    >edittype:»textarea»

    то как переходить на следующую строку? вешать собственный обработчик?

    • По-моему edittype:»textarea» и inline редактор — это не правильно. Лучше открыть отдельное окно, при этом можно увеличить размер текстовой области и избавиться от проблем, возникающих при нажатии на enter.

  • Когда юзаешь:
    >edittype:»textarea»

    то как переходить на следующую строку? вешать собственный обработчик?

    • По-моему edittype:»textarea» и inline редактор — это не правильно. Лучше открыть отдельное окно, при этом можно увеличить размер текстовой области и избавиться от проблем, возникающих при нажатии на enter.

  • viking

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

    • В примере к этой статье форма открывается по двойному клику на строке, а формы добавления записи вообще нет… может вам подойдет 😉
      Если нет — пишите, почему.

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

        • Какая функция добавления записи вам нужна? Если не получается вставить кнопку на нижнюю панель, смотрите здесь.
          Полный пример здесь (Live Data Manipulation — Add Row)

  • viking

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

    • В примере к этой статье форма открывается по двойному клику на строке, а формы добавления записи вообще нет… может вам подойдет 😉
      Если нет — пишите, почему.

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

        • Какая функция добавления записи вам нужна? Если не получается вставить кнопку на нижнюю панель, смотрите здесь.
          Полный пример здесь (Live Data Manipulation — Add Row)

  • Антон

    коммента не в тему))) мне кажется PDO это зло))) лучше юзать стандартные функции или framework 😉

    • Обоснуйте 🙂
      PDO ничем не хуже библиотек фреймворков. Но когда нужна ТОЛЬКО библиотека для работы с БД, то смысла использовать фреймворк нет.

      • Антон

        синтаксис несколько усложняет, а функционала не прибавляет)))

        Владимир, позвольте задать Вам вопрос.

        jQuery(document).ready(function(){
        jQuery("#list2").jqGrid({
        url:'getdata.php',
        datatype: "json",
        colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
        colModel :[
        {name:'numbers',index:'numbers', width:30,sortable:false},
        {name:'surname', index:'surname', width:180, align:'right', editable:true, edittype:"text"},
        {name:'fname', index:'fname', width:190, editable:true, edittype:"text"},
        {name:'lname', index:'lname', width:180, align:'right', editable:true, edittype:"text"}
        ],
        rowNum:5,
        rowList:[5,10,20,30],
        // imgpath: "img",
        pager: jQuery('#pager2'),
        sortname: 'surname',
        sortorder: "asc",
        loadComplete: function(){
        var ids = jQuery("#list2").getDataIDs();
        var numberlocal = 0;
        for(var i=0;i<ids.length;i++){
        numberlocal = i+1;
        jQuery("#list2").setRowData(ids[i],{numbers:numberlocal})
        }
        },
        viewrecords: true,
        caption:"пример работы"
        }).navGrid('#pager2',
        {edit:false,add:false,del:false, search:false}, // events
        {drag: true,reloadAfterSubmit:true}, // options
        {}, // edit options
        {}, // add options
        {}, // del options
        {} // search options
        );

        $("#editform").click(function(){
        var gr = jQuery("#list2").getGridParam('selrow');
        if( gr != null ) jQuery("#list2").editGridRow(gr,{
        closeAfterEdit: true,
        url: 'saverow.php'
        });
        else alert("Выберите запись");
        });

        $("#delform").click(function(){
        var gr = jQuery("#list2").getGridParam('selrow');
        //getSelectedRow();
        if( gr != null ) jQuery("#list2").delGridRow(gr,{
        msg: "Удалить выбранную ревизию",
        url: 'delrow.php'
        });
        else alert("Выберите запись для удаления!");
        });

        $("#addform").click(function(){
        jQuery("#list2").editGridRow("new",{
        height:280,
        closeAfterAdd: true,
        url: 'addrow.php'
        });
        });

        });

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

        как это можно сделать? и можно ли вообще?

  • Антон

    коммента не в тему))) мне кажется PDO это зло))) лучше юзать стандартные функции или framework 😉

    • Обоснуйте 🙂
      PDO ничем не хуже библиотек фреймворков. Но когда нужна ТОЛЬКО библиотека для работы с БД, то смысла использовать фреймворк нет.

      • Антон

        синтаксис несколько усложняет, а функционала не прибавляет)))

        Владимир, позвольте задать Вам вопрос.

        jQuery(document).ready(function(){
        jQuery("#list2").jqGrid({
        url:'getdata.php',
        datatype: "json",
        colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
        colModel :[
        {name:'numbers',index:'numbers', width:30,sortable:false},
        {name:'surname', index:'surname', width:180, align:'right', editable:true, edittype:"text"},
        {name:'fname', index:'fname', width:190, editable:true, edittype:"text"},
        {name:'lname', index:'lname', width:180, align:'right', editable:true, edittype:"text"}
        ],
        rowNum:5,
        rowList:[5,10,20,30],
        // imgpath: "img",
        pager: jQuery('#pager2'),
        sortname: 'surname',
        sortorder: "asc",
        loadComplete: function(){
        var ids = jQuery("#list2").getDataIDs();
        var numberlocal = 0;
        for(var i=0;i<ids.length;i++){
        numberlocal = i+1;
        jQuery("#list2").setRowData(ids[i],{numbers:numberlocal})
        }
        },
        viewrecords: true,
        caption:"пример работы"
        }).navGrid('#pager2',
        {edit:false,add:false,del:false, search:false}, // events
        {drag: true,reloadAfterSubmit:true}, // options
        {}, // edit options
        {}, // add options
        {}, // del options
        {} // search options
        );

        $("#editform").click(function(){
        var gr = jQuery("#list2").getGridParam('selrow');
        if( gr != null ) jQuery("#list2").editGridRow(gr,{
        closeAfterEdit: true,
        url: 'saverow.php'
        });
        else alert("Выберите запись");
        });

        $("#delform").click(function(){
        var gr = jQuery("#list2").getGridParam('selrow');
        //getSelectedRow();
        if( gr != null ) jQuery("#list2").delGridRow(gr,{
        msg: "Удалить выбранную ревизию",
        url: 'delrow.php'
        });
        else alert("Выберите запись для удаления!");
        });

        $("#addform").click(function(){
        jQuery("#list2").editGridRow("new",{
        height:280,
        closeAfterAdd: true,
        url: 'addrow.php'
        });
        });

        });

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

        как это можно сделать? и можно ли вообще?

  • Конечно, это сделать можно. Для этого в jqGrid предусмотрены специальные события.
    Например, для inline редактора подойдет beforeSubmitCell (возникает перед отправкой содержимого ячейки серверу).
    Подробное описание в справке (раздел Editing — Sell Editing — Events)
    Кроме того, есть события, которые возникают при редактировании записей через отдельную форму.

    синтаксис несколько усложняет, а функционала не прибавляет

    Тут я не согласен. PDO гораздо функциональнее чем стандартная библиотека, а синтаксис — вопрос привычек 😉

    • Антон

      для работы над валидацией есть beforeSubmit, но понять логику его работы, точнее как долно это выглядеть в работе не могу ;(
      ==========================
      beforeSubmit
      fires before the data is submitted to the server. Parameter is of type id=value1,value2,… When called the event can return array where the first parameter can be true or false and the second is the message of the error if any. Example:

      [false,»The value is not valid»]
      ==========================

      да думаю, это привычка, мне не понравилось я за 2 мин. переписал, главное это идя)

      спасибо за статью

    • Антон

      ответ нашел

      $("#editform").click(function(){
      var gr = jQuery("#list2").getGridParam('selrow');
      if( gr != null ) jQuery("#list2").editGridRow(gr,{
      closeAfterEdit: true,
      beforeSubmit: function() {
      var ret=[false,"The value is not valid"];
      return ret;
      },

      url: 'saverow.php'
      });
      else alert("Выберите запись");
      });

    • Denis

      Подскажите пожалуйста, как именно надо использовать beforeSubmitCell для валидации при инлайн-редактировании? редактирование через отдельную форму сделано нормально, 
      beforeSubmit: function(postData, formId) {            return validateForm(postData, formId, 1, null);            },Можно ли ту же  validateForm() как-то прикрутить и инлайн-редактированию? 

      • Если не ошибаюсь, при инлайн редактировании событие beforeSubmit не срабатывает. Вместо него, можно использовать serializerowdata

      • Если не ошибаюсь, при инлайн редактировании событие beforeSubmit не срабатывает. Вместо него, можно использовать serializerowdata

  • Конечно, это сделать можно. Для этого в jqGrid предусмотрены специальные события.
    Например, для inline редактора подойдет beforeSubmitCell (возникает перед отправкой содержимого ячейки серверу).
    Подробное описание в справке (раздел Editing — Sell Editing — Events)
    Кроме того, есть события, которые возникают при редактировании записей через отдельную форму.

    синтаксис несколько усложняет, а функционала не прибавляет

    Тут я не согласен. PDO гораздо функциональнее чем стандартная библиотека, а синтаксис — вопрос привычек 😉

    • Антон

      для работы над валидацией есть beforeSubmit, но понять логику его работы, точнее как долно это выглядеть в работе не могу ;(
      ==========================
      beforeSubmit
      fires before the data is submitted to the server. Parameter is of type id=value1,value2,… When called the event can return array where the first parameter can be true or false and the second is the message of the error if any. Example:

      [false,»The value is not valid»]
      ==========================

      да думаю, это привычка, мне не понравилось я за 2 мин. переписал, главное это идя)

      спасибо за статью

    • Антон

      ответ нашел

      $("#editform").click(function(){
      var gr = jQuery("#list2").getGridParam('selrow');
      if( gr != null ) jQuery("#list2").editGridRow(gr,{
      closeAfterEdit: true,
      beforeSubmit: function() {
      var ret=[false,"The value is not valid"];
      return ret;
      },

      url: 'saverow.php'
      });
      else alert("Выберите запись");
      });

  • Виктор

    Владимир, подскажи пожалуйста
    скопировал твой код
    После
    jQuery(document).ready(function(){…});
    добавил строку
    jQuery(«#list»).navGrid(«#pager»,{edit:true,add:true,del:true});

    проверил функция navGrid вызывается, но кнопки edit,add,del на панели навигации не появляются
    что еще надо сделать чтобы они появились? в документации ничего найти не могу.

    • По-моему, чтобы создать кнопку в панели навигации нужно использовать метод navButtonAdd. Пример есть в справке (раздел Navigating — Custom Buttons).

      • Виктор

        Написал как сказано в справке:
        jQuery(«#list»).navGrid('#pager',{edit:false,add:false,del:false})
        .navButtonAdd('#pager',{
        caption:'add',
        buttonimg:»themes/basic/images/row_add.gif»,
        onClickButton:function(){ alert(«Adding Row»)},
        position: «last»,
        title:'ToolTip ADD'
        });
        Кнопки все равно не добавляются 🙂

        • Я попробую помочь, но для этого мне нужна ваша страница со скриптами. Присылайте архив на vova_33[at]gala.net

  • Виктор

    Владимир, подскажи пожалуйста
    скопировал твой код
    После
    jQuery(document).ready(function(){…});
    добавил строку
    jQuery(«#list»).navGrid(«#pager»,{edit:true,add:true,del:true});

    проверил функция navGrid вызывается, но кнопки edit,add,del на панели навигации не появляются
    что еще надо сделать чтобы они появились? в документации ничего найти не могу.

    • По-моему, чтобы создать кнопку в панели навигации нужно использовать метод navButtonAdd. Пример есть в справке (раздел Navigating — Custom Buttons).

      • Виктор

        Написал как сказано в справке:
        jQuery(«#list»).navGrid('#pager',{edit:false,add:false,del:false})
        .navButtonAdd('#pager',{
        caption:'add',
        buttonimg:»themes/basic/images/row_add.gif»,
        onClickButton:function(){ alert(«Adding Row»)},
        position: «last»,
        title:'ToolTip ADD'
        });
        Кнопки все равно не добавляются 🙂

        • Я попробую помочь, но для этого мне нужна ваша страница со скриптами. Присылайте архив на vova_33[at]gala.net

  • А подробнее можно?

    • Можно. Но о чем именно подробнее рассказать? Здесь показан работающий пример. Наращивать функционал можно, но что именно вас интересует?

  • А подробнее можно?

    • Можно. Но о чем именно подробнее рассказать? Здесь показан работающий пример. Наращивать функционал можно, но что именно вас интересует?

  • rus

    не могу вызвать данные, таблица есть а данные из гетдаты не получаю, по идее должно отдавать так:

    try {
    $response->page = «1»; // current page
    $response->total = «1»; // total pages
    $response->records = «1»; // total records
    $response->rows['0']['id']=»1"; //id
    $response->rows['0']['cell']=array('1','2erwy','3eyr','4weryw');
    echo json_encode($response);
    }
    но нехрена не отдает….

    • А вы не можете посмотреть какой json бекенд отдает?

    • adw0rd прав, определить в чем проблема без отладчика (firebug) не получится.
      Нужно посмотреть какие параметры переданы в запросе и что отправил сервер.

  • rus

    не могу вызвать данные, таблица есть а данные из гетдаты не получаю, по идее должно отдавать так:

    try {
    $response->page = «1»; // current page
    $response->total = «1»; // total pages
    $response->records = «1»; // total records
    $response->rows['0']['id']=»1"; //id
    $response->rows['0']['cell']=array('1','2erwy','3eyr','4weryw');
    echo json_encode($response);
    }
    но нехрена не отдает….

    • А вы не можете посмотреть какой json бекенд отдает?

    • adw0rd прав, определить в чем проблема без отладчика (firebug) не получится.
      Нужно посмотреть какие параметры переданы в запросе и что отправил сервер.

  • Самат

    а как редактировать в отдельном окне в справке не сказано.

    • По-моему этот раздел вам подойдет
      jqGrid — Editing — Form Editing

      Кроме того, точно видел такой пример на их демо сайте.

  • Самат

    а как редактировать в отдельном окне в справке не сказано.

    • По-моему этот раздел вам подойдет
      jqGrid — Editing — Form Editing

      Кроме того, точно видел такой пример на их демо сайте.

  • Игорь

    Скажите пожалуйста как выполнить добавление записи? Ссылка на добавление находится не на тулбаре таблицы, а отдельно…

    • Есть готовый пример. Раздел Manipulating — Grid Data. Там одна из операций «Add row with id 99».

      • Игорь

        добавление строки я уже сделал,теперь надо сохранить в базу данных. Попробовал сделать проверку на добавление(на параметр add)
        if (isset($_POST['_add']) && $_POST['_add'] == 'true') {
        $query =(«INSERT INTO `telephones` ( `id_tel` , `tel_number` , `tel_denorm` , `is_close` , `id_operator` )
        VALUES (», $tel_number, NULL , '0', $code)»);
        $result=mysql_query($query);
        не помогло…

        • Удаленно находить баги у меня плохо получается 🙂
          Если можете, пришлите мне скрипт почтой, я посмотрю.

  • Игорь

    Скажите пожалуйста как выполнить добавление записи? Ссылка на добавление находится не на тулбаре таблицы, а отдельно…

    • Есть готовый пример. Раздел Manipulating — Grid Data. Там одна из операций «Add row with id 99».

      • Игорь

        добавление строки я уже сделал,теперь надо сохранить в базу данных. Попробовал сделать проверку на добавление(на параметр add)
        if (isset($_POST['_add']) && $_POST['_add'] == 'true') {
        $query =(«INSERT INTO `telephones` ( `id_tel` , `tel_number` , `tel_denorm` , `is_close` , `id_operator` )
        VALUES (», $tel_number, NULL , '0', $code)»);
        $result=mysql_query($query);
        не помогло…

        • Удаленно находить баги у меня плохо получается 🙂
          Если можете, пришлите мне скрипт почтой, я посмотрю.

  • Евгений

    добрый вечер.Подскажите пожалуйста почему у меня не работает редактирование?Вот вырезка скриптов:
    {name:'id_operator', index:'id_operator', width:100, align:'center', editable:true, edittype:»select»,editoptions:{value:»1:050; 2:095; 3:099; 4:063; 5:093; 6:067; 7:068"}}
    ,{name:'tel_number', index:'tel_number', width:100, align:'center', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}

    и запрос:

    $stm = $dbh->prepare('UPDATE telephones SET tel_number=?, id_operator=? WHERE id_tel=?');
    $stm->execute(array($tel_number, $id_operator));

    • Вам нужно проверить (firebug'ом) какие данные отправляются серверу и что он отвечает. Отправляться должны измененные данные, а отправить назад сервер должен эти же данные в формате json (или другом, в зависимости от настроек).

  • Евгений

    добрый вечер.Подскажите пожалуйста почему у меня не работает редактирование?Вот вырезка скриптов:
    {name:'id_operator', index:'id_operator', width:100, align:'center', editable:true, edittype:»select»,editoptions:{value:»1:050; 2:095; 3:099; 4:063; 5:093; 6:067; 7:068"}}
    ,{name:'tel_number', index:'tel_number', width:100, align:'center', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}

    и запрос:

    $stm = $dbh->prepare('UPDATE telephones SET tel_number=?, id_operator=? WHERE id_tel=?');
    $stm->execute(array($tel_number, $id_operator));

    • Вам нужно проверить (firebug'ом) какие данные отправляются серверу и что он отвечает. Отправляться должны измененные данные, а отправить назад сервер должен эти же данные в формате json (или другом, в зависимости от настроек).

  • Евгений

    Спасибо за совет ,очень полезная штука)У меня формируется POST запрос но сервер ничего не возвращает(

    • Проверяйте php скрипт.
      В конце должно быть что-то вроде
      echo json_encode($data)

  • Евгений

    Спасибо за совет ,очень полезная штука)У меня формируется POST запрос но сервер ничего не возвращает(

    • Проверяйте php скрипт.
      В конце должно быть что-то вроде
      echo json_encode($data)

  • Евгений

    Подскажите пожалуйста, я сделал удаление строки, а удаляется строка по порядковому номеру POST id.Тоесть если запись с id 10,а в таблице она стоит на 8м месте, то удаляется запись с id 8!Как мне решить эту проблему?

    • От сервера данные передаются в формате
      {id:»1", cell:[«cell11», «cell12», «cell13»]}
      Значение id — это id в базе данных, а в первой колонке (cell1) можно указать порядковый номер.

      Еще один вариант — выводить id из БД вместо порядковых номеров.

      • Евгений

        У меня подобная проблема, запутался совсем. Когда имя ключевого столбца таблицы ID , то все хорошо, но у меня этот столбец имеет название id_row и я так понял что «ID» где-то глубже сидит? Тупо уже меняю в 3-x файлах (index.html,getdata.php и saverow.php) все id на id_row ,но происходит редактирование строки не нужным мне id_row из базы,а с порядковым номером таблице что видим.
        Всего записей в БД 5410, для наглядности меняю последнюю строку и ставлю id_row=5555, после сортировки по этому полю эта запись на первом песте.Смотрю в Firefox в getdata.php:

        {"page":"1","total":1082,"records":"5410","rows":[{"id_row":"5555","cell":["5555","44005010010015","u0421u0438....и т.д.

        И id_row и cell — пятерки, смотрю в Firefox saverow.php — там ID=1, т.е. первая строка.Выведите, пожалуйста, меня из стопора.

        • Евгений

          Firefox читать как FIREBUG 🙂

        • Если в saverow id == 1, значит $_POST['id'] == 1, т.е. вы, скорее всего, не изменили имя столбца в файле index.php (строка 9).
          Например, для этого примера при сохранении строки плагин передает такие данные

          fname Сидор
          id 3
          lname Сидорович
          surname Сидоров222

          Имена параметров — это имена столбцов, которые указаны в colModel (строки 8-13). Измените id на id_row и проверьте firebug'ом какие данные передаются при изменении строки (или удалении).

        • Евгений

          в том то и дело что везде изменено id на id_row, но все равно передаются данные где есть имена столбцов моих,а вместо id_row — все равно id. В принципе, уже закрываю глаза на это -надоело ,в getdata.php ПРОПИСАЛ ВОТ ТАК $responce->rows[$i]['id']=$row['id_row']; и вроде работает.Спасибо за оперативный ответ!

  • Евгений

    Подскажите пожалуйста, я сделал удаление строки, а удаляется строка по порядковому номеру POST id.Тоесть если запись с id 10,а в таблице она стоит на 8м месте, то удаляется запись с id 8!Как мне решить эту проблему?

    • От сервера данные передаются в формате
      {id:»1", cell:[«cell11», «cell12», «cell13»]}
      Значение id — это id в базе данных, а в первой колонке (cell1) можно указать порядковый номер.

      Еще один вариант — выводить id из БД вместо порядковых номеров.

      • Евгений

        У меня подобная проблема, запутался совсем. Когда имя ключевого столбца таблицы ID , то все хорошо, но у меня этот столбец имеет название id_row и я так понял что «ID» где-то глубже сидит? Тупо уже меняю в 3-x файлах (index.html,getdata.php и saverow.php) все id на id_row ,но происходит редактирование строки не нужным мне id_row из базы,а с порядковым номером таблице что видим.
        Всего записей в БД 5410, для наглядности меняю последнюю строку и ставлю id_row=5555, после сортировки по этому полю эта запись на первом песте.Смотрю в Firefox в getdata.php:

        {"page":"1","total":1082,"records":"5410","rows":[{"id_row":"5555","cell":["5555","44005010010015","\u0421\u0438....и т.д.

        И id_row и cell — пятерки, смотрю в Firefox saverow.php — там ID=1, т.е. первая строка.Выведите, пожалуйста, меня из стопора.

        • Евгений

          Firefox читать как FIREBUG 🙂

        • Если в saverow id == 1, значит $_POST['id'] == 1, т.е. вы, скорее всего, не изменили имя столбца в файле index.php (строка 9).
          Например, для этого примера при сохранении строки плагин передает такие данные

          fname Сидор
          id 3
          lname Сидорович
          surname Сидоров222

          Имена параметров — это имена столбцов, которые указаны в colModel (строки 8-13). Измените id на id_row и проверьте firebug'ом какие данные передаются при изменении строки (или удалении).

        • Евгений

          в том то и дело что везде изменено id на id_row, но все равно передаются данные где есть имена столбцов моих,а вместо id_row — все равно id. В принципе, уже закрываю глаза на это -надоело ,в getdata.php ПРОПИСАЛ ВОТ ТАК $responce->rows[$i]['id']=$row['id_row']; и вроде работает.Спасибо за оперативный ответ!

  • Евгений

    Спасибо,разобрался. Скажите пожалуйста,на странице демок есть вкладка Formater, там можно указывать формат поля. Я хочу в таблицу расположить ссылки или кнопки для каждой записи.В демке не показано куда записывать адрес ссылки…

    • Адрес ссылки в смысле href?
      В том примере они нигде его не указывают 🙂 . Адреса формируются автоматически. К базовому адресу добавляется текст поля (trirand.com/jqgrid/ + Client 1).
      Насколько я понял вам нужен немного другой formatter. Не link, а showlink. В его настройках можно указать url. Подробнее здесь.

  • Евгений

    Спасибо,разобрался. Скажите пожалуйста,на странице демок есть вкладка Formater, там можно указывать формат поля. Я хочу в таблицу расположить ссылки или кнопки для каждой записи.В демке не показано куда записывать адрес ссылки…

    • Адрес ссылки в смысле href?
      В том примере они нигде его не указывают 🙂 . Адреса формируются автоматически. К базовому адресу добавляется текст поля (trirand.com/jqgrid/ + Client 1).
      Насколько я понял вам нужен немного другой formatter. Не link, а showlink. В его настройках можно указать url. Подробнее здесь.

  • Евгений

    Да, эта статья помогла)
    Но вот все равно документация мне не нравится! Вот как например изначально спрятать колонку таблицы? Мне надо передать значение переменной в saverow. Я думаю добавить столбец и спрятать его,а через него будет передаваться значение переменной.Можно ли как нибудь по другому передавать значение?

    • Спрятать колонку можно с помощью параметра hidden:true (подробнее здесь). Кроме того, можно разрешить пользователю самому прятать/показывать колонки (пример здесь).

  • Евгений

    Да, эта статья помогла)
    Но вот все равно документация мне не нравится! Вот как например изначально спрятать колонку таблицы? Мне надо передать значение переменной в saverow. Я думаю добавить столбец и спрятать его,а через него будет передаваться значение переменной.Можно ли как нибудь по другому передавать значение?

    • Спрятать колонку можно с помощью параметра hidden:true (подробнее здесь). Кроме того, можно разрешить пользователю самому прятать/показывать колонки (пример здесь).

  • Игорь

    Спасибо большое!
    Подскажите пожалуйста как можно при добавлении или редактировании textarea подсчитывать количество введенных символов?Скрипт есть который это делает, но вот как его втулить в jqquery?

    • Попробуйте использовать событие beforeEditCell.
      В нем подключите ваш скрипт к нужной textarea.

  • Игорь

    Спасибо большое!
    Подскажите пожалуйста как можно при добавлении или редактировании textarea подсчитывать количество введенных символов?Скрипт есть который это делает, но вот как его втулить в jqquery?

    • Попробуйте использовать событие beforeEditCell.
      В нем подключите ваш скрипт к нужной textarea.

  • Игорь

    beforeEditCell: function(rowid,cellname) {
    if (t.value.length>4000) {
    alert(«Сообщение не должно привышать 4000 символов.»);
    return(false);
    }
    else return(true);
    }
    }
    Написал такое, соответственно не работает(

  • Игорь

    beforeEditCell: function(rowid,cellname) {
    if (t.value.length>4000) {
    alert(«Сообщение не должно привышать 4000 символов.»);
    return(false);
    }
    else return(true);
    }
    }
    Написал такое, соответственно не работает(

  • Здравствуйте Владимир.
    подскажите пожалуйста, почему у меня может не срабатывать алерт который я поместил в событие «beforeShowForm». То есть у меня есть таблица в нижней части которой расположены стандартные кнопки редактирования, по нажатию на которые появляется форма с полями для редактирования, мне бы хотелось отслеживать момент появления этой формы и судя по документации для этого надо использовать событие: «beforeShowForm» но код в нем не срабатывает, может есть какие-то тонкости?

    • Я не помню использовал ли раньше beforeShowForm, но этими событиями проблем вроде не было (если, конечно, не забывать подключать модуль Common, лучше вообще тестировать на полной версии плагина). Если хотите, присылайте почтой мне код, я попробую найти в чем проблема.

  • Здравствуйте Владимир.
    подскажите пожалуйста, почему у меня может не срабатывать алерт который я поместил в событие «beforeShowForm». То есть у меня есть таблица в нижней части которой расположены стандартные кнопки редактирования, по нажатию на которые появляется форма с полями для редактирования, мне бы хотелось отслеживать момент появления этой формы и судя по документации для этого надо использовать событие: «beforeShowForm» но код в нем не срабатывает, может есть какие-то тонкости?

    • Я не помню использовал ли раньше beforeShowForm, но этими событиями проблем вроде не было (если, конечно, не забывать подключать модуль Common, лучше вообще тестировать на полной версии плагина). Если хотите, присылайте почтой мне код, я попробую найти в чем проблема.

  • Дмитрий

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

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

    • Напишите подробнее, что вы хотите сделать.

      • Дмитрий

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

        • Значит, вопрос в количестве действий пользователя.
          Например, если вы сделаете так, что после ввода оценки и нажатии на кнопку «вниз» курсора, введенное значение будет отправлено на сервер, фокус переместится на строку ниже и поле с оценкой перейдет в режим редактирования, будет ли такой вариант подходящим решением?

        • Дмитрий

          Ото прекрасная идея. Подскажите пожалуйста как это реализовать.

        • Скажу сразу, что готового решения у меня нет, но я давно собирался поэкспериментировать и сделать что-то похожее. Когда закончу, наверное, пост напишу.

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

  • Дмитрий

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

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

    • Напишите подробнее, что вы хотите сделать.

      • Дмитрий

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

        • Значит, вопрос в количестве действий пользователя.
          Например, если вы сделаете так, что после ввода оценки и нажатии на кнопку «вниз» курсора, введенное значение будет отправлено на сервер, фокус переместится на строку ниже и поле с оценкой перейдет в режим редактирования, будет ли такой вариант подходящим решением?

        • Дмитрий

          Ото прекрасная идея. Подскажите пожалуйста как это реализовать.

        • Скажу сразу, что готового решения у меня нет, но я давно собирался поэкспериментировать и сделать что-то похожее. Когда закончу, наверное, пост напишу.

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

  • Олег

    Добрый день, Владимир.
    Подскажите можно ли как-то получить номер выделенной строки в таблице. Метода getSelection я не обнаружил в доках.
    Это нужно для того, чтобы убрать выделение строки, при клике вне области таблицы.
    Спасибо заранее за ответ.

    • Я тоже не нашел подходящего метода.
      Но когда строка выделена, ей (тегу tr) присваивается класс selected.
      Попробуйте использовать что-то вроде
      var selRow = $('tr.selected').attr('id');

  • Добрый день, Владимир.
    Подскажите можно ли как-то получить номер выделенной строки в таблице. Метода getSelection я не обнаружил в доках.
    Это нужно для того, чтобы убрать выделение строки, при клике вне области таблицы.
    Спасибо заранее за ответ.

    • Я тоже не нашел подходящего метода.
      Но когда строка выделена, ей (тегу tr) присваивается класс selected.
      Попробуйте использовать что-то вроде
      var selRow = $('tr.selected').attr('id');

  • Юрий

    Здравствуйте, спасибо Вам за урок — мне очень помогли!
    Все работает.
    У меня имеется вопрос: Вывожу таблицу для редактирования (список товаров), где у меня по кодам тянется тип товара и производитель. То есть и выводятся тоже коды (как в таблице), а как мне реализовать вывод списка с названиями, а при редактировании сохранять коды в таблицу?
    спасибо.

    • Это нужно делать на серверной стороне, т.е. с помощью php. Для jqGrid без разницы откуда вы берете данные и куда их потом сохраняете.
      Т.е. пишете sql запрос (с объединениями) который вытянет из таблиц нужные поля и отправляете итоговую таблицу jqGrid.
      Когда нужно сохранять данные, читаете название производителя, делаете запрос к таблице «производители» и узнаете его код, сохраняете запись о товаре в таблицу «товары» (уже с кодом).

      • Юрий

        Я сделал запрос где вместо кодов указываю имена производителей(для отображения текущего производителя), и сделал запрос, где выбрал всех производителей (для поля со списком естественно). Как мне все это передать в браузер (яваскрипту) чтобы был реализовать мою задачу?
        Подсмотрел на офф. сайте примерчик и там увидел строку:
        {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
        здесь все ясно, но только со статичными данными, а как быть когда все это дело передает php?

        • Вы получили результаты этих запросов в виде массивов. Теперь нужно сформировать новый массив с данными, которые будут отображаться в таблице.
          Точнее удобнее сразу присваивать нужные данные свойствам объекта $response (в предыдущей статье второй листинг, строки 28-32).

  • Юрий

    Здравствуйте, спасибо Вам за урок — мне очень помогли!
    Все работает.
    У меня имеется вопрос: Вывожу таблицу для редактирования (список товаров), где у меня по кодам тянется тип товара и производитель. То есть и выводятся тоже коды (как в таблице), а как мне реализовать вывод списка с названиями, а при редактировании сохранять коды в таблицу?
    спасибо.

    • Это нужно делать на серверной стороне, т.е. с помощью php. Для jqGrid без разницы откуда вы берете данные и куда их потом сохраняете.
      Т.е. пишете sql запрос (с объединениями) который вытянет из таблиц нужные поля и отправляете итоговую таблицу jqGrid.
      Когда нужно сохранять данные, читаете название производителя, делаете запрос к таблице «производители» и узнаете его код, сохраняете запись о товаре в таблицу «товары» (уже с кодом).

      • Юрий

        Я сделал запрос где вместо кодов указываю имена производителей(для отображения текущего производителя), и сделал запрос, где выбрал всех производителей (для поля со списком естественно). Как мне все это передать в браузер (яваскрипту) чтобы был реализовать мою задачу?
        Подсмотрел на офф. сайте примерчик и там увидел строку:
        {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
        здесь все ясно, но только со статичными данными, а как быть когда все это дело передает php?

        • Вы получили результаты этих запросов в виде массивов. Теперь нужно сформировать новый массив с данными, которые будут отображаться в таблице.
          Точнее удобнее сразу присваивать нужные данные свойствам объекта $response (в предыдущей статье второй листинг, строки 28-32).

  • Юрий

    Покопался в англицкой документации и там на счет этого написано

    Setting editoptions dataUrl parameter

    The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get.
    When this option is set, the element will be filled with values from the ajax request. The data should be a valid html select element with the desired options — something like:

    Я создал новый файл add.php c содержанием:
    $res=mysql_query("SELECT id,name FROM vendor;",$db)
    $i=0;
    while ($row=mysql_fetch_assoc($res))
    {
    $rdata->rows[$i]['vid']=$row['id'];
    $rdata->rows[$i]['data']=$row['name'];
    $i++;
    }
    echo json_encode($rdata);

    и в скрипт соответственно:{name:'vid',index:'vid', width:90, editable: true,edittype:"select",editoptions:{dataUrl:'add.php'}}
    Таблица выводится, но где должны быть поля со списками — пустой столбец.
    Не знаю что и делать. Я нид хелп!!

    • Теперь до меня дошло, что именно вы хотите сделать 🙂
      Судя по описанию, ваш скрипт (add.php) должен сформировать и вернуть select, а не просто данные (The data should be a valid html select element …).
      Правда я с select'ами не работал.
      Но в любом случае, по-моему, в документации есть более интересный вариант — передать значения в формате
      editoptions:{value:{1:'One',2:'Two'}}
      при формировании таблицы.
      Это удобный вариант, особенно если список не очень большой и вы можете сгенерировать js-код с помощью php скрипта. Как минимум выиграете на одном ajax запросе.

    • Last

      По select вот что нарыл:

      Setting editoptions dataUrl parameter
      The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get.
      When this option is set, the element will be filled with values from the ajax request. The data should be a valid html select element with the desired options — something like:

      One
      Two

      Т.е. по русски, вызываемый add.php должен генерить собственно Select. Проверил, работает.

  • Юрий

    Покопался в англицкой документации и там на счет этого написано

    Setting editoptions dataUrl parameter

    The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get.
    When this option is set, the element will be filled with values from the ajax request. The data should be a valid html select element with the desired options — something like:

    Я создал новый файл add.php c содержанием:
    $res=mysql_query("SELECT id,name FROM vendor;",$db)
    $i=0;
    while ($row=mysql_fetch_assoc($res))
    {
    $rdata->rows[$i]['vid']=$row['id'];
    $rdata->rows[$i]['data']=$row['name'];
    $i++;
    }
    echo json_encode($rdata);

    и в скрипт соответственно:{name:'vid',index:'vid', width:90, editable: true,edittype:"select",editoptions:{dataUrl:'add.php'}}
    Таблица выводится, но где должны быть поля со списками — пустой столбец.
    Не знаю что и делать. Я нид хелп!!

    • Теперь до меня дошло, что именно вы хотите сделать 🙂
      Судя по описанию, ваш скрипт (add.php) должен сформировать и вернуть select, а не просто данные (The data should be a valid html select element …).
      Правда я с select'ами не работал.
      Но в любом случае, по-моему, в документации есть более интересный вариант — передать значения в формате
      editoptions:{value:{1:'One',2:'Two'}}
      при формировании таблицы.
      Это удобный вариант, особенно если список не очень большой и вы можете сгенерировать js-код с помощью php скрипта. Как минимум выиграете на одном ajax запросе.

    • Last

      По select вот что нарыл:

      Setting editoptions dataUrl parameter
      The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get.
      When this option is set, the element will be filled with values from the ajax request. The data should be a valid html select element with the desired options — something like:

      One
      Two

      Т.е. по русски, вызываемый add.php должен генерить собственно Select. Проверил, работает.

  • Юрий

    Теперь я не понимаю как это так сделать, и чем этот пример отличается от того статического, что был в примере?
    Может ткнете меня в нужноее направление парой строк кода?)

    • Вы можете создавать настройки jqGrid динамически.
      Допустим, ваша страница создается скриптом index.php. В нем же находится js код, который подключает и настраивает jqGrid.
      Вы можете выполнить запрос к базе, получить массив значений для выпадающего списка и в цикле сформировать строку типа
      {value:»FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX»}
      Естественно, этот метод не будет работать если js код находится в отдельном файле с расширением js, но и в этом случае можно решить проблему.
      Я даже как-то написал заметку на эту тему Передача параметров в JavaScript файлы.

      Пара строк кода 🙂
      //запрос на получение значений для выпадающего списка
      $stmt = $dbh->prepare('SELECT ....');
      $stmt->execute();
      $i=0;
      while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      if ($i != 0) {
      $values .= ';';
      }
      $values .= $row['value'].':'.'value_str';
      }
      ....
      {name:...,editoptions: {value:""}},

  • Юрий

    Теперь я не понимаю как это так сделать, и чем этот пример отличается от того статического, что был в примере?
    Может ткнете меня в нужноее направление парой строк кода?)

    • Вы можете создавать настройки jqGrid динамически.
      Допустим, ваша страница создается скриптом index.php. В нем же находится js код, который подключает и настраивает jqGrid.
      Вы можете выполнить запрос к базе, получить массив значений для выпадающего списка и в цикле сформировать строку типа
      {value:»FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX»}
      Естественно, этот метод не будет работать если js код находится в отдельном файле с расширением js, но и в этом случае можно решить проблему.
      Я даже как-то написал заметку на эту тему Передача параметров в JavaScript файлы.

      Пара строк кода 🙂

      //запрос на получение значений для выпадающего списка
      $stmt = $dbh->prepare('SELECT ....');
      $stmt->execute();
      $i=0;
      while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
          if ($i != 0) {
              $values .= ';';
          }
          $values .= $row['value'].':'.'value_str';
      }
      ....
      {name:...,editoptions: {value:"< ?php echo $values; ?>"}},
  • Юрий

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

    //коннект к серверу бд
    $db=mysql_connect('localhost','xxx','xxx');
    //выбор БД
    mysql_select_db('mybase',$db);
    //запрос в котором выбираю имя производителя и его код
    $q=mysql_query("select id,name from vendor;",$db);
    $values = '';
    $i=0;
    while($row = mysql_fetch_assoc($q))
    {
    if ($i != 0)
    {
    $values .= ';';
    //формирую строку в нужном формате, чтоб скрипт понял }
    $values .= $row['id'].':'.$row['name'];
    $i++;
    }
    //записываю значения сформированной строки в значение скрытого поля страницы
    printf('',$values);

    Далее по имени из скрипта на стороне пользователя по идентификатору получаем значение поля со списком

    ,{name:'tname',index:'tname', width:30, align:'left', editable: true,edittype:"select",editoptions:{value:$("#type").val()}}

    Все работает, хоть и реализация хромает)))
    Большое спасибо Владимиру за помощь и терпимость к моей назойливости!!

  • Юрий

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

    //коннект к серверу бд
    $db=mysql_connect('localhost','xxx','xxx');
    //выбор БД
    mysql_select_db('mybase',$db);
    //запрос в котором выбираю имя производителя и его код
    $q=mysql_query("select id,name from vendor;",$db);
    $values = '';
    $i=0;
    while($row = mysql_fetch_assoc($q))
    {
    if ($i != 0)
    {
    $values .= ';';
    //формирую строку в нужном формате, чтоб скрипт понял }
    $values .= $row['id'].':'.$row['name'];
    $i++;
    }
    //записываю значения сформированной строки в значение скрытого поля страницы
    printf('',$values);

    Далее по имени из скрипта на стороне пользователя по идентификатору получаем значение поля со списком

    ,{name:'tname',index:'tname', width:30, align:'left', editable: true,edittype:"select",editoptions:{value:$("#type").val()}}

    Все работает, хоть и реализация хромает)))
    Большое спасибо Владимиру за помощь и терпимость к моей назойливости!!

  • Павел

    Скажите как подключить навигацию к таблице

    • Панель навигации включается параметром
      pager: jQuery('#pager') //(строка 14 в первом листинге)
      в настройках плагина.

  • Павел

    Скажите как подключить навигацию к таблице

    • Панель навигации включается параметром
      pager: jQuery('#pager') //(строка 14 в первом листинге)
      в настройках плагина.

  • Павел

    Скажите, а можно привязать к выбранной ячейке FCKeditor.

    • В принципе, да. Правда я не пробовал. Но FCKeditor (или другой редактор) можно привязать к любой textarea. Т.е. когда ячейка преобразуется в textarea нужно получить ее id и после этого можно подключать редактор.
      Скорее всего еще придется писать код, который будет убирать редактор. И могут быть проблемы с оформлением, все-таки кнопки занимают довольно много места.

  • Павел

    Скажите, а можно привязать к выбранной ячейке FCKeditor.

    • В принципе, да. Правда я не пробовал. Но FCKeditor (или другой редактор) можно привязать к любой textarea. Т.е. когда ячейка преобразуется в textarea нужно получить ее id и после этого можно подключать редактор.
      Скорее всего еще придется писать код, который будет убирать редактор. И могут быть проблемы с оформлением, все-таки кнопки занимают довольно много места.

  • А можно ли этот скрипт, переделать, что бы он за базу принимал текстовые файлы а не мускул ? Ну и соотвественно формировал таблици и так далее

    • Переделать можно как угодно 🙂 Но, если использовать текстовые файлы, то объём кода получится больше, к тому же нужно будет определиться с их форматом. В общем, если нужно просто хранить данные в файлах, то советую использовать SQLight. Этот пример должен правильно работать с SQLight, нужно только изменить параметры подключения.

  • А можно ли этот скрипт, переделать, что бы он за базу принимал текстовые файлы а не мускул ? Ну и соотвественно формировал таблици и так далее

    • Переделать можно как угодно 🙂 Но, если использовать текстовые файлы, то объём кода получится больше, к тому же нужно будет определиться с их форматом. В общем, если нужно просто хранить данные в файлах, то советую использовать SQLight. Этот пример должен правильно работать с SQLight, нужно только изменить параметры подключения.

  • Last

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

    • В настройках столбцов (colModel) можно указать параметр defval, но он работает только для формы поиска.

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

      Т.е. примерно такой код.
      jQuery(«#addBtn»).submit(function() {
      jQuery(«#list»).editGridRow(
      «new»,
      {
      height:280,
      reloadAfterSubmit:false,
      afterShowForm:function(){
      $(«#surname»).val(«222»);
      }
      }
      );
      return false;
      });
      Я ориентировался на этот пример (Live Data Manipulation — Add row)

  • Last

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

    • В настройках столбцов (colModel) можно указать параметр defval, но он работает только для формы поиска.

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

      Т.е. примерно такой код.

      jQuery("#addBtn").submit(function() {
          jQuery("#list").editGridRow(
                          "new",
                          {
                              height:280,
                              reloadAfterSubmit:false,
                              afterShowForm:function(){
                                  $("#surname").val("222");
                              }
                          }
          );
          return false;
      });

      Я ориентировался на этот пример (Live Data Manipulation — Add row)

  • Last

    Нашел более простой вариант:
    editoptions:{defaultValue:'MAG'}},

    • Я чувствовал, что оно там должно быть 🙂 , но почему-то не нашёл в документации.

  • Last

    Нашел более простой вариант:
    editoptions:{defaultValue:'MAG'}},

    • Я чувствовал, что оно там должно быть 🙂 , но почему-то не нашёл в документации.

  • Zarema

    Здравствуйте, Владимир. Спасибо большое за статьи, очень помогло! =))
    У меня такой вопрос: можно ли в модальную форму для редактирования добавить свои элементы?
    У меня три таблицы в БД: люди, специализации и таблица связи между ними (отношение многие-ко-многим). В гриде выводится инфа по людям и также столбец, где через запятую перечислены специализации человека. Так вот в форме редактирования нужно реализовать также редактирование этих специализаций (добавление, удаление) помимо общей инфы о человеке.
    Я уже задумываюсь о том, чтобы написать свою форму, добавить свои кнопки на навигатор и свои обработчики. Но может можно как-то изменить стандартную форму?

    • У вас довольно сложный случай и я не уверен, что лучше — своя форма или изменение стандартной. Но в любом случае вы можете добавить в стандартную форму любую html разметку с помощью обычных методов jQuery.

      • Zarema

        Йуху! Я догадалась посмотреть id таблицы в форме с помощью плагина WebDeveloper для FireFox. И в обработчике события при создании формы добавила нужные мне элементы в форму. Здорово))

        • Я обычно для этих целей использую firebug, ИМХО удобнее.
          Хотя, по большому счёту, инструменты не играют роли, главное — результат 😉

  • Zarema

    Здравствуйте, Владимир. Спасибо большое за статьи, очень помогло! =))
    У меня такой вопрос: можно ли в модальную форму для редактирования добавить свои элементы?
    У меня три таблицы в БД: люди, специализации и таблица связи между ними (отношение многие-ко-многим). В гриде выводится инфа по людям и также столбец, где через запятую перечислены специализации человека. Так вот в форме редактирования нужно реализовать также редактирование этих специализаций (добавление, удаление) помимо общей инфы о человеке.
    Я уже задумываюсь о том, чтобы написать свою форму, добавить свои кнопки на навигатор и свои обработчики. Но может можно как-то изменить стандартную форму?

    • У вас довольно сложный случай и я не уверен, что лучше — своя форма или изменение стандартной. Но в любом случае вы можете добавить в стандартную форму любую html разметку с помощью обычных методов jQuery.

      • Zarema

        Йуху! Я догадалась посмотреть id таблицы в форме с помощью плагина WebDeveloper для FireFox. И в обработчике события при создании формы добавила нужные мне элементы в форму. Здорово))

        • Я обычно для этих целей использую firebug, ИМХО удобнее.
          Хотя, по большому счёту, инструменты не играют роли, главное — результат 😉

  • vredin

    подскажите, пожалуйста, как понять причину ошибки когда ничего не выводится в таблице?

    1. скачал и распаковал архив
    2. импортировал таблицу в существующую таблицу
    2. отредактировал dbdata.php в соответствии с настройками денвера

    при запуске index.html выводится таблица но она пустая.. добавление echo в getdata почему-то ничего не дало

    • Посмотрите в консоли firebug'а к какому скрипту отправляется запрос. Этот скрипт должен возвращать данные таблицы в JSON или XML формате.

  • vredin

    подскажите, пожалуйста, как понять причину ошибки когда ничего не выводится в таблице?

    1. скачал и распаковал архив
    2. импортировал таблицу в существующую таблицу
    2. отредактировал dbdata.php в соответствии с настройками денвера

    при запуске index.html выводится таблица но она пустая.. добавление echo в getdata почему-то ничего не дало

    • Посмотрите в консоли firebug'а к какому скрипту отправляется запрос. Этот скрипт должен возвращать данные таблицы в JSON или XML формате.

  • Tomkit

    Начинаю работать с jqgrid. Интегрировал его в Codeigniter. Все js-, css-файлы подключил (библиотека jquery, jqrid-plugin и тд). Но таблица пуста. не могу понять почему. Проверил выполнение запросов в php-файле, извлекающем данные из базы MySQL — данные извлекаются верно, post-данные (использовал его в передаче параметров php-скрипту) передаются. В общем, казалось бы, работает все, лишь одна деталь — в таблице вовсе нет строк (есть лишь заголовки столбцов, «pager» с выбором количества строк на странице и переключением страниц).
    Если у Вас есть хоть какие-то предположения, в чем может быть ошибка, прошу Вас ответить на этот коментарий)

    • Tomkit

      Нашел в чем проблема. Вот код, который формирует xml-структуру для передачи jqGrid-у:
      // Начало xml разметки
      $s = «»;
      $s .= «»;
      $s .= «».$page.»»;
      $s .= «».$total_pages.»»;
      $s .= «».$count.»»;

      // Строки данных для таблицы
      // Не забудьте обернуть
      //текстовые данные в

      while($row = mysql_fetch_assoc($result))
      {
      $s .= «»;
      $s .= «»;
      $s .= «». $row['region_code'].»»;
      $s .= «»;
      $s .= «». $row['latitude'].»»;
      $s .= «». $row['longitude'].»»;
      $s .= «». $row['nbip'].»»;
      $s .= «»;
      }
      $s .= «»;

      jqGrid начал отображать данные после того, как я обрамил имена индексов массива вид $row[longitude] в $row['longitude']. То есть, всю проблему решили одинарные кавычки. Почему???! Ведь в исходном примере все работало! Но при интеграции в Codeigniter эти каычки не дали отобразить данные…

      Проблема решена. Но все же интересно, чем так мешали кавычки моему скрипту? Если у кого-то есть на это ответ — буду рад его услышать 🙂

      • Дело не в jqGrid, а в php. Вообще указывать ключи массива в таком виде $row[longitude] нельзя, хотя во многих случаях это будет правильно работать, потому что PHP автоматически преобразует longitude в строку.
        Но в документации сказано однозначно: «Индекс массива должен быть целым числом или строкой». Там же приведено несколько примеров, в которых описаны возможные проблемы.

        • Tomkit

          Спасибо)

  • Tomkit

    Начинаю работать с jqgrid. Интегрировал его в Codeigniter. Все js-, css-файлы подключил (библиотека jquery, jqrid-plugin и тд). Но таблица пуста. не могу понять почему. Проверил выполнение запросов в php-файле, извлекающем данные из базы MySQL — данные извлекаются верно, post-данные (использовал его в передаче параметров php-скрипту) передаются. В общем, казалось бы, работает все, лишь одна деталь — в таблице вовсе нет строк (есть лишь заголовки столбцов, «pager» с выбором количества строк на странице и переключением страниц).
    Если у Вас есть хоть какие-то предположения, в чем может быть ошибка, прошу Вас ответить на этот коментарий)

    • Tomkit

      Нашел в чем проблема. Вот код, который формирует xml-структуру для передачи jqGrid-у:
      // Начало xml разметки
      $s = «»;
      $s .= «»;
      $s .= «».$page.»»;
      $s .= «».$total_pages.»»;
      $s .= «».$count.»»;

      // Строки данных для таблицы
      // Не забудьте обернуть
      //текстовые данные в

      while($row = mysql_fetch_assoc($result))
      {
      $s .= «»;
      $s .= «»;
      $s .= «». $row['region_code'].»»;
      $s .= «»;
      $s .= «». $row['latitude'].»»;
      $s .= «». $row['longitude'].»»;
      $s .= «». $row['nbip'].»»;
      $s .= «»;
      }
      $s .= «»;

      jqGrid начал отображать данные после того, как я обрамил имена индексов массива вид $row[longitude] в $row['longitude']. То есть, всю проблему решили одинарные кавычки. Почему???! Ведь в исходном примере все работало! Но при интеграции в Codeigniter эти каычки не дали отобразить данные…

      Проблема решена. Но все же интересно, чем так мешали кавычки моему скрипту? Если у кого-то есть на это ответ — буду рад его услышать 🙂

      • Дело не в jqGrid, а в php. Вообще указывать ключи массива в таком виде $row[longitude] нельзя, хотя во многих случаях это будет правильно работать, потому что PHP автоматически преобразует longitude в строку.
        Но в документации сказано однозначно: «Индекс массива должен быть целым числом или строкой». Там же приведено несколько примеров, в которых описаны возможные проблемы.

        • Tomkit

          Спасибо)

  • Галина

    Здравствуйте! Подскажите пожалуйста,что нужно сделать чтобы заголовки в таблице переносились по словам? (Я про те заголовки, которые пишутся в 'colNames')

  • Галина

    Здравствуйте! Подскажите пожалуйста,что нужно сделать чтобы заголовки в таблице переносились по словам? (Я про те заголовки, которые пишутся в 'colNames')

  • Денис

    Здравствуйте Владимир, подскажите пожалуйста как динамически менять, т.е. добавлять или убирать в navgrid стандартные кнопки редактирования ??? Спасибо!!!!

  • Денис

    Здравствуйте Владимир, подскажите пожалуйста как динамически менять, т.е. добавлять или убирать в navgrid стандартные кнопки редактирования ??? Спасибо!!!!

  • Last

    Если кому-то надо, ниже приведенный код, позволяет перемещаться по полям формы добавления-редактирования с помощью enter и автоматически менять , на . при введении числовых значений. Вызывается через afterShowForm: enter1

    var dop=new Object();
    function enter1(formid)
    {

    var inputs = $(formid.selector+" :input");
    //получаем все поля ввода формы
    //и если для такой формы обработчик еще не создавался, то создаем
    //нужно если несколько таблиц на одной странице
    if (!dop[formid.selector])
    {
    dop[formid.selector]=1;

    inputs.keypress(function(e)
    {
    if (e.which==13)
    {
    var i=0;
    while (inputs[i].id!=this.id) i++;
    //находим текущее поле ввода и передаем фокус следующему, либо иминитруем нажатие ОК
    if (inputs[++i].id != 'id_g')
    inputs[i].focus();
    else
    $('#sData').trigger('click');
    return false;
    }
    else
    {
    var iii=$(this).val();
    if (e.which==44 && String(parseInt(iii))!='NaN')
    {

    $(this).val(iii+'.');

    return false;
    }
    }
    }
    );
    }}

  • Last

    Если кому-то надо, ниже приведенный код, позволяет перемещаться по полям формы добавления-редактирования с помощью enter и автоматически менять , на . при введении числовых значений. Вызывается через afterShowForm: enter1

    var dop=new Object();
    function enter1(formid)
    {

    var inputs = $(formid.selector+" :input");
    //получаем все поля ввода формы
    //и если для такой формы обработчик еще не создавался, то создаем
    //нужно если несколько таблиц на одной странице
    if (!dop[formid.selector])
    {
    dop[formid.selector]=1;

    inputs.keypress(function(e)
    {
    if (e.which==13)
    {
    var i=0;
    while (inputs[i].id!=this.id) i++;
    //находим текущее поле ввода и передаем фокус следующему, либо иминитруем нажатие ОК
    if (inputs[++i].id != 'id_g')
    inputs[i].focus();
    else
    $('#sData').trigger('click');
    return false;
    }
    else
    {
    var iii=$(this).val();
    if (e.which==44 && String(parseInt(iii))!='NaN')
    {

    $(this).val(iii+'.');

    return false;
    }
    }
    }
    );
    }}

  • Денис

    Здравствуйте Владимир, я уточню свой вопрос. Как изменять динамически стандартную панель редактирования navGrid(add:false, del:false, edit:false) на navGrid(add:true, del:true, edit:true)? И еще один вопрос на счет динамического создания colModel. Как добавлять и удалять динамически столбцы?

    • Я не видел в документации такого примера. Думаю, будет проще создать таблицу заново (но не уверен 🙂 ).

  • Денис

    Здравствуйте Владимир, я уточню свой вопрос. Как изменять динамически стандартную панель редактирования navGrid(add:false, del:false, edit:false) на navGrid(add:true, del:true, edit:true)? И еще один вопрос на счет динамического создания colModel. Как добавлять и удалять динамически столбцы?

    • Я не видел в документации такого примера. Думаю, будет проще создать таблицу заново (но не уверен 🙂 ).

  • Галина

    Здравствуйте. Перенос по словам в заголовках у меня так и не получился. В самой таблице все отлично переносится(если содержимое строки длиннее ширины столбца), а в заголовках нет. Может кто-нибудь узнал что-то новое по этому поводу?

    Еще вот что хотела спросить: Как перезагрузить данные в таблицу после ее редактирования? Прочитала в справке, вроде есть такой метод .trigger(«reloadGrid»);. Только вот куда его вставить?

    • Last

      С перезагрузкой все просто вот пример, при изменении переиода или диапазона сумм перегружаем таблицу

      function gridReload(){
      lastSel=0;
      var pdate1=$('#date1').val();
      var pdate2=$('#date2').val();
      var psum1=$('#sum1').val();
      var psum2=$('#sum2').val();
      jQuery("#list").jqGrid('setGridParam',{url:'prihod.php?date1='+pdate1+'&date2='+pdate2+'&sum1='+psum1+'&sum2='+psum2+'&table=',page:1}).trigger("reloadGrid");

      }
      $("input").change(function(){gridReload();return false});

  • Галина

    Здравствуйте. Перенос по словам в заголовках у меня так и не получился. В самой таблице все отлично переносится(если содержимое строки длиннее ширины столбца), а в заголовках нет. Может кто-нибудь узнал что-то новое по этому поводу?

    Еще вот что хотела спросить: Как перезагрузить данные в таблицу после ее редактирования? Прочитала в справке, вроде есть такой метод .trigger(«reloadGrid»);. Только вот куда его вставить?

    • Last

      С перезагрузкой все просто вот пример, при изменении переиода или диапазона сумм перегружаем таблицу

      function gridReload(){
      lastSel=0;
      var pdate1=$('#date1').val();
      var pdate2=$('#date2').val();
      var psum1=$('#sum1').val();
      var psum2=$('#sum2').val();
      jQuery("#list").jqGrid('setGridParam',{url:'prihod.php?date1='+pdate1+'&date2='+pdate2+'&sum1='+psum1+'&sum2='+psum2+'&table=',page:1}).trigger("reloadGrid");

      }
      $("input").change(function(){gridReload();return false});

  • Евгений

    И снова кириллица… я задал вопрос в разделе поиск данных — когда поиск осуществляется только если в запросе цифры. Теперь догадываюсь что дело не в поиске, так как проблема и при редактировании полей. Везде где знаю прописано utf8, БД тоже в этой кодировке. При выводе данных из БД (без фильтров) выводится всё хорошо- везде где надо русские буквы. Когда добавляю в запрос условия — отрабатывает если в запросе латиница и цифры. При редактировании поля — ввожу кириллицу, записываю в БД -там кракозяблы. Смотрю firebug – в post отправляются русские буквы, ответ -пустота. Всё это на W2000 и W2003 с IIS, при этом на домашнем компе с Апачем — все в норме. Подскажите где еще посмотреть..

    • К сожалению, насчет IIS ничего конкретного сказать не могу.
      AJAX запросы всегда отправляют данные в utf8, поэтому проблема либо в БД, либо в сервере. Если БД одна и та же для apache и iis, то надо смотреть настройки сервера.

      • Евгений

        Спасибо, разобрался. В файлах php одной строчки
        $dbh->exec('SET CHARACTER SET UTF8');

        оказалось недостаточно. Просто подзабыл, что всегда вставляю магические три строчки

        $dbh->exec("set character_set_client='UTF8'");
        $dbh->exec("set character_set_results='UTF8'");
        $dbh->exec("set collation_connection='UTF8_general_ci'");

        С ними счастье:-) .Еще раз спасибо за поддержку!

        • Маленький совет. Есть два запроса, которые позволяют быстро отслеживать такие ошибки

          SHOW VARIABLES LIKE 'character%'

          SHOW VARIABLES LIKE 'collation%'

  • Евгений

    И снова кириллица… я задал вопрос в разделе поиск данных — когда поиск осуществляется только если в запросе цифры. Теперь догадываюсь что дело не в поиске, так как проблема и при редактировании полей. Везде где знаю прописано utf8, БД тоже в этой кодировке. При выводе данных из БД (без фильтров) выводится всё хорошо- везде где надо русские буквы. Когда добавляю в запрос условия — отрабатывает если в запросе латиница и цифры. При редактировании поля — ввожу кириллицу, записываю в БД -там кракозяблы. Смотрю firebug – в post отправляются русские буквы, ответ -пустота. Всё это на W2000 и W2003 с IIS, при этом на домашнем компе с Апачем — все в норме. Подскажите где еще посмотреть..

    • К сожалению, насчет IIS ничего конкретного сказать не могу.
      AJAX запросы всегда отправляют данные в utf8, поэтому проблема либо в БД, либо в сервере. Если БД одна и та же для apache и iis, то надо смотреть настройки сервера.

      • Евгений

        Спасибо, разобрался. В файлах php одной строчки
        $dbh->exec('SET CHARACTER SET UTF8');

        оказалось недостаточно. Просто подзабыл, что всегда вставляю магические три строчки

        $dbh->exec("set character_set_client='UTF8'");
        $dbh->exec("set character_set_results='UTF8'");
        $dbh->exec("set collation_connection='UTF8_general_ci'");

        С ними счастье:-) .Еще раз спасибо за поддержку!

        • Маленький совет. Есть два запроса, которые позволяют быстро отслеживать такие ошибки

          SHOW VARIABLES LIKE 'character%'

          SHOW VARIABLES LIKE 'collation%'

  • Frag

    Огромное спасибо автору. Стьи супер.
    С нетерпением ждем продолжения.

  • Frag

    Огромное спасибо автору. Стьи супер.
    С нетерпением ждем продолжения.

  • Drakoniha

    Здравствуйте! Подскажите пожалуйста, как можно изменить размеры формы при добавлении новой записи. Или как добавить на нее полосу прокрутки.

  • Drakoniha

    Здравствуйте! Подскажите, пожалуйста, как изменить размеры формы вызываемой при добавлении новой строки. Или как добавить полосу прокрутки.

  • Высоту вы указываете при создании формы

    jQuery(«#editgrid»).jqGrid('editGridRow',»new»,{height:280,reloadAfterSubmit:false});

    Подробно параметры описаны здесь (Live Data Manipulation — Add row)

  • Андрей

    Владимир, спасибо Вам за статьи. А у меня следующая проблема — делаю редактирование в форме,
    вот код создания таблицы

    $('#tAllDataProjectManager').jqGrid({
    url: createSelectUrl(),
    editurl: '/content/dataadapter.php?myFrom=1',
    datatype: 'xml',
    mtype: 'POST',
    cellEdit: false,
    caption: 'Проекты',
    colNames: ['Наименование', 'Дата регистрации', 'Завершен', 'Дата завершения', 'Примечание'],
    colModel :
    [
    { name: 'name', index: 'name', width: 400, align: 'left', editable: true },
    { name: 'createdate', index: 'createdate', width: 150, align: 'left', datefmt: 'dd.mm.YYYY', formatter: 'date', readonly:true, editable: true },
    { name: 'isfinished', index: 'isfinished', width: 150, align: 'center', formatter: 'checkbox', editable: true, edittype: «checkbox», editoptions: {value:»1:0"} },
    { name: 'finishdate', index: 'finishdate', width: 150, align: 'left', formatter: 'date', readonly: true, editable: true },
    { name: 'comment', index: 'comment', width: 150, align: 'left', hidden: true, editable: true, editrules: {edithidden: true} }
    ],
    pager: $('#tAllDataPagerProjectManager'),
    rowNum: 25,
    rowList: [10, 25, 50, 100],
    sortname: 'createdate',
    sortorder: 'asc',
    height: 400
    }).navGrid(«#tAllDataPagerProjectManager», {
    refresh: true, edit: true, add: true, del: true, search: false, view: true
    });

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

  • Закрытием формы можно управлять с помощью свойств closeAfterAdd и closeAfterEdit.

    Проверка данных определяется в colModel с помощью опции editrules. Если нужен свой обработчик можно использовать событие beforeSubmit.

    Подробности здесь.

  • Drakoniha

    Подскажите пожалуйста можно ли сделать экспорт таблицы в Excel? И если да, то какая функция?

  • Есть готовый пример. Кнопка экспорта появляется в панели навигации под таблицей (рядом с поиском).

    В этом примере добавление кнопки выполняется из php скрипта.

    Из js ее можно добавить так.
    $(«#mygrid»).jqgrid({

    «excelexport»:true,
    });

  • Drakoniha

    Да, я видела этот пример. Но что-то у меня ни как там написано, ни как Вы написали — не работает. Может надо какой-нибудь файл подключить?

  • Но пример ведь у Вас запустился? Значит, между Вашим кодом и кодом в примере есть отличия. Попробуйте скачать полную версию jqGrid со всеми плагинами и экспериментировать с ней.

  • Qw1564

    выводятся пустые таблицы во всех примерах по jqGrid, с чем это может быть связано?

  • Может быть с тем, что сервер возвращает не корректные данные (или в неправильном формате). Устанавливайте firebug и проверяйте запросы и ответы от сервера.

  • Drakoniha

    А у Вас нет ссылки на готовый пример где кнопка экспорта из js вызывается?
    А еще: «excelexport»:true, пишется в описании таблицы, или навигатора?

  • Нет, такого примера у меня нет.

    «excelexport»:true
    указывается при инициализации jqGrid, в перечне параметров таблицы.

  • Drakoniha

    Хоть что делай — не работает. А где Вы прочитали про то, что экспорт в excel именно так задается? Просто не в документации, не на сайте с демо-примерами я этого не нашла.
    Подскажите еще пожалуйста(раз с Excel у меня как-то не ладится) как можно распечатать данные из таблицы. Файл-Печать из браузера мне не подходит.

  • Смотрел здесь.

  • Kamil-shagaliev

    Здравствуйте! У меня такая проблема. Когда я редактирую данные через inline, то мне необходимо проверить эти данные. ДОпустим у меня столблец «количество» и допустим там значение 5. А в базе у меня значение 10. Мне необходимо, чтобы при редактировании проверялось редактируемое значение больше ли чем в базе или нет. Заранее спасибо

  • Такую проверку можно сделать ajax запросом. Т.е. нужен php скрипт, который будет проверять введенное значение, а jqgrid нужно настроить так, чтобы он отправлял эти запросы.

    Самый интересный вопрос — в какой момент отправлять ajax запрос. Тут решать вам. Перечень поддерживаемых событий здесь. Все зависит от того, в каком виде вы хотите выводить сообщение о том, что значение меньше существующего.

  • JtNET

    а как добавить кнопку button на каждую строку, чтобы при нажатии открывалось активное окно в которое передовался бы id элемента строки, например : при нажатии на кнопку открывается ссылка link.php?id=5 где 5 — это id элемента строки (грубо говоря это номер строки)

  • Есть готовый пример (Row Editing -> Custom Edit)

  • JtNET

    спасибо за помощь

  • JtNET

    Здравствуйте. Как решить проблему с кодировкой? (при редактировании )

  • JtNET

    уже разобрался

  • JtNET

    Если выполнить стандартный код используя кнопку удаления del в навигаторе наблюдаю неполное удаление данных(остается id, т.е. насколько я понимаю скрипт обновляет строку таблицы по id, а не удаляет ее).
    Вопрос: как можно написать код, чтобы строка удалялась полностью (вместе с id)

  • JtNET

    И еще- если я правильно понял, здесь выполняется скрипт на обновление данных в бд:

    //подключаемся к базе
    $dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
    //указываем, мы хотим использовать utf8
    $dbh->exec(«set character_set_client='UTF8'»);
    $dbh->exec(«set character_set_results='UTF8'»);
    $dbh->exec(«set collation_connection='UTF8_general_ci'»);

    //определяем количество записей в таблице
    $stm = $dbh->prepare('UPDATE price SET region=?, district=?, street=?, level=?, type=?, all_level=?, all_place=?, life_place=?, kitchen=?, bath=?, angle=?, telefone=?, bathroom=?, type_room=?, balcony=?, price=?, plot=?, firm_telefone=?, about=?, status_house=?, status_city=?, num_room=? WHERE id=?');
    $stm->execute(array($region, $district, $street, $level, $type, $all_level, $all_place, $life_place, $kitchen, $bath, $angle, $telefone, $bathroom, $type_room, $balcony, $price, $plot, $firm_telefone, $about, $status_house, $status_city, $num_room, $id));

    а как правильно написать для добавления (на insert) и удаление (delete) данных ?

  • JtNET

    и еще вопрос — можно ли сделать импорт в бд из EXCEL используя JsGrid(есть ли кнопка и скрипт для этого). Вопрос возник т.к. на странице загрузки http://www.trirand.com/blog/?page_id=6 есть модуль Importing and Exporting…

  • У меня не было проблем с кодировками.

    Данные отправляются ajax запросом, значит utf-8, проверяйте кодировки базы.

  • А в базе данных запись остается? Или нет?

  • Удаление

    $stm = $dbh->prepare('DELETE FROM price WHERE id=?');

    $stm->execute(array($id));

    Создание

    INSERT INTO tbl_name (col1,col2) VALUES(15,col1*2)

    $stm = $dbh->prepare('INSERT INTO price (region, district, street, level, type, all_level, all_place, life_place, kitchen, bath, angle, telefone, bathroom, type_room, balcony, price, plot, firm_telefone, about, status_house, status_city, num_room) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?));

    $stm->execute(array($region, $district, $street, $level, $type, $all_level, $all_place, $life_place, $kitchen, $bath, $angle, $telefone, $bathroom, $type_room, $balcony, $price, $plot, $firm_telefone, $about, $status_house, $status_city, $num_room));

    • Oleg

      а как понять что нужно виполнять? создание или удаление или редактирования? как определить код на віполнение?

      • Если кратко, то вам нужно проверить параметры, которые jqGrid отправит php скрипту. Например, если запрос на обновление, то в параметре rowid будет указан id строки, которую нужно изменить. А если запрос на добавление новой записи, то в rowid будет строка 'new'. Подробно читайте здесь.

  • Этот модуль поддерживает xml file, xml string, json file and json string. Т.е. данные из excel нужно будет предварительно преобразовать в один из этих форматов.

    Я бы, наверное, сделал отдельную форму для загрузки xml файла и php скрипт, который импортирует эти данные в базу. А потом смотрел бы их через jqGrid.

  • JtNET

    Спасибо за удаление — работает отлично, но остается проблема:
    не выходит вставка в бд пишу

    if ($_POST['oper']=='add')
    {
    $stm = $dbh->prepare('INSERT INTO price (region, district, street, level, type, all_level, all_place, life_place, kitchen, bath, angle, telefone, bathroom, type_room, balcony, price, plot, firm_telefone, about, status_house, status_city, num_room) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)');
    $stm->execute(array($region, $district, $street, $level, $type, $all_level, $all_place, $life_place, $kitchen, $bath, $angle, $telefone, $bathroom, $type_room, $balcony, $price, $plot, $firm_telefone, $about, $status_house, $status_city, $num_room));
    }

    отправляется запрос POST

    id=_empty&district=%D0%B0%D1%8B%D0%B2%D0%B0%D1%84%D1%8B%D0%B0&street=%D0%B0%D1%8B&level=%D1%8B%D0%B2%D0%B0&type=%D1%8B%D0%B2%D0%B0&all_level=%D1%8B%D0%B2%D0%B0&all_place=%D1%84%D1%8B%D0%B2%D0%B0&life_place=%D1%8B%D0%B2%D0%B0&kitchen=%D1%8B%D0%B2%D0%B0&bath=%D1%8B%D0%B2%D0%B0&angle=%D1%8B%D0%B2%D0%B0&telefone=%D1%8B%D0%B2%D0%B0&bathroom=%D1%8B%D0%B2%D0%B0&type_room=%D1%8B%D0%B2%D0%B0&balcony=%D1%8B%D0%B2%D0%B0&price=%D1%8B%D0%B2%D0%B0&firm_telefone=&oper=add

    ответ от сервера пустой. Подскажите в чем может быть дело

  • Так я ошибку не найду. Попробуйте выполнить этот запрос через консоль mysql, если запись добавиться, перенесите его в ваш скрипт и проверяйте значения параметров.

  • Vodennikov

    подскажите пожалуйста, вызываю окно редактирования, в нем два выпадающих списка типа «select», внешние данные нормально в них подгрузил. не могу реализовать механизм, чтобы при выборе значения из списка1 изменялись данные в списке2
    попытка добавить атрибут не получается
    $(«#список1»).attr('onChange', 'функция1()');
    какие еще есть идеи?

  • Iprodigy

    Владимир, а не подскажите как при изменении ячейки не отправлять ajax запрос, а просто сохранить данные в таблице?
    Суть в том, что данные в таблицу добавляются не из базы, а динамически, пользователем. А затем уже, при нажатии на отдельную кнопку, происходит обработка всех данных таблицы. Опять таки, без сохранения в базу.

    • Точно ответить не могу, т.к. сам не пробовал.
      По-идее, подходит событие beforeRequest.

  • Сергей

    подскажите как увеличить высоту грида ?

    • Высота задается во время начальной настройки.
      jQuery(«#list»).jqGrid({

      height:500,

      });

  • Здравствуйте!
    1. Уже много времени проюзался с этим плагином, но никак не могу понять, как добавить кнопки для редактирования, удаления и вставки нового ряда в таблицу, как это сделано тут — http://www.trirand.com/blog/phpjqgrid/examples/functionality/excel/default.php. подскажите мне, пожалуйста, и если можно, то заодно напишите РНР код для обработчика.
    2. может кто знает, как сделать, чтобы в таблице выводилось отдельное поле с ссылкой с параметром ID из таблицы, например
    ?

    • В примере, который вы привели я вообще не нашел кнопок редактирования,
      удаления и вставки нового ряда в таблицу.

  • www78

    Добрый день. Мне как обычно не повезло с рассматриваемым примером. Подскажите пожалуйста чтобы использовать вариант «1) В отдельном окне. При редактировании строки появляется окно со всеми полями, в которые нужно ввести новые значения. Клик по кнопке «OK» отправит данные серверу.» Как нужно поступить?

  • Гость

    А как подставить свои данные в checkbox?
    Например, мне с сервера возвращаются данные. В одном из полей, обзовем его поле_1, содержание булевой переменной, т.е. символы t или f. Мне нужно следующее, если присутствует символ t — галочка в чекбоксе стоит, если символ f — галочка не стоит.

    • Попробуйте так:colModel: [

      {name:'price', …, editable:true, edittype:'checkbox', editoptions:{value:»t:f»}, editrules:{…}, formoptions:{…} },

      ]

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

  • Александр

    Добрый день, я никак не могу понять как обработать информацию на серверной стороне. Недавно наткнулся на такой код: 
    if($_GET['oper']=='add')
    {
    … … …
    }
    if($_GET['oper']=='edit')
    {
    … … …
    }
    if($_GET['oper']=='del')
    {
    … … …
    }Он не работает. Есть ли другой способ узнать, что именно нажато add, edit, или delete

    • Вам нужно посмотреть с помощью firebug какие параметры передаются на сервер и проверить их значения.

  • sicil

    У меня такой вопрос. Как у вас организованно чтобы при выборе ячейки на ней оставалось выделение? 

    • По-моему это стандартное поведение jqGrid. Не видел, чтобы выделение куда-то перемещалось после выбора ячейки.

  • Luba

    Добрый день!
    Подскажите, пожалуйста, как обновлять грид, если тип     datatype: 'jsonstring' ?
    Делаю так:
    jQuery(«#list»).setGridParam({datastr:{«page»:1,»total»:2,»records»:»2",»rows»:[{«id»:» 0   «,»cell»:['data1','data2']}]}, page:1}).trigger(«reloadGrid»);
    Данные приходят (видно в файрбаге), но таблица не обновляется.

    • По-моему, что-то не так с настройками, которые вы указываете в setGridParam. У вас точно есть строка с
      «id»:» 0   » ?

  • Dogidogi

    все по инструкции. данные не обновляются в таблице, вернее не сохраняются.

    • 1) Проверяем уходят ли на самом деле данные (например, с помощью firebug).
      2) Проверяем запросы к базе (PDO::errorInfo)

      • Dogidogi

        в firebug ( в post)  данные есть, в поле ответ ничего, PDO на ошибки не ругается, хотя до этого ругалось на то, что кол-во  объявленных элементов не совпадает с кол-вом передаваемых.

        • В таком случае, посмотрите лог mysql.
          Кроме того, попробуйте сформировать и выполнить запрос вручную.

        • dogidogi

          у меня пример (демо) не открывается в firefox, jdgrid пиешт: 
          jQuery(«#list»).jqGrid is not a function
          editurl: 'saverow.php'

        • Спасибо! Исправил.

  • Иван

    jQuery(«#list»).jqGrid is not a function
    editurl: 'saverow.php' такая же ошибка, как исправить?

    • Измените
      jQuery(document).ready(function(){
      на
      $(window).load(function(){

  • D_mike

    прямо скажу, прошерстил по этому вопросу весь русский инет, подробно спрашивал об этом здесь: http://www.linkexchanger.su/forum/viewtopic.php?f=4&t=1698&view=unread ), но ответа нет. Ответьте плз хотя бы на такой вопрос: у меня при инлайн-редактировании стандартные кнопки add и edit лочатся при начале редактирования, и не возвращаются в исходное состояние после его завершения, блокируя тем самым возможность добавления/редактирования больше одной строки без перегрузки грида (=страницы) за раз. На мой взгляд, это неприемлемо для любого, мало-мальски серьезного использования jqGrid. Как на это повлиять я не нашел, или не понял. Судя по тому, что жалобы по данному поводу отсутствуют, нужно предполагать, что у всех, кроме меня, кнопки работают правильно. Но мне это надо знать точно. Может ли кто-н подтвердить, что да, я использую инлайн-редактирование и при этом с поведением кнопок у меня данной проблемы не наблюдается(?)

    • Есть работающий пример на оф. сайте — http://www.trirand.com/blog/jqgrid/jqgrid.html (Row Editing (new) -> Inline Navigator (new)).

      Для входа в режим редактирования нужно нажать кнопку «edit» (на нижнем тулбаре). После этого кнопка «add» становится не активной. Нажимаем «save» и кнопка «add» снова становится активной.

      • D_mike

        Спасибо. Я этот пример знаю. Судя по кодам в нем, управление поведением кнопок на уровне штатного использования плагина не предусмотрено. То есть, логика кнопок полностью спрятана на уровне внутреннего кода плагина (если судить по этому примеру). В таком случае, у меня все должно работать. Но не работает. Я же недостаточно сильный программер (вернее, вообще не программер), чтобы без смертельной необходимости соваться в дебри исходников. Работа демки в данном случае не является показателем, так как я уже встречал в нете инофрмацию о другой работающей на сайте демке, код которой, предлагаемый для скачивания, тем не менее оказыватся нерабочим без допиливания … Поэтому оптимальным для меня был бы все же буквальный ответ на мой вопрос из моего предыдущего месседжа. Неужели никто не пытался использовать функционал инлайн-редактирования???

      • D_mike

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

        • Не получилось у меня «поломать» редактор в демке… в каком браузере вы проверяли? … но не в этом дело.

          Если в вашем случае не работает стандартная кнопка добавления записи, то нет никакой необходимости править код плагина. Используйте внешнюю кнопку, например, как на в примере Live Data Manipulation -> Add row

        • D_mike

          я пробовал в хроме. Сейчас проверил в Ff. Формально (то есть при отсутствии подключения в демке клавиатурных клавиш, и не придираясь к некоторым мелким сбоям) здесь вроде работает. Но разве ж это дело? Это меньше минимального «джентельменскиго набора», пригодного для серьезного использования. Меня же интересует возможность успешной комплексной (полноценной) работы тулбара jqGrida при inline-редактировании. Не работа кнопок по отдельности (по отдельности они у меня работают) — а их скоординированное контекстно-зависимое поведение, дуракоустойчивое выполнение общепринятого типового сценария смены их состояний. И непременно с функционированием клавы. К сожалению, я пока так и не нашел информации о том, что это вообще у кого-н получилось, т.е., реально существует.

        • Я сомневаюсь, что у кого-то получилось сделать редактирование лучше, чем на оф. сайте.

  • Paoock

    Спасибо!

  • hunt43

    Есть пара вопросов:
    1. Как подвязать php-скрипт для добавления и удаления записей? Т.е. для вывода записей используется параметр url, а для редактирования editurl, а какие параметры для добавления и редактирования? 

    2. Как разместить navGrid над таблицей?

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

    Вот код:

    jQuery(document).ready(function($){
    $(«#table2»).jqGrid({
    autowidth:true,
    colNames:[«ID»,»Логин»,»Пароль»,»ФИО»],
    colModel:[
    {name:»id», index:»id», width:20, editable:false, search:false},
    {name:»login», index:»login», width:100, editable: true, edittype:»text»,editoptions:{maxlength:100}},
    {name:»pwd», index:»pwd», width:100, editable: true, edittype:»text»,editoptions:{maxlength:100}},
      {name:»fio», index:»fio», width:100, editable: true, edittype:»text»,editoptions:{maxlength:100}} ],
    pager:»#pager2",
    url:'getdata.php',
    datatype: 'json',
    viewrecords:true,
    editurl: 'update_record.php' })
    jQuery(«#table2").jqGrid('navGrid',»#pager2»,{edit:true,add:true,del:true});});

    • 1. На сколько я знаю, проблема решается только частично

      2. Проверяйте запросы, которые уходят на сервер, и его ответы.

      • hunt43

        А как проверить запросы?

        • Любым отладчиком. Например, Firebug (это плагин к Firefox).

  • Igoresz

    Что делать с 7 строками? Надо больше.
     

  • hunt43

    Использую форму редактирования записи. Если в поле price внесли изменения, то нужно запрашивать подтверждение и при ответе «да» отправлять письмо на почту. Если же изменения были, но поле  price не менялось, то просто сохранить изменения. 
    2 вопроса:
    1. Как проверять изменено ли поле price?
    2. Как привязать скрипт при ответе «да»?
    Как я понял, надо использовать события beforeShowForm и beforeSubmit, но как в них проверять условие и привязать скрипт не знаю. Подскажите, пожалуйста.

    • При вызове beforeSubmit получает 2 параметра: postdata, formid. postdata содержит все поля записи. Его и используйте для проверки.
      if (postdata.price == 100) …
      beforeShowForm получает только 1 параметр: formid — id формы.

      • hunt43

        А как тогда в beforeShowForm получить значение price, чтобы потом сравнить со значением в beforeSubmit? Т.е. мне надо просто выяснить: меняется ли значение у price при редактировании записи. Если да, то отправляется письмо…

        • Я думаю, что эту проверку нужно выполнять на стороне сервере, а не на клиенте. Т.е. отправляете заполненную форму в любом случае, не зависимо от значения price. А на сервере перед обновлением записи в БД читаете из базы текущее значение.

        • hunt43

          Тут проблема в том, что если price изменилось, то надо задавать вопрос: «Вы уверены, что хотите внести изменения?»

        • Тогда можно использовать глобальную переменную. В событии beforeShowForm записываете в неё текущее значение, а в beforeSubmit сравниваете с введенным.

  • Fotoblack

    Помогите пож не могу понять почему не сохраняет данные после редактирования в точности правил код примера под свой но не выходит бьюсь уже второй день

    exec('SET CHARACTER SET utf8'); //определяем количество записей в таблице $stm = $dbh->prepare('UPDATE users SET store_id=?, modelname=?, supp=?, color=?, datesupp=?, datesold=?, priceme=?, pricesold=?, profit=?, pricemax=?, profitmax=?, pricemin=?, profitmin=? WHERE id=?'); $stm->execute(array($store_id, $modelname, $supp, $color, $datesupp, $datesold, $priceme, $pricesold, $profit, $pricemax, $profitmax, $pricemin, $profitmin, $id));}catch (PDOException $e) { echo 'Database error: '.$e->getMessage();}// end of saverow.php

    exec('SET CHARACTER SET utf8'); //определяем количество записей в таблице $rows = $dbh->query('SELECT COUNT(id) AS count FROM store'); $totalRows = $rows->fetch(PDO::FETCH_ASSOC); $firstRowIndex = $curPage * $rowsPerPage — $rowsPerPage; //получаем список пользователей из базы $res = $dbh->query('SELECT * FROM store ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage); //сохраняем номер текущей страницы, общее количество страниц и общее количество записей $response->page = $curPage; $response->total = ceil($totalRows['count'] / $rowsPerPage); $response->records = $totalRows['count']; $i=0; while($row = $res->fetch(PDO::FETCH_ASSOC)) { $response->rows[$i]['id']=$row['id']; $response->rows[$i]['cell']=array($row['id'], $row['store_id'], $row['modelname'], $row['supp'], $row['color'], $row['datesupp'], $row['datesold'], $row['priceme'], $row['pricesold'], $row['profit'], $row['pricemax'], $row['profitmax'], $row['pricemin'], $row['profitmin']); // id store_id modelname supp color datesupp datesold priceme pricesold profit pricemax profitmax pricemin profitmin $i++; } echo json_encode($response);}catch (PDOException $e) { echo 'Database error: '.$e->getMessage();}// end of getdata.php

    • Если вы скопировали код без изменений, то проблема либо в передаче данных, либо в подключении к базе.

      Выведите в начале скрипта весь массив $_POST. Если в нем все отправленные данные есть, проверяйте подключение к базе (для этого достаточно выполнить любой запрос).

  • Fotoblack


    exec('SET CHARACTER SET utf8'); //определяем количество записей в таблице $rows = $dbh->query('SELECT COUNT(id) AS count FROM store'); $totalRows = $rows->fetch(PDO::FETCH_ASSOC); $firstRowIndex = $curPage * $rowsPerPage - $rowsPerPage; //получаем список пользователей из базы $res = $dbh->query('SELECT * FROM store ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage); //сохраняем номер текущей страницы, общее количество страниц и общее количество записей $response->page = $curPage; $response->total = ceil($totalRows['count'] / $rowsPerPage); $response->records = $totalRows['count']; $i=0; while($row = $res->fetch(PDO::FETCH_ASSOC)) { $response->rows[$i]['id']=$row['id']; $response->rows[$i]['cell']=array($row['id'], $row['store_id'], $row['modelname'], $row['supp'], $row['color'], $row['datesupp'], $row['datesold'], $row['priceme'], $row['pricesold'], $row['profit'], $row['pricemax'], $row['profitmax'], $row['pricemin'], $row['profitmin']); // id store_id modelname supp color datesupp datesold priceme pricesold profit pricemax profitmax pricemin profitmin $i++; } echo json_encode($response);}catch (PDOException $e) { echo 'Database error: '.$e->getMessage();}// end of getdata.php


       

  • Fotoblack

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

    Добавил в запрос строку 
    WHERE modelname = '.$model.'

      $res = $dbh->query('SELECT * FROM store WHERE modelname = '.$model.' ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage);

    сверху добавил переменную с запросом GET

    try { //читаем параметры $curPage = $_POST['page']; $rowsPerPage = $_POST['rows']; $sortingField = $_POST['sidx']; $sortingOrder = $_POST['sord']; $model = $_GET['model']; 

    Но по строке в браузере http://……/?model=340
    таблица пуста.

    Хотя если  запрос вместо

    WHERE modelname = '.$model.'
    так
     WHERE modelname = 340
    Всё выводит но если 340 заменить на любой текст слюбой буквой но пустая таблица.

    проверить передачу методом echo не получается из файле гет дата он ё не показывает. 
    Думаю что проблема в кодировке или ещё в чём но разобратся не могу помогите пожалуйста.

    • В SQL запросах текстовые строки нужно брать в кавычки, т.е. так:
      WHERE modelname = «'.$model.'»
      Но я вам советую не записывать запросы в таком виде, т.к. они будут уязвимы для sql injection атак. Используйте $dbh->prepare

      • Fotoblack

        Таблица только для личного пользования поэтому над безопастностью не задумываюсь, спасибо за подсказку.
        Но к сожалению запрос всё равно выдаёт пустую таблицу(
        кодировка таблиц и полей в ней  utf8_general_ci
         $model = $_GET['model']; vj; может здесь где косяк

        • Вам нужно посмотреть какой именно запрос выполняется и попробовать выполнить его из консоли mysql (или любой другой системы для работы с базой, например, phpmyadmin).
          Когда убедитесь, что запрос возвращает нужные значения, переносите его в скрипт.

        • Fotoblack

          Пробовал не выходит. Блин уже все волосы на голове вырвал но не хочет он пахать и всё(((
          Может подскажите как вывести пременную на экран чтобы отследить где ошибка

          query('SELECT * FROM store WHERE modelname = «'.$mk.'» ORDER BY '.$sortingField.' '.$sortingOrder.' LIMIT '.$firstRowIndex.', '.$rowsPerPage);

          $mk = «car_rc_lambo»; работает
          $mk = $_GET['model']; а это нет

          как вывсети переменную $mk на экран чтобы отследить передаётся ли переменная echo не работает. Был бы очень признателен за помощь нервов уже нет (((( если есть желание помочь через icq по буду рад получить в почту номерок. Заранее благодарен!

        • На самом деле
          echo $mk;
          работает. Просто похоже вы ожидаете увидеть результат на самой странице. Но jqGrid подгружает данные с помощью ajax запросов, т.е. страница не перегружается.
          Поэтому нужно смотреть в отладчике (firebug для firefox) в нем заходите на вкладку Net (Сеть) и там будет список всех запросов к серверу. Для каждого запроса вы сможете посмотреть ответ сервера и в нём будет текст, который выводит echo.

  • Gennady

    Здравствуйте. Спасибо за серии статей по JqGrid.
    Сделал инлайн редактирование как описано в статье. Все прекрасно работает. Но редактировать каждую строку в отдельности, когда одна из колонок имеет одинаковое значение во всех строках(или в большинстве строк ) как то неправильно. Поэтому рядом с гридом поставил checkbox, при нажатии на Enter отправляю на сервер и значение checkbox. На сервере тоже все прекрасно отрабатывает, и  отправляет клиенту ответ какой либо. Но никак не могу понять какое событие возникает после редактирования, чтобы мог перезагрузить грид. Подскажите пожалуйста.

    • Gennady

      Отвечаю сам, может кому пригодится. Немного переписал обработчики событий :
      beforeSelectRow: function (rowid) {
                          if (rowid !== lastSel) {
                              $(«#list»).jqGrid('restoreRow', lastSel);
                              lastSel = rowid;
                          }
                          return true;
                      },
                      ondblClickRow: function(rowid) {
                          $(this).jqGrid('editRow', rowid, true, null, null, null, {}, function (rowid) {
                              jQuery(«#list»).trigger(«reloadGrid»);
                              $(this).focus();
                          });
                      }

      • Честно говоря, я не понял почему в вашем случае после редактирования строки возникает событие dblClick. Но раз работает, значит правильно 🙂

        • Gennady

          Тут, как я понимаю, возникает наоборот редактрование после dblClick, а перезагрузка таблицы в aftersavefunc

  • Natair

    Столкнулся с такой проблемой — если изменить во всех документах «id» на какое-нибудь другое имя, например «id1», которое есть в таблице, то сохранение изменений не происходит. Чем это может быть вызвано?

    • А в серверных скриптах вы изменили запросы, которые обновляют данные в таблице?

      • Natair

        Изменял везде где был id, сделал то же самое в примере, который показывал таблицу до изменений, после уже не показывал.

        • Тогда firebug'ом проверяйте какие данные ушли серверному скрипту (и его ответ).

  • Евгений

    подскажиет почему скачанный пример работает во всех браузерах кроме mozilla, в то же время демо пример в мозилле работает нормально ? какие отличия между скачиваемым архивом и демо версией ?

    правда есть один момент — я каидаю все файлы из архива в папку, а папку js кидаю в корень сайта — пути к файлам соответственно меняю — не работает почему то только в mozille

    • Установите firebug и у вас в консоли появится список ошибок.

  • Kesar

    День добрый, появилась необходимость повесить автокомплиты на редактируемые ячейки.

    Проблема в том, что при выборе из выпадающего списка значения происходит выход из режима редактирования.

    Аналогично тому, если бы мы просто нажали ентер в редактируемой ячейке.

    Никто не встречался с такой проблемой? Пробовал всплытие события блочить при autocomplete.change(), но все четно.

    Спасибо за внимание!

  • Здравствуйте. В приведенном выше примере при попытке выполнить следующий скрипт:
    jQuery(«#a1»).click( function(){
    var id = jQuery(«#list»).jqGrid('getGridParam','selrow');
    if (id)
    {
    var ret = jQuery(«#list»).jqGrid('getRowData',id);
    alert(«id=»+ret.id+» invdate=»+ret.name+»…»);
    }
    else
    {
    alert(«Please select row»);
    }
    });

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

    • Андрей, я не нашел «приведенный выше пример». Мне будет намного проще ответить, если вы выложите ваш код на сервис вроде http://jsfiddle.net/

  • MaryAnn

    Добрый день, сначала хочу сказать спасибо за статью и пример, ну и спросить, у меня для системы оцениваня знаний где сначала выбираю группу из списка, и для нее создаю табличку-ведомость, где будут все данные, в т.ч. преподователи, оценки и т.д. и которая должна быть пригодна для редактирования с помощью плагина Jquery, не идет выборка записей в таблицу: есть заголовки, но самих данных нет, они не показываются, то ли не идёт привязка к выбранной группе то ли вообще никакая привязка не идёт, можете дать совет что это может быть?
    в getdata.php

    exec('SET CHARACTER SET utf8');
    mysql_select_db($database) or die(«Error conecting to db.»);
    $result = mysql_query('SELECT COUNT(id) AS count FROM progress_teacher_mark ');
    $row = mysql_fetch_array($result,MYSQL_ASSOC);
    $count = $row['count'];
    if( $count >0 ) {

    $total_pages = ceil($count/$limit);
    } else {
    $total_pages = 0;
    }

    if ($page > $total_pages) $page=$total_pages;
    $start = $limit*$page — $limit; // do not put $limit*($page — 1)

    //получаем список пользователей из базы
    $res = «SELECT `progress_teacher_mark`.*, concat(`catalogTeacher`.`teacher_surname`,' ',`catalogTeacher`.`teacher_name`,' ', `catalogTeacher`.`teacher_pobatkovi`) as teacher, `catalogSubject`.`naz_dus` as subject, `catalogGroup`.`nazva_grupu` as grupa FROM `progress_teacher_mark` left join catalogTeacher on `progress_teacher_mark`.`teacher_link` = `catalogTeacher`.`id`
    left join catalogSubject on `progress_teacher_mark`.`subject_link` = `catalogSubject`.`id` left join catalogGroup on `progress_teacher_mark`.`group_link` = `catalogGroup`.`id` WHERE `progress_teacher_mark`.`group_link`=».$post_group_name.» ORDER BY «.$sidx.» «.$sord.» LIMIT «.$start.», «.$limit);
    $result = mysql_query( $res ) or die(«Couldn’t execute query.».mysql_error());

    if(isset($post_group_name)) {
    //сохраняем номер текущей страницы, общее количество страниц и общее количество записей
    $response->page = $page;
    $response->total = $total_pages;
    $response->records = $count;

    $i=0;
    while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $response->rows[$i]['id']=$row['id'];
    $response->rows[$i]['cell']=array($row['id'], $row['teacher'], $row['subject'], $row['grupa'], $row['p_max'], $row['m0_max'], $row['m1_max'], $row['m2_max'], $row['m3_max'], $row['m4_max'], $row['m5_max'], $row['m6_max'], $row['m7_max'], $row['m8_max'], $row['p_date'], $row['m0_date'], $row['m1_date'], $row['m2_date'], $row['m3_date'], $row['m4_date'], $row['m5_date'], $row['m6_date'], $row['m7_date'], $row['m8_date'], $row['pom_date'], $row['eo_date'], $row['so_date'] );
    $i++;
    }
    echo json_encode($response);
    }
    catch (PDOException $e) {
    echo 'Database error: '.$e->getMessage();
    }
    // end of getdata.php

    • Проверить ваш код не могу, т.к. у меня он просто не будет работать. Но несколько советов дам:

      1) Нужно выяснить получает ли getdata.php запрос (может быть ошибка в JS коде, который отправляет AJAX запрос). Для этого открываем консоль Firebug или инструментов вебмастера в Chrome и смотрим вкладку network. В этой вкладке отображаются все отправленные запросы. Можно посмотреть все заголовки и ответ сервера.

      2) Если ответ сервера не содержит данных, попробуйте выполнить запрос к базе данных вручную (например, через phpMyAdmin).

      • MarryAnn

        таблица была уже сделанна и построена как обыкновеннная и работала, но передо мной постала задача сделать ёё пригодной для редактирования, т.е. с помощью JQuery, поетому етот запрос взят по аналогии с рабочего кода, где все данные вивидылись, но там было очень много проверок, пока дойшло до вивода таблицы-ведомости, такие как первая основная выбрана ли группа if(empty($post_new_group)) {, далее в ней проверолось засетано ли значения if(isset($post_group_name)) и наконец в сессии if (empty($_SESSION['record_id'])) {, потом уж выводилась ведомость, может так как в getdata.php все это не учтено, то не идет запрос??, а можно в том файле где основной код, у меня он называется dekanat(как index), вставыть те данные с getdata в основной код где осуществляются эти проверки? я раньше не работала с JQuery, поетому и есть такие какието непонятные вопросы….

        • Я понимаю. Но вам в любом случае нужно научиться пользоваться инструментами для отладки JS кода и AJAX запросов (Firebug или инструменты вебмастера Chrome). Иначе вы будете очень долго угадывать причину проблемы.

      • MaryAnn

        Спасибо за советы, в процессе работы эти вопросы выяснились и решились, оказалось надо было создать новую переменную, которая бы передавала id нужной нам группы вот в таком виде:
        jQuery(document).ready(function(){
        var lastSel;var group_name1 = »;
        но пришлось делать опцию удаления, и вот здесь то и не сошлось ничего, во первых, меня интересует, надо ли создавать какой-то еще php-файл, для обработки удаления записи, как и где к нему обращаться? при создании кнопки или же как? возможен ли какой-то более подробный пример или решения к этому вопросу? и как сохранять изменения. В моей базе все существующие строки имеют идентификатор delete=0, а удаленные delete-1.
        Буду очень благодарна за ответ))

        • Нужно или нет создавать новый php файл, зависит от структуры серверной части вашего приложения. jQgrid отправляет ajax запросы серверу, php должен их обработать. Будет это один скрипт или несколько, для jQgrid не важно.

          Но, естественно, серверную часть желательно написать таким образом, чтобы её можно было расширять с минимальными усилиями.

          Поэтому вопрос к вам. Можете описать структуру серверной части вашего приложения? Используются ли какие-нибудь фреймворки, библиотеки? MVC паттерн?

        • MaryAnn

          Ничего особенного не использую, таблица примерно такова как у вас, с getdata.php формирую данные для выбранной группы с условием WHERE `progress_teacher_mark`.`group_link`='».$sord.»'and `progress_teacher_mark`.`deleted`=0", а в saverow.php их сохраняю, еще не придумала как сохранить преподователя и предмет, так как выборка идет с других таблиц в БД, но это не критично важно сейчас, а вот как подключить выдаление при нажатии на DEL, и обновление данных?
          Например, я создала файл для этой цели del.php, в нем напишу:

          $id = $_POST['id'];

          $delete= «update progress_teacher_mark set deleted=1 where id = '».$_POST['id'].»'»;

          $del = mysql_query( $delete ) or die(«Couldn?t execute query.».mysql_error());

          echo json_encode($id);

          $et = «>»;

          или же надо еще новый массив данных формировать после удаления? как правильно подключить этот файл к кнопке?

        • MaryAnn

          Ничего особенного не использую, таблица примерно такова как у вас, с getdata.php формирую данные для выбранной группы с условием WHERE `progress_teacher_mark`.`group_link`='».$sord.»'and `progress_teacher_mark`.`deleted`=0", а в saverow.php их сохраняю, еще не придумала как сохранить преподователя и предмет, так как выборка идет с других таблиц в БД, но это не критично важно сейчас, а вот как подключить выдаление при нажатии на DEL, и обновление данных?
          Например, я создала файл для этой цели del.php, в нем напишу:

          $id = $_POST['id'];

          $delete= «update progress_teacher_mark set deleted=1 where id = '».$_POST['id'].»'»;

          $del = mysql_query( $delete ) or die(«Couldn?t execute query.».mysql_error());

          echo json_encode($id);

          $et = «>»;

          или же надо еще новый массив данных формировать после удаления? как правильно подключить этот файл к кнопке?

        • MaryAnn

          Или же, у вас есть пример поиска данных. Возможно у Вас есть такой же пример для удаления данных? Или можете подсказать как оно всё должно выглядеть?

        • У меня готового примера нет, но вы можете посмотреть его на официальном сайте http://trirand.com/blog/jqgrid/jqgrid.html (Live Data Manipulation -> Delete row).

          В нём показан код подключения кнопки

          $("#dedata").click(function(){
          var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow');
          if( gr != null )
          jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
          else
          alert("Please Select Row to delete!");
          });

          На оф. сайте также предлагают использовать один php скрипт для операций изменения и удаления строк.

          editurl:»someurl.php»

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

          if ($_POST['oper'] === 'del') {
          //удаляем запись
          }

          Но вы можете использовать и отдельный скрипты для операции удаления записи. Пример — http://jsfiddle.net/dumbguy5689/9ueDL/6/

          И ещё несколько советов общего характера 🙂

          1) Я очень рекомендую вам посмотреть на библиотеку PDO (http://php.net/manual/en/book.pdo.php) для работы с БД. Сэкономите массу времени в будущем. Есть более «продвинутые» решения, но они требуют больше времени на изучение.

          2) По мере развития вашего приложения использование отдельных php скриптов будет становиться всё менее удобным (это очень мягко сказано). Но есть хорошие архитектурное решение — MVC паттерн. Так или иначе его используют большинство современных фреймворков. Также почитайте документацию к Yii фреймворку. У вас безусловно уйдёт какое-то время на изучение, но оно окупится.

        • MaryAnn

          Может, аналогично к примеру поиска данных, сделать удаление:
          }).navGrid('#pager',{view:false,edit:false,add:false,del:false},
          {}, // default settings for edit
          {}, // default settings for add
          {reloadAfterSubmit:true,jqModal:true}, // delete
          {} // search options
          // view parameters
          );
          Ето в комментах прочла на http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
          И в php скрипте в saverow.php(полностью согласна с Вами, Владимир, по поводу использования одного php скрипта)проверить oper(откуда он и что значит)
          if ($_POST['oper'] === 'del') {
          while($data_row=mysql_fetch_array($show_data_result)) {
          $del=»del».$data_row['id'];
          if(($post_delete_undef)) {
          if(isset($_POST[$del])) { $delquery=»update progress_teacher_mark set deleted=1 where progress_teacher_mark.id=».$data_row['id']; mysql_query($delquery);
          }
          }
          }
          и параметры удаления строки?
          Библиотеку PDO к сожалению сейчас не могу использовать, так как проект уже создан(довольно немаленький), а я лишь реконструирую его части и не могу задевать всю структуру, но совет, очень хороший, следующей раз попробую использовать ёё. Ну и приступаю к чтению документации к Yii фреймворку))

        • В этот раз я не совсем понял вопрос. Вы спрашивали откуда берется параметр oper и параметры удаления строки? Эти параметры отправляет jqGrid. Вы можете увидеть их с помощью firebug или инструментов вебмастера в Google Chrome (вкладка network).

        • MaryAnn

          с этим разобралась более-менее, в index.php написала
          $(«#dedata»).click(function(){
          var del = jQuery(«#list»).jqGrid('getGridParam','selrow');
          if( del != null ) jQuery(«#list»).jqGrid('delGridRow',del,{reloadAfterSubmit:true});
          else alert(«Please? select the row!»);
          });
          здесь не проскакивают никакие ошибки(согласно Firebug), хотя не работает.
          Пробовала и:
          }).navGrid{'#pager',{view:false,edit:false,add:false,del:true,search:false},
          {}, // default settings for edit
          {}, // default settings for add
          {closeOnEscape:true, closeAfterDel:true}, // delete instead that del:false we need this
          {} // search options
          // view parameters
          );
          но и здесь не работает(в Firebug ошибка Uncaught TypeError: Object # has no method 'jqm' ), что это значит, почему, что с ним делать???
          а в saverow.php так как вы уже казали:
          if ($value_oper==del)
          {
          $stm=»update progress_teacher_mark set deleted=1 where id='».$_POST['id'].»'»;
          $stm_s=mysql_query( $stm ) or die(«Couldn’t execute query.».mysql_error());
          echo json_encode($id);
          }
          но не работает, что это значит?

        • Код выглядит правильно, но точно сказать не могу. У вас есть возможность открыть доступ к приложению через интернет?

        • MaryAnn

          К сожалению, есть доступ только к сетевому ресурсу, а я работаю сейчас на локальной копии через Denwer, но Вы можете зайти через Team Viewer…? это будет намого быстрее и для понимания, а то я так долго разясняю в чем дело)) вот мой скайп maryanka_sone4ko))

        • 1) Не нужно давать доступ всем под ряд через Team Viewer. Это не безопасно.

          2) Для того, чтобы найти ошибку нужно научиться разбивать код на части и тестировать каждую отдельно. В данном случае речь идет о JS интерфейсе и вы можете перенести его в jsFiddle. Пример — http://jsfiddle.net/amorris/yNw3C/

        • MaryAnn

          ага,но сделав по примеру(http://jsfiddle.net/amorris/yN…) у меня не выводит нужную таблицу, возможно еще нужно как то подключить БД, но это не разумно открывать доступ к БД(опираясь на ваш совет),и должно было бы выводить хотя бы название столбцов таблицы, даже если данные не загружаются, не правда ли?? а не выводит нечего(( я нашла что этот метод 'jqm' используется только в файле jqMaodal.js,возможно здесь корень проблемы? а в Firebug идет ссылка на файл Jquery.js, в нём нет метода 'jqm', может здесь чего то и не хватает?

        • MaryAnn

          ага,но сделав по примеру(http://jsfiddle.net/amorris/yN…) у меня не выводит нужную таблицу, возможно еще нужно как то подключить БД, но это не разумно открывать доступ к БД(опираясь на ваш совет),и должно было бы выводить хотя бы название столбцов таблицы, даже если данные не загружаются, не правда ли?? а не выводит нечего(( я нашла что этот метод 'jqm' используется только в файле jqMaodal.js,возможно здесь корень проблемы? а в Firebug идет ссылка на файл Jquery.js, в нём нет метода 'jqm', может здесь чего то и не хватает?

        • Guest

          ага,но сделав по примеру(http://jsfiddle.net/amorris/yN…) у меня не выводит нужную таблицу, возможно еще нужно как то подключить БД, но это не разумно открывать доступ к БД(опираясь на ваш совет),и должно было бы выводить хотя бы название столбцов таблицы, даже если данные не загружаются, не правда ли?? а не выводит нечего(( я нашла что этот метод 'jqm' используется только в файле jqMaodal.js,возможно здесь корень проблемы? а в Firebug идет ссылка на файл Jquery.js, в нём нет метода 'jqm', может здесь чего то и не хватает?

        • MaryAnn

          ага,но сделав по примеру(http://jsfiddle.net/amorris/yN… у меня не выводит нужную таблицу, возможно еще нужно как то подключить БД, но это не разумно открывать доступ к БД(опираясь на ваш совет),и должно было бы выводить хотя бы название столбцов таблицы, даже если данные не загружаются, не правда ли?? а не выводит нечего(( я нашла что этот метод 'jqm' используется только в файле jqMaodal.js,возможно здесь корень проблемы? а в Firebug идет ссылка на файл Jquery.js, в нём нет метода 'jqm', может здесь чего то и не хватает?

        • Очень похоже, что у вас используется одновременно несколько плагинов для jQuery и некоторые из них не загружаются (или не правильно подключаются). Если конкретно, jqModal.js. Такое сообщение об ошибке в большинстве случаев означает, что вы пытаетесь вызвать метод плагина, который не подключен.
          Попробуйте отключить все плагины кроме jqGrid и убрать код, который их использует, а затем подключайте по одному.

        • MaryAnn

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

        • Мне сложно дать Вам конкретные советы потому что я не могу тестировать Ваш код. Поэтому я всё-таки повторю мой совет. Разбейте код на части, настройте каждую отдельно. Практически все варианты использования jqGrid есть на официальном сайте, т.е. Вы можете взять за основу их код. После того, как всё будет работать, объединяйте куски.

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

        • MaryAnn

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

        • MaryAnn

          Сори, то не публиковался ответ, то 4 раза одно и то же(((

  • Kirill

    Пожалуйста, помогите разобраться. Есть скрипт, обрабатывающий отправленные данные при добавлении новых данных, он находится в editurl. Трудность заключается в следующем: сервер отправляет ответ в виде обычного текста. Каким образом я могу его принять и обработать? Возможно ли вообще принять и обработать текст в чистом виде без XML или JSON формата в плагине jqGrid?

    Спасибо.

    • Да, возможно.

      Сначала инициализируйте jqGrid с пустым массивом данных.

      var grid = $('#myGrid');
      grid.jqGrid({
      data: [],
      datatype: «local»,
      colModel: [ …

      Затем отправьте с помощью jQuery ajax запрос на получение данных в текстовом формате.

      В обработчике ajax запроса вам нужно будет преобразовать полученные данные в массив javascript.

      После этого с помощью функции addRowData передайте эти данные jqGrid.

  • Ирина

    Владимир, а как Вы сделали редактирование по двойному клику?

    • В параметрах столбцов в colModel нужно указать editable:true

      colModel :[

      ,{… editable:true, edittype:»text»}
      ….
      ],

      • Ирина

        Я скачала с этого сайта http://www.trirand.com , но по умолчанию редактирование стоит по одному клику. Как сделать по двойному клику?

        • Прошу прощения, я не правильно понял вопрос.
          В первом листинге в этой статье посмотрите строки 22-28. В них устанавливается обработчик события ondblClickRow. И в этом обработчике вызывается метод editRow.

        • Ирина

          Спасибо Владимир все получилось. Подскажите пожалуйста как прикрутить к таблице datepicker.

        • Есть готовый пример.

        • Ирина

          Владимир спасибо за пример) Я вот только не пойму где скрипт этот брать

        • Это компонент jQuery UI — http://jqueryui.com/download/

        • Ирина

          Владимир спасибо большое! Владимир может подскажите у меня в БД mysql есть поле god_vidachi в нем лежит дата в формате TEXT такого вида «22.02.1985 14:11:44» как мне перевести ее в DATETIME и что бы дата осталась такого же формата «22.02.1985 14:11:44», как и раньше. Это поле не использовалось, теперь появилась необходимость, проблема возникает
          при сортировке. Подскажите как решить эту проблему?

        • Я не уверен, что предлагаю самый оптимальный вариант, но сам делал бы так:

          1) добавляем новое поле с форматом DATETIME;

          2) создаём скрипт, который пройдет по всем строкам, переконвертирует дату и сохранит ее в новом поле. Переконвертировать дату можно так

          $newFormat = DateTime::createFromFormat('d.m.Y h:m:s', $oldFormat)->format('d.m.Y h:m:s');

          3) проверяем результаты копирования и если все правильно, удаляем старое поле;

          4) если необходимо, переименовываем новое поле.

  • Евгений

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

  • genrih v

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

  • Иван

    при выборе edittype:»select» мы выбираем различные значение. Сама строчка создается без проблем, однако если мы нажимаем редактировать строку, то edittype:»select» дефолтом отображает самое первое значение. Таким образом приходится при любом редактировании перепроверять строку.

    • Не могли бы Вы выложить Ваш код на jsfiddle или аналогичный сервис? Так было бы проще решить проблему.

    • Дело в том, что в примере на оф. сайте http://trirand.com/blog/jqgrid/jqgrid.html (Row Editing (new) -> Input types) при редактировании значений в полях типа select значение установлено правильно.

  • Иван

    Главная:Главная;Первая:Первая;Вторая:Вторая;
    вот если если select такого типа, то при создании и выборе «первая» и сохранении все нормально. если же выбьрать редактирование то всегда будет попадать на первую запись, видимо какая-то беда c html тегами.

  • Иван

    Главная:Главная;Первая:Первая;Вторая:Вторая. Если создавать и выбрать первая то все нормально создается, если же редактировать уже созданную запись. то по умолчанию значение перескакивает на первую запись.

  • Ivan

    Главная:Главная;Первая:Первая;Вторая:Вторая. Если создавать и выбрать первая то все нормально создается, если же редактировать уже созданную запись. то по умолчанию значение перескакивает на первую запись.

  • koks

    12