jQuery Grid Plugin — «продвинутое» решение для создания таблиц

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

jqgrid

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

jQuery Grid Plugin имеет смысл использовать если нужно работать с большими таблицами. Дело в том, что плагин существенно упрощает разбивку данных на страницы. Т.е. автоматически создается панель с кнопками перелистывания страниц, а новые данные подгружаются с помощью AJAX. Кроме того, плагин имеет кучу дополнительных функций и несколько тем оформления.

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

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

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

Кстати, есть демонстрационная страница со множеством интересных примеров.

Сформулируем задачу.

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

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

Создаём файлы index.html (наша страничка) и getdata.php (серверный скрипт, который будет получать данные из БД и отправлять их браузеру).

Скачиваем библиотеку jQuery.

В результате должна получиться следующая структура папок.

index.html
getdata.php
jquery-1.3.1.min.js
jquery.jqGrid.js
/js
	...
/themes
	...

Рассмотрим структуру нашей страницы.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Использование jqGrid</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" /> </head> <body> <table id="list" class="scroll"></table> <div id="pager" class="scroll" style="text-align:center;"></div> <script type="text/javascript" src="jquery-1.3.1.min.js"></script> <script type="text/javascript" src="jquery.jqGrid.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ 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'} ,{name:'fname', index:'fname', width:90} ,{name:'lname', index:'lname', width:80, align:'right'} ], pager: jQuery('#pager'), rowNum:5, rowList:[5,10,30], sortname: 'id', sortorder: "asc", viewrecords: true, imgpath: 'themes/basic/images', caption: 'Данные пользователей' }); }); </script> </body> </html>

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

В теле страницы мы создаем таблицу (строка 14) и панель навигации (тег div, строка 15). На данный момент они пустые, их содержимое будет создано плагином.

После этого, мы подключаем библиотеку jQuery, jQuery Grid Plugin и создаём скрипт с настройками (строки 20-41). На них мы остановимся отдельно.

url – адрес скрипта, формирующего массив с данными;
datatype – формат данных;
mtype – метод отправки запроса;
colNames – названия столбцов (используются в качестве заголовков таблицы);
colModel – параметры полей (значения и количество этих элементов должны соответствовать формату передаваемых данных);
pager – id блока в котором будет размещена навигационная панель;
rowNum – количество строк в таблице;
rowList – этот массив используется для настройки выпадающего списка, который пользователь может использовать для изменения количества строк в таблице;
sortname – поле, которое по-умолчанию используется для сортировки;
sortorder – порядок сортировки (в данном случае возрастающий);
viewrecords – указывает, нужно ли показывать в панели управления общее количество записей;
imgpath – размещение папки с изображениями;
caption – заголовок таблицы.

Настройки достаточно простые, но очень важно их внимательно заполнить.

Теперь создаем базу данных и таблицу в ней (вы можете импортировать файл users.sql из архива с этим примером, ссылка внизу страницы).

После этого займемся PHP скриптом.

<?php
try {
    //читаем параметры
    $curPage = $_POST['page'];
    $rowsPerPage = $_POST['rows'];
    $sortingField = $_POST['sidx'];
    $sortingOrder = $_POST['sord'];
    
    //подключаемся к базе
    $dbh = new PDO('mysql:host=localhost;dbname=name', 'user', 'pass');
    //указываем, мы хотим использовать utf8
    $dbh->exec('SET CHARACTER SET utf8');

    //определяем количество записей в таблице
    $rows = $dbh->query('SELECT COUNT(id) AS count FROM users');
    $totalRows = $rows->fetch(PDO::FETCH_ASSOC);

    $firstRowIndex = $curPage * $rowsPerPage - $rowsPerPage;
    //получаем список пользователей из базы
    $res = $dbh->query('SELECT * FROM users 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['surname'], $row['fname'], $row['lname']);
        $i++;
    }
    echo json_encode($response);
}
catch (PDOException $e) {
    echo 'Database error: '.$e->getMessage();
}

// end of getdata.php

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

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

Обратите внимание. Скрипт максимально упрощен, т.е. убрана проверку параметров, которые передает плагин. В реальном приложении так делать НЕЛЬЗЯ.

Затем мы формируем объект с данными ($response).

В параметрах этого объекта нужно передать:

— номер текущей страницы ($response->page);
— количество страниц ($response->total);
— общее количество записей ($response->records);
— сами данные ($response->rows).

Формат, в котором нужно сохранять данные, можно изменить. Для этого придется изменить настройки плагина (в документации раздел Retrieving Data -> JSON Data).

В конце скрипта мы преобразуем данные в JSON формат и отправляем браузеру (строка 33).

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

Source

Заключение

Этот пример не раскрывает и 10% возможностей плагина. Например, вы можете встраивать inline редакторы для строк, изменять оформление, использовать другие форматы данных (тот же xml), создавать вложенные таблицы и т.п.

В общем, очень удобный инструмент.

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

Интересно почитать

Хрупкая красота программного кода:
10 приемов, способных ее разрушить

  • qnikst

    тут было достаточно интересное описание различных плагинов таблиц: link

    может быть окажется полезным.

    • Спасибо, действительно интересный список.

  • qnikst

    тут было достаточно интересное описание различных плагинов таблиц: link

    может быть окажется полезным.

    • Спасибо, действительно интересный список.

  • Scratch

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

    • qnikst

      В extjs есть так же двойная лицензия. Если Ваш код opensource, то extjs бесплатно, если не то сколько 50-100$? А заработок обычно появляется именно в закрытых приложениях.
      В принципе extjs очень хороший фреймворк, но гораздо жирнее, чем нужный набор из jquery.ui, который тоже удобно использовать.

      • Где можно скачать норм урок и бесплатную версию? У них ппц стал запутанный сайт

        • Бесплатную версию можно скачать здесь — https://www.sencha.com/legal/GPL/
          По документации ничего подсказать не могу, т.к. этой библиотекой не пользуюсь, но одним уроком вы точно не обойдётесь 🙂

        • Спасибо. Наверное отложу в долгий ящик и обойдусь стандартными штуками! А то учить фреймворк…

  • Scratch

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

    • qnikst

      В extjs есть так же двойная лицензия. Если Ваш код opensource, то extjs бесплатно, если не то сколько 50-100$? А заработок обычно появляется именно в закрытых приложениях.
      В принципе extjs очень хороший фреймворк, но гораздо жирнее, чем нужный набор из jquery.ui, который тоже удобно использовать.

  • С ExtJS я не работал, демонстрационные странички производят впечатление.
    Цены, кстати, начинаются от 259$ на одного разработчика.
    Не уверен, что есть смысл их платить, ведь аналогичные возможности можно получить и с помощью той же jQuery + плагины.

  • С ExtJS я не работал, демонстрационные странички производят впечатление.
    Цены, кстати, начинаются от 259$ на одного разработчика.
    Не уверен, что есть смысл их платить, ведь аналогичные возможности можно получить и с помощью той же jQuery + плагины.

  • Alex

    Жалко что в примере не расмотрели jqgrid где можно редактировать поля. Помоему это один из самых главных моментов. Я попробовал зделать у меня не получилось с редактированием.

    • Постараюсь в ближайшее время написать на эту тему пост с примером.

  • Alex

    Жалко что в примере не расмотрели jqgrid где можно редактировать поля. Помоему это один из самых главных моментов. Я попробовал зделать у меня не получилось с редактированием.

    • Постараюсь в ближайшее время написать на эту тему пост с примером.

  • Alex

    Пасибо былобы очень хорошо.

  • Alex

    Пасибо былобы очень хорошо.

  • Ogromneishee Vam spasibo! Davno iskal

  • Ogromneishee Vam spasibo! Davno iskal

  • >>>
    Прежде всего, обратите внимание на строки 13 и 14, в которых мы подключили файлы со стилями. В этом примере используется тема basic, но, естественно, её можно изменить.
    >>>
    В теле страницы мы создаем таблицу (строка 17) и панель навигации (тег div, строка 18). На данный момент они пустые, их содержимое будет создано плагином.

    У тебя номера строк не совпадают вроде?

  • >>>
    Прежде всего, обратите внимание на строки 13 и 14, в которых мы подключили файлы со стилями. В этом примере используется тема basic, но, естественно, её можно изменить.
    >>>
    В теле страницы мы создаем таблицу (строка 17) и панель навигации (тег div, строка 18). На данный момент они пустые, их содержимое будет создано плагином.

    У тебя номера строк не совпадают вроде?

  • Что за объект $response? ты его не с того начал юзать в 23 строке (php-бекенда)

  • Что за объект $response? ты его не с того начал юзать в 23 строке (php-бекенда)

  • Спасибо!
    Действительно, нумерация у меня сместилась на 3 строки.

    >> $response

    Наверное, нужно было его явно создать… Но в любом случае работает 🙂

    • Работает только если E_WARNING отключить, я для этого создал класс с пустыми соответствующими свойствами…

      • Признаю, недосмотрел. Понадеялся на оф. документацию.

  • Спасибо!
    Действительно, нумерация у меня сместилась на 3 строки.

    >> $response

    Наверное, нужно было его явно создать… Но в любом случае работает 🙂

    • Работает только если E_WARNING отключить, я для этого создал класс с пустыми соответствующими свойствами…

      • Признаю, недосмотрел. Понадеялся на оф. документацию.

  • Yuriy

    Спасибо за статью, очень познавательно =) Но вот у меня вопрос по теории. Когда я использую формат xml, то при загрузке страницы грид сам выбирает начальные данные и заполняет таблицу. Но когда я попробовал с json, то грид при первой загрузке остается пустым, и чтобы его заполнить, нужно нажимать на заголовки таблицы, чтобы отправить запрос и данные выбрались по нужным критериям. Как мне сделать, чтобы грид сам изначально заполнялся. В оф. мануале, для xml посылается соответствующий header(), а для json нет. Но я пробовал отсылать и для json, но не сработало. Что я не учитываю?

    • Вы использовали
      mime-type:application/json ?
      Вообще странно. В этом примере я использовал именно json и никаких проблем с загрузкой нет. Причем, я даже не устанавливал header. Просто при создании таблицы указывается
      datatype: 'json'
      (строка 23, первый листинг). При этом выполняется один запрос на получение данных.

  • Yuriy

    Спасибо за статью, очень познавательно =) Но вот у меня вопрос по теории. Когда я использую формат xml, то при загрузке страницы грид сам выбирает начальные данные и заполняет таблицу. Но когда я попробовал с json, то грид при первой загрузке остается пустым, и чтобы его заполнить, нужно нажимать на заголовки таблицы, чтобы отправить запрос и данные выбрались по нужным критериям. Как мне сделать, чтобы грид сам изначально заполнялся. В оф. мануале, для xml посылается соответствующий header(), а для json нет. Но я пробовал отсылать и для json, но не сработало. Что я не учитываю?

    • Вы использовали
      mime-type:application/json ?
      Вообще странно. В этом примере я использовал именно json и никаких проблем с загрузкой нет. Причем, я даже не устанавливал header. Просто при создании таблицы указывается
      datatype: 'json'
      (строка 23, первый листинг). При этом выполняется один запрос на получение данных.

  • Яков

    Скажите пожалуйста, а как изменить размер отображаемой таблицы? Хочу, чтобы она влезала в мой блок размером 950х105.
    Попробовал в qrid.css прописать
    table.scroll {
    width:950px;
    height:105px;
    }
    по ширине таблица не изменилась совсем, по высоте — растянулась шапка таблицы, а данные как отображались в 7 строк, так и отображаются:( Помогите пожалуйста

    • Ширина столбцов прописана в js коде. Первый листинг строки 27-30, там есть параметр width — это ширина в пикселах (задается для каждого столбца отдельно).

      • Яков

        разобрался. Вы меня не так поняли. Я хотел поменять не ширину столбцов, а размер таблицы в целом. Меняется это добавлением в js код параметров
        width:919,
        height:230,
        между 22-39 строками.

        • Ясно. Хотя у меня таблица растягивалась при изменении ширины столбцов (правда я не указывал ширину в CSS стилях).

        • Dima

          На самом деле все свойства настройки грида находятся в grid.base.js. А параметры присваиваются в index.html

  • Яков

    Скажите пожалуйста, а как изменить размер отображаемой таблицы? Хочу, чтобы она влезала в мой блок размером 950х105.
    Попробовал в qrid.css прописать
    table.scroll {
    width:950px;
    height:105px;
    }
    по ширине таблица не изменилась совсем, по высоте — растянулась шапка таблицы, а данные как отображались в 7 строк, так и отображаются:( Помогите пожалуйста

    • Ширина столбцов прописана в js коде. Первый листинг строки 27-30, там есть параметр width — это ширина в пикселах (задается для каждого столбца отдельно).

      • Яков

        разобрался. Вы меня не так поняли. Я хотел поменять не ширину столбцов, а размер таблицы в целом. Меняется это добавлением в js код параметров
        width:919,
        height:230,
        между 22-39 строками.

        • Ясно. Хотя у меня таблица растягивалась при изменении ширины столбцов (правда я не указывал ширину в CSS стилях).

  • Алексей

    Скажите пожалуйста, в jqgrid 3.4 было так: выставляешь ширину столбцам и таблице, если суммарная ширина столбцов больше чем у всей таблицы, то появлялся скрол и табличную часть можно было прокрутить влево, вправо. А в версии 3.5 в этом случае скрол не появляется, а ширина столбцов пропорционально уменьшается, чтобы они влезли в табличку. В моей таблице 25 столбцов и это очень не удобно. Не могу никак найти, какие параметры отвечают за это в версии 3.5

    • Попробуйте использовать CSS стили. Например, так как в примере Якова
      table.scroll {
      width:950px;
      height:105px;
      }

      • Сергей Начинающий

        Скажите. А вот диномическое изменение количества полей поддерживает jqgrid ? Я имею ввиду следующее — мне необходимо выводить данные по датам. Каждое поле это дата. И даты выводятся за произвольный период. То есть таблица должна или сужаться или расширятся

        • Я сам не пробовал, но на stackoverflow есть обсуждение этой темы.

          Вкратце, варианты такие:
          1) Каждый раз заново создавать всю таблицу.
          2) Загрузить максимально возможное количество полей и прятать/показывать их по мере необходимости.

    • Максим

      Алексей вы побороли эту проблему?

  • Алексей

    Скажите пожалуйста, в jqgrid 3.4 было так: выставляешь ширину столбцам и таблице, если суммарная ширина столбцов больше чем у всей таблицы, то появлялся скрол и табличную часть можно было прокрутить влево, вправо. А в версии 3.5 в этом случае скрол не появляется, а ширина столбцов пропорционально уменьшается, чтобы они влезли в табличку. В моей таблице 25 столбцов и это очень не удобно. Не могу никак найти, какие параметры отвечают за это в версии 3.5

    • Попробуйте использовать CSS стили. Например, так как в примере Якова
      table.scroll {
      width:950px;
      height:105px;
      }

      • Сергей Начинающий

        Скажите. А вот диномическое изменение количества полей поддерживает jqgrid ? Я имею ввиду следующее — мне необходимо выводить данные по датам. Каждое поле это дата. И даты выводятся за произвольный период. То есть таблица должна или сужаться или расширятся

        • Я сам не пробовал, но на stackoverflow есть обсуждение этой темы.

          Вкратце, варианты такие:
          1) Каждый раз заново создавать всю таблицу.
          2) Загрузить максимально возможное количество полей и прятать/показывать их по мере необходимости.

    • Максим

      Алексей вы побороли эту проблему?

  • Pingback: jqGrid – создание дополнительных кнопок()

  • Игорь

    Скорее всего вопрос будет признан дурацким, и всё же:
    скачал демо, создал базу, изменил dbdata.php а таблица открывается пустая. Где ипотека?

  • Игорь

    Скорее всего вопрос будет признан дурацким, и всё же:
    скачал демо, создал базу, изменил dbdata.php а таблица открывается пустая. Где ипотека?

  • Игорь

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

    • Копать, конечно, нужно официальную документацию. Но можно и здесь посмотреть 😉

  • Игорь

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

    • Копать, конечно, нужно официальную документацию. Но можно и здесь посмотреть 😉

  • Виталий

    Здравствуйте!
    Я в JS и PHP новичек и не совсем понимаю что да как…
    вот предстала перед мной задача. выводить данные в таблице с возможностью сортировки и фильтрации, покопался. Решил что jqGrid довольно красивый и относительно простой способ решения.
    Вобщем из примеров на http://trirand.com/jqgrid/jqgrid.html я выбрал Integrated Search Toolbar (из 3.5 версии)
    Могли бы вы мне помочь как новичку в установке этой таблички, а заполнение я уж как нибудь сам.)
    Заранее спасибо!

    • Дмитрий

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

      $response->rows[$i]['cell']=array(
      $row['id'],
      iconv("windows-1251", "UTF-8", $row['code']),
      iconv("windows-1251", "UTF-8", $row['name']),
      $row['col']);

      у вас используется другой метод можно по подробнее:

      2. Немогу никак настроить фильтр для таблицы, не подскажете как реализовать?

      • 1) У меня везде используется UTF-8.
        2) А в качестве фильтра поиск подойдет? Если да, то есть пример.

  • Виталий

    Здравствуйте!
    Я в JS и PHP новичек и не совсем понимаю что да как…
    вот предстала перед мной задача. выводить данные в таблице с возможностью сортировки и фильтрации, покопался. Решил что jqGrid довольно красивый и относительно простой способ решения.
    Вобщем из примеров на http://trirand.com/jqgrid/jqgrid.html я выбрал Integrated Search Toolbar (из 3.5 версии)
    Могли бы вы мне помочь как новичку в установке этой таблички, а заполнение я уж как нибудь сам.)
    Заранее спасибо!

    • Дмитрий

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

      $response->rows[$i]['cell']=array(
      $row['id'],
      iconv("windows-1251", "UTF-8", $row['code']),
      iconv("windows-1251", "UTF-8", $row['name']),
      $row['col']);

      у вас используется другой метод можно по подробнее:

      2. Немогу никак настроить фильтр для таблицы, не подскажете как реализовать?

      • 1) У меня везде используется UTF-8.
        2) А в качестве фильтра поиск подойдет? Если да, то есть пример.

  • Дмитрий

    еще вопрос немного не потеме в версии до 3.5 использовал форматирование:

    priority_format = function(el,cellval) {
    $(el).html('' + cellval + '');//выводит запись с спец.форматом

    };

    а в новой версии постоянно выводит:
    undefined
    каким то другим образом передаются данные?

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

  • Дмитрий

    еще вопрос немного не потеме в версии до 3.5 использовал форматирование:

    priority_format = function(el,cellval) {
    $(el).html('' + cellval + '');//выводит запись с спец.форматом

    };

    а в новой версии постоянно выводит:
    undefined
    каким то другим образом передаются данные?

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

  • Дмитрий

    и еще можно ли фильтр в ненужных столбцах не отображать (пример встроеного в таблицу фильтра)

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

      пример встроеного в таблицу фильтра

      Где его посмотреть?

      • Дмитрий

        с форматом я определися в новой версии форматирование идет так:

        priority_format = function(cellval) {
        rerurn cellval;//выводит запись с спец.форматом

        };

  • Дмитрий

    и еще можно ли фильтр в ненужных столбцах не отображать (пример встроеного в таблицу фильтра)

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

      пример встроеного в таблицу фильтра

      Где его посмотреть?

      • Дмитрий

        с форматом я определися в новой версии форматирование идет так:

        priority_format = function(cellval) {
        rerurn cellval;//выводит запись с спец.форматом

        };

  • Евгений

    Здравствуйте! Хочу интегрировать jdGrid в свой форум, сделаный на phpBB. После вставки примера(index.html) внутрь темплейта вижу, что jdGrid работает- выводит Caption и названия полей, но самих данных нет. InternetExplorer 8.0 говорит, что в скрипте jdGrid.min.js требуется наличие «)» в строке 1447. Без phpBB всё работает замечательно. Может это какая-то несовместимость с движком phpBB? Принципиальная или нет? Можно ли этот нюанс поймать Firebug_ом? (я не пойму как это сделать). В Firefox -е ситуация аналогичная IE.

    • Дмитрий

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

  • Евгений

    Здравствуйте! Хочу интегрировать jdGrid в свой форум, сделаный на phpBB. После вставки примера(index.html) внутрь темплейта вижу, что jdGrid работает- выводит Caption и названия полей, но самих данных нет. InternetExplorer 8.0 говорит, что в скрипте jdGrid.min.js требуется наличие «)» в строке 1447. Без phpBB всё работает замечательно. Может это какая-то несовместимость с движком phpBB? Принципиальная или нет? Можно ли этот нюанс поймать Firebug_ом? (я не пойму как это сделать). В Firefox -е ситуация аналогичная IE.

    • Дмитрий

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

  • Евгений

    все js-скрипты, кроме
    jquery-1.3.2.min.js
    locale-ru.js
    jqGrid.min.js
    убрал.
    Ситуация не поменялась.

    • Дмитрий

      вы используете json данные или utf?

      • Евгений

        данные в формате json. Собственно я работаю пока только с вашим примером — выборка данных из базы MySQL.
        Есть подозрение, что jqGrid обрабатывает тэги в фигурных скобках {} также как и phpBB. И так как phpBB раньше начинает обрабатывать темплейт, может он каким-то образом портит код locale-ru.js иили jqGrid.min.js?

        • Странно, phpBB не должен менять код JS скриптов.
          Попробуйте сделать так. Сохраните скрипты jsGrid.min.js, которые вы получаете (с форумом и без), а после этого сравните их, например, с помощью WinMerge. Если расхождения есть, вы сразу их увидите.

        • Евгений

          я вставил код из файлов locale-ru.js и jqGrid.min.js непосредственно в темплейт, чтобы можно было посмотреть потом исходный код страницы в браузере. Так вот оказалось, что в нём действительно отсутствуют элементы типа «{…}» и код скриптов портится.
          Т.е. phpBB принимает их за свои тэги и как-то обрабатывает.
          Пока не знаю как обойти эту проблему.

        • Евгений

          удалось избежать порчи кода скриптов. Т.е. все три скрипта jquery-1.3.2.min.js, locale-ru.js, jqGrid.min.js доходят до браузера без изменений. Появляется таблица с заголовками, но без данных и слово «Загрузка». На этом всё.
          FireBug показывает ошибку «cm is undefined». В нём же видно, что getdata.php возвращает выборку данных из базы.
          Но почему они не отображаются? как можно это понять?

        • Раз данные дошли, то проблема в функции, которая их обрабатывает (т.е. вставляет строки в таблицу). Вам нужно найти где находится переменная cm (кликнуть по ссылке в firebug) и сравнить эту часть кода с оригиналом. Похоже phpBB все-таки что-то подправляет.

          А зачем вы вставляете js файлы в темплейт. Подключите их с помощью тега script.

        • Роман

          Владимир, здравствйте! Подскажите пожалуйста, вот у меня есть таблица которая читается с базы выведенная при помощи цикла do-while, и напротив каждой строки есть например кнопка удалить. В этом же файле у меня есть скрипт по которому я обращаюсь к элементам, то есть принимаю кнопку по которой я нажал! Но почему то на клик по любой строке таблицы, скрипт принимает только одну верхнюю строку которая идёт в базе! Как мне в скрипте получить id той строки по которой я кликнул?

        • Уточню, jqGrid вы не используете? Формируете обычную html таблицу?

          В этом случае вам проще всего будет при формировании таблицы установить атрибут id для тега tr. Например,
          <tr id=»row_1">…</tr>
          <tr id=»row_2">…</tr>
          и т.д.

          Затем, в обработчике клика по кнопке нужно:
          1) найти строку в которой находится кнопка. При использовании jQuery код будет выглядеть примерно так:
          var id = $(this).parent().parent().attr('id').substring(4);
          2) передать этот id при отправке запроса на удаление.

  • Евгений

    все js-скрипты, кроме
    jquery-1.3.2.min.js
    locale-ru.js
    jqGrid.min.js
    убрал.
    Ситуация не поменялась.

    • Дмитрий

      вы используете json данные или utf?

      • Евгений

        данные в формате json. Собственно я работаю пока только с вашим примером — выборка данных из базы MySQL.
        Есть подозрение, что jqGrid обрабатывает тэги в фигурных скобках {} также как и phpBB. И так как phpBB раньше начинает обрабатывать темплейт, может он каким-то образом портит код locale-ru.js и\или jqGrid.min.js?

        • Странно, phpBB не должен менять код JS скриптов.
          Попробуйте сделать так. Сохраните скрипты jsGrid.min.js, которые вы получаете (с форумом и без), а после этого сравните их, например, с помощью WinMerge. Если расхождения есть, вы сразу их увидите.

        • Евгений

          я вставил код из файлов locale-ru.js и jqGrid.min.js непосредственно в темплейт, чтобы можно было посмотреть потом исходный код страницы в браузере. Так вот оказалось, что в нём действительно отсутствуют элементы типа «{…}» и код скриптов портится.
          Т.е. phpBB принимает их за свои тэги и как-то обрабатывает.
          Пока не знаю как обойти эту проблему.

        • Евгений

          удалось избежать порчи кода скриптов. Т.е. все три скрипта jquery-1.3.2.min.js, locale-ru.js, jqGrid.min.js доходят до браузера без изменений. Появляется таблица с заголовками, но без данных и слово «Загрузка». На этом всё.
          FireBug показывает ошибку «cm is undefined». В нём же видно, что getdata.php возвращает выборку данных из базы.
          Но почему они не отображаются? как можно это понять?

        • Раз данные дошли, то проблема в функции, которая их обрабатывает (т.е. вставляет строки в таблицу). Вам нужно найти где находится переменная cm (кликнуть по ссылке в firebug) и сравнить эту часть кода с оригиналом. Похоже phpBB все-таки что-то подправляет.

          А зачем вы вставляете js файлы в темплейт. Подключите их с помощью тега script.

  • Игорь

    Подскажите пожалуйста,как передать по кнопке id строки в php код.
    loadComplete: function(){
    var ids = jQuery(«#list»).getDataIDs();
    for(var i=0;i<ids.length;i++){
    var cl = ids[i];
    be = «<a href='add_tel.php' rel=»nofollow»>Добавить</a>»;
    jQuery(«#list»).setRowData(ids[i],{act:be}) } },
    Вот кусок скрипта,который выводит кнопку.Надо чтобы в add_tel.php передавалось значение id.

    • Игорь

      Разобрался:be = «<a href='add_tel.php?id_group=»+cl+»' rel=»nofollow»gt;Добавить</a>»;

  • Игорь

    Подскажите пожалуйста,как передать по кнопке id строки в php код.

    loadComplete: function(){
    			var ids = jQuery("#list").getDataIDs(); 
    			for(var i=0;i<ids.length;i++){ 
    			var cl = ids[i]; 
    			be = "<a href='add_tel.php' rel="nofollow">Добавить</a>"; 
    			jQuery("#list").setRowData(ids[i],{act:be}) } }, 

    Вот кусок скрипта,который выводит кнопку.Надо чтобы в add_tel.php передавалось значение id.

    • Игорь

      Разобрался:be = «<a href='add_tel.php?id_group=»+cl+»' rel=»nofollow»gt;Добавить</a>»;

  • Игорь

    Разобрался!Все очень просто!
    for(var i=0;i<ids.length;i++){
    var cl = ids[i];
    be = "<a href='add_tel.php?id_group="+cl+"

  • Игорь

    Разобрался!Все очень просто!
    for(var i=0;i<ids.length;i++){
    var cl = ids[i];
    be = "<a href='add_tel.php?id_group="+cl+"

  • Игорь

    Люди кто нибудь делал в таблице ссылки на модальные окна?Я проверил все варианты модальных окон,в таблице тупо переходит на другую страницу, на этой же странице сделал такую же ссылку: работает нормально. Подскажите пожалуйста как такое осуществить?

  • Игорь

    Люди кто нибудь делал в таблице ссылки на модальные окна?Я проверил все варианты модальных окон,в таблице тупо переходит на другую страницу, на этой же странице сделал такую же ссылку: работает нормально. Подскажите пожалуйста как такое осуществить?

  • Дмитрий

    я сделал так сформатировал строку с сылкой


    projectlink = function(el,cellval,opts) {
    var proect_id = opts.rowId;//берём значение id из обьекта opts

    $(el).html("" + cellval + "");

    };

    кароче здесь берется идишник из строки и формируется ссылка на вызов функции ProectForm(id) с передачей ей идишника
    сама функция выводит на экран окно и подгрузжает с сервера инфу для этого ийдишника
    это для таблицы 3.4

  • Дмитрий

    я сделал так сформатировал строку с сылкой


    projectlink = function(el,cellval,opts) {
    var proect_id = opts.rowId;//берём значение id из обьекта opts

    $(el).html("" + cellval + "");

    };

    кароче здесь берется идишник из строки и формируется ссылка на вызов функции ProectForm(id) с передачей ей идишника
    сама функция выводит на экран окно и подгрузжает с сервера инфу для этого ийдишника
    это для таблицы 3.4

  • Игорь

    А можете мне прислать скрипты именно таблицы со ссылками и что бы появлялось окошко при клике. Буду очень благодарен! Мыло: daboog87@mail.ru

  • Игорь

    А можете мне прислать скрипты именно таблицы со ссылками и что бы появлялось окошко при клике. Буду очень благодарен! Мыло: daboog87@mail.ru

  • Яков

    Здравствуйте. Скажите пожалуйста, а возможно ли менять colModel для каждой строки.
    colModel :[

    {name:'mov',
    index:'mov',
    width:120,
    editable:true,
    edittype:»select»,
    editoptions:{value:1:получено;2:отправлено}},

    ],
    хотелось бы для каждой отдельной строки менять вот эту часть
    1:получено;2:отправлено

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

    var editsost = «1:получено;2:отправлено»;
    function postsost(){

    editsost = «1:получено;2:отправлено;3:возврат»;
    }
    function vivod(){
    var mygrid = jQuery(«#list»).jqGrid({

    colModel :[

    editoptions:{value:editsost}}
    ],
    onSelectRow: function(){
    postsost();}

    })}

    смотрю firebug'ом — значение переменной editsost меняется, но при редактировании все равно только два значения 1:получено;2:отправлено

    • Вы как-то хитро указали параметры 😉
      Должно быть так
      editoptions:{value:»Yes:No»}
      или
      editoptions:{value:»FE:FedEx;TN:TNT»}
      (это примеры с оф.сайта).
      После value строка берется в кавычки.

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

  • Яков

    Здравствуйте. Скажите пожалуйста, а возможно ли менять colModel для каждой строки.
    colModel :[

    {name:'mov',
    index:'mov',
    width:120,
    editable:true,
    edittype:»select»,
    editoptions:{value:1:получено;2:отправлено}},

    ],
    хотелось бы для каждой отдельной строки менять вот эту часть
    1:получено;2:отправлено

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

    var editsost = «1:получено;2:отправлено»;
    function postsost(){

    editsost = «1:получено;2:отправлено;3:возврат»;
    }
    function vivod(){
    var mygrid = jQuery(«#list»).jqGrid({

    colModel :[

    editoptions:{value:editsost}}
    ],
    onSelectRow: function(){
    postsost();}

    })}

    смотрю firebug'ом — значение переменной editsost меняется, но при редактировании все равно только два значения 1:получено;2:отправлено

    • Вы как-то хитро указали параметры 😉
      Должно быть так
      editoptions:{value:»Yes:No»}
      или
      editoptions:{value:»FE:FedEx;TN:TNT»}
      (это примеры с оф.сайта).
      После value строка берется в кавычки.

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

  • Дмитрий

    тоже эта тема волновала кстати

  • Дмитрий

    тоже эта тема волновала кстати

  • Игорь

    Скажите пожалуйста как можно передать POST или GET переменную в таблицу.У меня передается параметр через ?group=$row[group] тоесть передается через get.Как мне добавить столбец с group, если все значения берутся из getdata?
    Проблема в том что в saverow нужно передавать значение переменной $_GET[group].

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

      Вообще-то я не понял зачем вам данные из $_GET (понял, что вам их нужно вставить в AJAX запрос), поэтому возможно существует более подходящее решение.

    • Подробнее об этом событии можно почитать здесь.

  • Игорь

    Скажите пожалуйста как можно передать POST или GET переменную в таблицу.У меня передается параметр через ?group=$row[group] тоесть передается через get.Как мне добавить столбец с group, если все значения берутся из getdata?
    Проблема в том что в saverow нужно передавать значение переменной $_GET[group].

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

      Вообще-то я не понял зачем вам данные из $_GET (понял, что вам их нужно вставить в AJAX запрос), поэтому возможно существует более подходящее решение.

    • Подробнее об этом событии можно почитать здесь.

  • Игорь

    Я не совсем понял как сформировать массив GET в beforeSubmitCell. Мне надо просто передать одно значение GET на сервер.Вы бы не могли написать строчку скрипта, который формирует отправку на сервер значение переменных не из таблицы, если это возможно…Заранее благодарю!

  • Игорь

    Я не совсем понял как сформировать массив GET в beforeSubmitCell. Мне надо просто передать одно значение GET на сервер.Вы бы не могли написать строчку скрипта, который формирует отправку на сервер значение переменных не из таблицы, если это возможно…Заранее благодарю!

  • Дмитрий

    $.ajax({
    type: «GET»,
    url: «test.js»,
    dataType: «script»
    });

    http://visualjquery.com/

  • Дмитрий

    $.ajax({
    type: «GET»,
    url: «test.js»,
    dataType: «script»
    });

    http://visualjquery.com/

  • Дмитрий

    интересно можно ли с сервера принять дополнительные json данные, во время формирования таблицы

    • Попробуйте использовать обработчик afterSaveCell.

      Как пишут в справке «This is the ideal place to change other content.» 🙂

  • Дмитрий

    интересно можно ли с сервера принять дополнительные json данные, во время формирования таблицы

    • Попробуйте использовать обработчик afterSaveCell.

      Как пишут в справке «This is the ideal place to change other content.» 🙂

  • Я имел ввиду немного другой вариант.
    1) С помощью следующей функции получаем значение нужного параметра
    function get_url_param(name)
    {
    name = name.replace(/[[]/,»\[«).replace(/[]]/,»\]»);
    var regexS = «[\?&]»+name+»=([^&#]*)»;
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null ) return «»;
    else return results[1];
    }
    (name — имя параметра из GET запроса)

    2) в beforeSubmitCell должен быть примерно следующий код
    var val=get_url_param('my_param');
    return {'my_param':val};

  • Я имел ввиду немного другой вариант.
    1) С помощью следующей функции получаем значение нужного параметра

    function get_url_param(name)
    { 
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
    var regexS = "[\\?&]"+name+"=([^&#]*)"; 
    var regex = new RegExp( regexS ); 
    var results = regex.exec( window.location.href ); 
    if( results == null )    return ""; 
    else return results[1];
    }

    (name — имя параметра из GET запроса)

    2) в beforeSubmitCell должен быть примерно следующий код

    var val=get_url_param('my_param');
    return {'my_param':val};
  • Игорь

    Решил свою проблему только по иному:
    jQuery(«#list»).delGridRow(gr,{delData:{id_group:»»})
    Параметр delData передает новый параметр серверу,вот я и назначил $_GET параметр и благополучно передал)
    Спасибо всем кто помогал!

  • Игорь

    Решил свою проблему только по иному:
    jQuery(«#list»).delGridRow(gr,{delData:{id_group:»»})
    Параметр delData передает новый параметр серверу,вот я и назначил $_GET параметр и благополучно передал)
    Спасибо всем кто помогал!

  • Игорь

    Еще вопрос.
    Мне надо вывести чекбоксы, которые будут отмечены в зависимости от того что выведет сервер, тоесть допустим если сервер выводит 1,то чекбокс отмечен, если 0, то нет.
    И что бы их можно было редактировать.
    Подскажите пожалуйста как это можно осуществить

  • Игорь

    Еще вопрос.
    Мне надо вывести чекбоксы, которые будут отмечены в зависимости от того что выведет сервер, тоесть допустим если сервер выводит 1,то чекбокс отмечен, если 0, то нет.
    И что бы их можно было редактировать.
    Подскажите пожалуйста как это можно осуществить

  • Дмитрий

    //функция пользователського форматирования, используется перед инициальзации таблицы
    checkbox = function(cellval) {
    if (cellval==1){
    rerurn »;//вкл
    }
    else{
    rerurn »;//выкл
    }
    };

    с сервера передается 1 или 0
    в colModel задаешь пользовательское форматирование:
    formatter:comment_checkbox

  • Дмитрий

    //функция пользователського форматирования, используется перед инициальзации таблицы
    checkbox = function(cellval) {
    if (cellval==1){
    rerurn »;//вкл
    }
    else{
    rerurn »;//выкл
    }
    };

    с сервера передается 1 или 0
    в colModel задаешь пользовательское форматирование:
    formatter:comment_checkbox

  • Игорь

    Не работает, даже не выводит чекбоксы!
    Что должен передавать сервер что бы вывести их?
    Кстати rerurn это я так понимаю return, но что он должен возвращать?

  • Игорь

    Не работает, даже не выводит чекбоксы!
    Что должен передавать сервер что бы вывести их?
    Кстати rerurn это я так понимаю return, но что он должен возвращать?

  • Дмитрий

    сервер должне передвать данные 1 или 0 в это поле

    это форматирование для gris 3.5

    если у вас 3.4 там другой метод форматирования

    • Дмитрий

      return »;//это при 0
      return »;//это при 1
      забыл добавить

  • Дмитрий

    сервер должне передвать данные 1 или 0 в это поле

    это форматирование для gris 3.5

    если у вас 3.4 там другой метод форматирования

    • Дмитрий

      return »;//это при 0
      return »;//это при 1
      забыл добавить

  • Дмитрий


    return '';//при 0 и

    return '';//при 1

    извиняюсь за ошибку

  • Дмитрий


    return '';//при 0 и

    return '';//при 1

    извиняюсь за ошибку

  • Дмитрий

    непроходит html тег чекбокса 🙁

    • Я прошу прощения, WP автоматически режет все теги, кроме запрещенных, и мне не хочется отключать эту функцию (все-таки это один из лучших вариантов защиты от XSS).

      Если не сложно, замените < на &lt; в вашем коде.

  • Дмитрий

    непроходит html тег чекбокса 🙁

    • Я прошу прощения, WP автоматически режет все теги, кроме запрещенных, и мне не хочется отключать эту функцию (все-таки это один из лучших вариантов защиты от XSS).

      Если не сложно, замените < на &lt; в вашем коде.

  • Игорь

    loadComplete:
    function(){
    var ids = jQuery(«#list»).getDataIDs();

    for(var i=0;i<ids.length;i++)
    {
    var cl = ids[i];
    var group = jQuery("#list").getCell(cl,'id_group');

    if (group == 0){
    be = "»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    else {
    be = «»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    var active = jQuery(«#list»).getCell(cl,'active');
    alert (active);
    }

    }

  • Игорь

    loadComplete:
    function(){
    var ids = jQuery(«#list»).getDataIDs();

    for(var i=0;i<ids.length;i++)
    {
    var cl = ids[i];
    var group = jQuery("#list").getCell(cl,'id_group');

    if (group == 0){
    be = "»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    else {
    be = «»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    var active = jQuery(«#list»).getCell(cl,'active');
    alert (active);
    }

    }

  • Игорь

    for(var i=0;i<ids.length;i++)
    {
    var cl = ids[i];
    var group = jQuery("#list").getCell(cl,'id_group');

    if (group == 0){
    be = "»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    else {
    be = «»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    var active = jQuery(«#list»).getCell(cl,'active');
    alert (active);
    }

  • Игорь

    for(var i=0;i<ids.length;i++)
    {
    var cl = ids[i];
    var group = jQuery("#list").getCell(cl,'id_group');

    if (group == 0){
    be = "»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    else {
    be = «»;
    jQuery(«#list»).setRowData(ids[i],{active:be})
    }
    var active = jQuery(«#list»).getCell(cl,'active');
    alert (active);
    }

  • Игорь

    При таком скрипте выводит чекбоксы как положено,тоесть если сервер передал 1 , то чекед.Правда вся загвоздка в том что при редактировании значения чекбокса не изменяется!тоесть сохранить на сервер нужное значение нельзя.
    а formatter:comment_checkbox у меня почему то не работает!

    • При редактировании значение столбца в котором находится чекбокс вообще не отправляется на сервер или отправляется старое?

  • Игорь

    При таком скрипте выводит чекбоксы как положено,тоесть если сервер передал 1 , то чекед.Правда вся загвоздка в том что при редактировании значения чекбокса не изменяется!тоесть сохранить на сервер нужное значение нельзя.
    а formatter:comment_checkbox у меня почему то не работает!

    • При редактировании значение столбца в котором находится чекбокс вообще не отправляется на сервер или отправляется старое?

  • Игорь

    Мне надо не при редактировании, а как при удалении.Чтоб не высвечивались окна, а просто передались значения!

  • Игорь

    Мне надо не при редактировании, а как при удалении.Чтоб не высвечивались окна, а просто передались значения!

  • Игорь

    afterInsertRow: function(rowid, aData){ switch (aData.name) { case 'Client 1': jQuery(«#ainsrow»).setCell(rowid,'total',»,{color:'green'}); break; case 'Client 2': jQuery(«#ainsrow»).setCell(rowid,'total',»,{color:'red'}); break; case 'Client 3': jQuery(«#ainsrow»).setCell(rowid,'total',»,{color:'blue'}); break; } }
    Пример из демо,не работает!Подскажите может надо подключать еще что нибудь?Или в чем причина?

    • Какой именно пример из демо вы смотрите?

  • Игорь

    afterInsertRow: function(rowid, aData){ switch (aData.name) { case 'Client 1': jQuery(«#ainsrow»).setCell(rowid,'total',»,{color:'green'}); break; case 'Client 2': jQuery(«#ainsrow»).setCell(rowid,'total',»,{color:'red'}); break; case 'Client 3': jQuery(«#ainsrow»).setCell(rowid,'total',»,{color:'blue'}); break; } }
    Пример из демо,не работает!Подскажите может надо подключать еще что нибудь?Или в чем причина?

    • Какой именно пример из демо вы смотрите?

  • Игорь

    After Insert Row event, мне надо выводить данные одного столбца разным цветом

    • Прежде всего, проверьте (с помощью firebug), что у вас загружены теже скрипты, что и на странице с примером.
      Убедитесь, что вы правильно указали id вашей таблицы (если он отличается от примера).

      Если не получится, пришлите мне ваши скрипты, я посмотрю в чем проблема.

  • Игорь

    After Insert Row event, мне надо выводить данные одного столбца разным цветом

    • Прежде всего, проверьте (с помощью firebug), что у вас загружены теже скрипты, что и на странице с примером.
      Убедитесь, что вы правильно указали id вашей таблицы (если он отличается от примера).

      Если не получится, пришлите мне ваши скрипты, я посмотрю в чем проблема.

  • al908

    Спасибо большое за статью. Не подскажете по примеру (я с jquery и php очень на «Вы»): я положил файлы index.html и getdata.php в одну папку. Запускаю index.html, получаю пустую таблицу (шапка таблицы есть). Мне кажется, что он в файл getdata.php вообще не попадает, т.к. в начале скрипта я добавил функцию для записи в лог сообщения, что он дошел до этого файла, но лог пустой, т.е. php-файл не вызывается.Почему так может происходить?

    • Так может происходить когда скрипт пытается обратиться к несуществующему файлу, например, если не правильно указан путь к нему.
      Проще всего это проверить с помощью firebug (это плагин к firefox). В консоли этого плагина отображаются все ajax запросы. Просто посмотрите куда отправляется запрос.

      • al908

        хм, если в поисковой строке яндекса вводить что-то, то консоль показывает запросы. А на моей странице с таблицей консоль вообще чистая. Напишу текст index, может там нет половины нужного текста?

        Использование jqGrid

        jQuery(document).ready(function(){

        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'}

        ,{name:'fname', index:'fname', width:90}

        ,{name:'lname', index:'lname', width:80, align:'right'}

        ],

        pager: jQuery('#pager'),

        rowNum:5,

        rowList:[5,10,30],

        sortname: 'id',

        sortorder: "asc",

        viewrecords: true,

        imgpath: 'themes/basic/images',

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

        });
        });

        • al908

          Оно заработало по непонятной причине 🙂
          А можно сказать пример ответа, который получается в строке
          echo json_encode($response);
          ?

        • Можно

          {«page»:»1",»total»:1,»records»:»1",»rows»:[{«id»:»1",»cell»:[«1",»u0418u0432u0430u043du043eu0432",»u0418u0432u0430u043d»,»u0418u0432u0430u043du043eu0432u0438u0447"]}]}

        • Dmitry

          У меня ответ php выдает вот в таком виде:
          {«page»:»1",»total»:1,»records»:»1",»rows»:[{«id»:»1",»cell»:[«1",»Dima»,»Vasa»,»Petia»]}]}
          Все остальное из примера, но табличка пустая.
          В чем может быть проблема?

        • Dmitry

          Помогло удаление строки

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

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

        • al908

          Большое спасибо, в таблице появился Иван Иваныч 🙂 Буду разбираться, как оно работает 🙂

  • al908

    Спасибо большое за статью. Не подскажете по примеру (я с jquery и php очень на «Вы»): я положил файлы index.html и getdata.php в одну папку. Запускаю index.html, получаю пустую таблицу (шапка таблицы есть). Мне кажется, что он в файл getdata.php вообще не попадает, т.к. в начале скрипта я добавил функцию для записи в лог сообщения, что он дошел до этого файла, но лог пустой, т.е. php-файл не вызывается.Почему так может происходить?

    • Так может происходить когда скрипт пытается обратиться к несуществующему файлу, например, если не правильно указан путь к нему.
      Проще всего это проверить с помощью firebug (это плагин к firefox). В консоли этого плагина отображаются все ajax запросы. Просто посмотрите куда отправляется запрос.

      • al908

        хм, если в поисковой строке яндекса вводить что-то, то консоль показывает запросы. А на моей странице с таблицей консоль вообще чистая. Напишу текст index, может там нет половины нужного текста?

        Использование jqGrid

        jQuery(document).ready(function(){

        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'}

        ,{name:'fname', index:'fname', width:90}

        ,{name:'lname', index:'lname', width:80, align:'right'}

        ],

        pager: jQuery('#pager'),

        rowNum:5,

        rowList:[5,10,30],

        sortname: 'id',

        sortorder: "asc",

        viewrecords: true,

        imgpath: 'themes/basic/images',

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

        });
        });

        • al908

          Оно заработало по непонятной причине 🙂
          А можно сказать пример ответа, который получается в строке
          echo json_encode($response);
          ?

        • Можно

          {«page»:»1",»total»:1,»records»:»1",»rows»:[{«id»:»1",»cell»:[«1",»\u0418\u0432\u0430\u043d\u043e\u0432",»\u0418\u0432\u0430\u043d»,»\u0418\u0432\u0430\u043d\u043e\u0432\u0438\u0447"]}]}

        • al908

          Большое спасибо, в таблице появился Иван Иваныч 🙂 Буду разбираться, как оно работает 🙂

  • Дмитрий

    firebug рулит, согласен.

  • Дмитрий

    firebug рулит, согласен.

  • Дмитрий

    использую в выводе данных html разметку, данные в бд в cp1251
    при передачи данных использую json, и каждую строку кодирую так:

    $responce->rows[$i]['cell']=array(
    $row['event_id'],
    $row['event_object_id'],
    $row['data_time'],
    $this ->decoder($row['fio']),
    $this ->decoder($row['object_name']),
    );
    $i++;

    а декодер
    decoder($name){
    return iconv(«windows-1251», «UTF-8», $name);
    }

    тут решил устанваливать кодировку перед запросом:
    mysql_query («set sql_mode='utf8'»);

    таблица стала грузится намного быстрее (естественно )
    зато когда встречаются данные c HTML разметкой то таблица ругается.

    Помогите решить проблему. Скорее всего не проходят символы

    • Вариантов два:
      1) вернуться к предыдущему решению (с decoder)
      2) определить какие именно символы создают проблемы и либо убрать их, либо заменить чем-то.

      В любом случае какая-то обработка текста будет нужна.

  • Дмитрий

    использую в выводе данных html разметку, данные в бд в cp1251
    при передачи данных использую json, и каждую строку кодирую так:

    $responce->rows[$i]['cell']=array(
    $row['event_id'],
    $row['event_object_id'],
    $row['data_time'],
    $this ->decoder($row['fio']),
    $this ->decoder($row['object_name']),
    );
    $i++;

    а декодер
    decoder($name){
    return iconv(«windows-1251», «UTF-8», $name);
    }

    тут решил устанваливать кодировку перед запросом:
    mysql_query («set sql_mode='utf8'»);

    таблица стала грузится намного быстрее (естественно )
    зато когда встречаются данные c HTML разметкой то таблица ругается.

    Помогите решить проблему. Скорее всего не проходят символы

    • Вариантов два:
      1) вернуться к предыдущему решению (с decoder)
      2) определить какие именно символы создают проблемы и либо убрать их, либо заменить чем-то.

      В любом случае какая-то обработка текста будет нужна.

  • Игорь

    href=»css/toolbar.css»
    href=»css/jquery-ui-1.7.2.custom.css»
    href=»css/ui.jqgrid.css»
    src=»js/jquery-1.3.2.min.js»
    src=»js/grid.locale-ru.js
    src=»js/jquery.jqGrid.min.js»
    src=»js/jquery.dropDown.pack.js
    Я загружаю вот эти скрипты,чего то не хватает?

    • Вроде все подключено. Единственный момент — какой jquery.jqGrid.min.js вы используете? На странице загрузки можно указать перечень компонентов, которые в него входят. Попробуйте загрузить полную версию.

  • Игорь

    href=»css/toolbar.css»
    href=»css/jquery-ui-1.7.2.custom.css»
    href=»css/ui.jqgrid.css»
    src=»js/jquery-1.3.2.min.js»
    src=»js/grid.locale-ru.js
    src=»js/jquery.jqGrid.min.js»
    src=»js/jquery.dropDown.pack.js
    Я загружаю вот эти скрипты,чего то не хватает?

    • Вроде все подключено. Единственный момент — какой jquery.jqGrid.min.js вы используете? На странице загрузки можно указать перечень компонентов, которые в него входят. Попробуйте загрузить полную версию.

  • Дмитрий

    Возникла проблема при изменении структуры файлов, все скрипты из папки js он не хочет искать нигде кроме текущей папки. Как это можно решить?

    • Откройте jquery.jQgrid.js
      В самом начале этого файла устанавливается переменная pathtojsfiles (указывает на папку js) и массив с необходимыми модулями modules.
      Путь, указанный в pathtojsfiles объединяется с именем файла, указанным в modules, т.е. вы можете задать любое размещение файлов.

  • Дмитрий

    Возникла проблема при изменении структуры файлов, все скрипты из папки js он не хочет искать нигде кроме текущей папки. Как это можно решить?

    • Откройте jquery.jQgrid.js
      В самом начале этого файла устанавливается переменная pathtojsfiles (указывает на папку js) и массив с необходимыми модулями modules.
      Путь, указанный в pathtojsfiles объединяется с именем файла, указанным в modules, т.е. вы можете задать любое размещение файлов.

  • Игорь

    А можно ли изменять форму редактирования?
    ТОесть добавлять чекбоксы например,возле каждого поля ввода?Грид это позволяет?

  • Игорь

    А можно ли изменять форму редактирования?
    ТОесть добавлять чекбоксы например,возле каждого поля ввода?Грид это позволяет?

  • Игорь

    jQuery(«#filter»).filterGrid is not a function
    Выпадает такая ошибка!Хочу сделать фильтр,может надо подключать еще что то?Скирпт:
    jQuery(«#filter»).filterGrid(«list»,
    {
    gridModel:true,
    gridNames:true,
    formtype:»vertical»,
    enableSearch:true,
    enableClear:false,
    autosearch: false,
    } );

    • Должен быть подключен grid.custom.js
      или, если вы выбирали какие компоненты скачивать при загрузке, то должен был быть отмечен Custom checkbox.

  • Игорь

    jQuery(«#filter»).filterGrid is not a function
    Выпадает такая ошибка!Хочу сделать фильтр,может надо подключать еще что то?Скирпт:
    jQuery(«#filter»).filterGrid(«list»,
    {
    gridModel:true,
    gridNames:true,
    formtype:»vertical»,
    enableSearch:true,
    enableClear:false,
    autosearch: false,
    } );

    • Должен быть подключен grid.custom.js
      или, если вы выбирали какие компоненты скачивать при загрузке, то должен был быть отмечен Custom checkbox.

  • Егор

    подскажите, как можно изменить ширину формы редактирования/добавления записи?
    В примерах только
    jQuery(«#grid_id»).editGridRow(rowid, {width:666});
    но хочется изменить её ширину для всех вызовов, а не только для этого.

    • Да, можно. При создании таблицы указываете ширину каждой колонки
      colModel :[
      {name:'id', index:'id', width:30}….

      • Егор

        но если ширина колонки в colModel будет 450?
        она тогда просто не поместится в ширину формы редактирования, которая по умолчанию равна 300.
        вот я собственно и не могу найти как изменить ширину формы независимо от того как вызывается эта форма.
        ondblClickRow: function(rowid){
        var gr = jQuery(«#listobj»).getGridParam('selrow');
        if(gr != null) jQuery(«#listobj»).editGridRow(gr,{width:666});
        else alert(«Выберите строку»);
        }
        таким образом ширина формы изменяется (666), но только на ondblClickRow. а на остальные остаётся умолчательной (300).

        • Я не пойму. Вам нужно создать новую форму с заданной шириной или изменять ширину формы в процессе работы?

          Можно попробовать изменить CSS стиль формы.

      • Егор

        нужно чтоб у конкретного грида форма редактирования/добавления была шире чем обычно.

        • Т.е. форма такая же как и в примере jqGrid Demos — Live Data Manipulation — Add row?
          Там есть параметр width, с помощью которого можно указать ширину.

      • Егор

        так вобщем-то я в комменте выше пример оттуда и взял. и рассказал почему у меня к нему вопросы.
        т.е. если бы там в примере .navGrid был бы и на нём кнопку add нажали бы, то форма диалога была бы стандартная, а не такая какую мы в функции прописали.

        • Я прошу прощения, сейчас перечитал ленту комментариев и стал лучше понимать суть проблемы 🙂

          А если просто указать стили?
          .editmodaddgrid {
          width: 500px;
          }

          Еще вариант — попробовать использовать событие beforeShowForm.
          В качестве параметра передается id формы.

      • Егор

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

        .navGrid('#pagerobj',{},
        {recreateForm:true,height:290,width:400}, // edit
        {recreateForm:true,height:290,width:400}, // add

  • Егор

    подскажите, как можно изменить ширину формы редактирования/добавления записи?
    В примерах только
    jQuery(«#grid_id»).editGridRow(rowid, {width:666});
    но хочется изменить её ширину для всех вызовов, а не только для этого.

    • Да, можно. При создании таблицы указываете ширину каждой колонки
      colModel :[
      {name:'id', index:'id', width:30}….

      • Егор

        но если ширина колонки в colModel будет 450?
        она тогда просто не поместится в ширину формы редактирования, которая по умолчанию равна 300.
        вот я собственно и не могу найти как изменить ширину формы независимо от того как вызывается эта форма.
        ondblClickRow: function(rowid){
        var gr = jQuery(«#listobj»).getGridParam('selrow');
        if(gr != null) jQuery(«#listobj»).editGridRow(gr,{width:666});
        else alert(«Выберите строку»);
        }
        таким образом ширина формы изменяется (666), но только на ondblClickRow. а на остальные остаётся умолчательной (300).

        • Я не пойму. Вам нужно создать новую форму с заданной шириной или изменять ширину формы в процессе работы?

          Можно попробовать изменить CSS стиль формы.

      • Егор

        нужно чтоб у конкретного грида форма редактирования/добавления была шире чем обычно.

        • Т.е. форма такая же как и в примере jqGrid Demos — Live Data Manipulation — Add row?
          Там есть параметр width, с помощью которого можно указать ширину.

      • Егор

        так вобщем-то я в комменте выше пример оттуда и взял. и рассказал почему у меня к нему вопросы.
        т.е. если бы там в примере .navGrid был бы и на нём кнопку add нажали бы, то форма диалога была бы стандартная, а не такая какую мы в функции прописали.

        • Я прошу прощения, сейчас перечитал ленту комментариев и стал лучше понимать суть проблемы 🙂

          А если просто указать стили?
          .editmodaddgrid {
          width: 500px;
          }

          Еще вариант — попробовать использовать событие beforeShowForm.
          В качестве параметра передается id формы.

      • Егор

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

        .navGrid('#pagerobj',{},
        {recreateForm:true,height:290,width:400}, // edit
        {recreateForm:true,height:290,width:400}, // add

  • Игорь

    ТАк grid.custom.js это для создания фильтра или чекбоксов на форме?

  • Игорь

    ТАк grid.custom.js это для создания фильтра или чекбоксов на форме?

  • Игорь

    Спасибо,фильтр заработал,но тут есть небольшие недостатки.
    в версии 3.5 есть метод mygrid.filterToolbar();
    там привязывается строка фильтра к каждому столбцу, хотелось бы его использовать, но он все равно не работает!Может надо для него еще че нибудь подключать?

    • По-идее, нет, если Custom module вы уже подключили. Я бы попробовал скачать самую полную версию плагина.

      Может проблема с параметрами? Какие конкретно ошибки возникают?

  • Игорь

    Спасибо,фильтр заработал,но тут есть небольшие недостатки.
    в версии 3.5 есть метод mygrid.filterToolbar();
    там привязывается строка фильтра к каждому столбцу, хотелось бы его использовать, но он все равно не работает!Может надо для него еще че нибудь подключать?

    • По-идее, нет, если Custom module вы уже подключили. Я бы попробовал скачать самую полную версию плагина.

      Может проблема с параметрами? Какие конкретно ошибки возникают?

  • Игорь

    mygrid is not defined
    [Break on this error] mygrid.filterToolbar();rn
    Вот такая ошибка(В демках написано что это новый метод в версии 3.5.Я скачал вроде новую версию со всеми дополнениями 3.5.3.Сделал все как в демке но выскакивает ошибка.

    • У вас не определен mygrid, а не filterToolbar.
      Посмотрите где вы создаете этот объект, похоже просто на механическую ошибку.

  • Игорь

    mygrid is not defined
    [Break on this error] mygrid.filterToolbar();\r\n
    Вот такая ошибка(В демках написано что это новый метод в версии 3.5.Я скачал вроде новую версию со всеми дополнениями 3.5.3.Сделал все как в демке но выскакивает ошибка.

    • У вас не определен mygrid, а не filterToolbar.
      Посмотрите где вы создаете этот объект, похоже просто на механическую ошибку.

  • Игорь

    Владимир а вы когда нибудь делали асинхронные запросы ajax в jqgrid?Например есть таблица с мультиселект,надо при выделении какой нибудь строки передавать запрос на сервер,который создает табличку в базе данных с id строки.

    • Дмитрий

      я сделал так

      onSelectRow{//событие на выделение строки — возможно неточно
      var s = jQuery('#treegrid').getGridParam('selarrrow');//получаем ид выделенных строк

      //отправляем массив на сервер,
      $.ajax({
      type: «POST»,
      url: «server.php?s=»+s,
      dataType: «script»
      });
      }

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

      • событие на выделение строки

        Может быть. Если вы несколько раз меняете значение в мультиселекте, не снимая выделения со строки, то событие возникает?

        Как вариант, можно посмотреть firebug'ом какие классы у этих мультиселектов и повесить отправку запроса непосредственно на них (событие change).

  • Игорь

    Владимир а вы когда нибудь делали асинхронные запросы ajax в jqgrid?Например есть таблица с мультиселект,надо при выделении какой нибудь строки передавать запрос на сервер,который создает табличку в базе данных с id строки.

    • Дмитрий

      я сделал так

      onSelectRow{//событие на выделение строки — возможно неточно
      var s = jQuery('#treegrid').getGridParam('selarrrow');//получаем ид выделенных строк

      //отправляем массив на сервер,
      $.ajax({
      type: «POST»,
      url: «server.php?s=»+s,
      dataType: «script»
      });
      }

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

      • событие на выделение строки

        Может быть. Если вы несколько раз меняете значение в мультиселекте, не снимая выделения со строки, то событие возникает?

        Как вариант, можно посмотреть firebug'ом какие классы у этих мультиселектов и повесить отправку запроса непосредственно на них (событие change).

  • Дмитрий

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

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

  • Дмитрий

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

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

  • Игорь

    Или же например отправить запрос на удаление и с помощью afterSubmit вывести модальное окно с именами удаленных данных.ТАк мне кажется проще…
    Подскажите пожалуйста как можно вывести такое окно?

  • Игорь

    Или же например отправить запрос на удаление и с помощью afterSubmit вывести модальное окно с именами удаленных данных.ТАк мне кажется проще…
    Подскажите пожалуйста как можно вывести такое окно?

  • al908

    А не подскажете, как можно сделать автообновление таблицы?

    • Уточните, пожалуйста, что вы имеете ввиду.
      Допустим, посетитель просматривает таблицу, а она вдруг начинает скакать вверх/вниз из-за того, что кто-то добавляет/удаляет записи из базы. Что должно происходить если пользователь редактирует ячейку?

      А вообще, если эти вопросы вы решили, то можно сделать так.

      1) Удалить данные из таблицы с помощью метода clearGridData.
      2) Заполнить таблицу новыми данными, например, с помощью addJSONData.
      3) Создать таймер и с его помощью запускать эти методы.

      Подробнее о методах читайте здесь.

      • al908

        Спасибо за ссылку, сделал обновление так: jQuery(«#list»).trigger(«reloadGrid»);
        🙂

        • Мне нужно было самому внимательнее эту страницу почитать 🙂

  • al908

    А не подскажете, как можно сделать автообновление таблицы?

    • Уточните, пожалуйста, что вы имеете ввиду.
      Допустим, посетитель просматривает таблицу, а она вдруг начинает скакать вверх/вниз из-за того, что кто-то добавляет/удаляет записи из базы. Что должно происходить если пользователь редактирует ячейку?

      А вообще, если эти вопросы вы решили, то можно сделать так.

      1) Удалить данные из таблицы с помощью метода clearGridData.
      2) Заполнить таблицу новыми данными, например, с помощью addJSONData.
      3) Создать таймер и с его помощью запускать эти методы.

      Подробнее о методах читайте здесь.

      • al908

        Спасибо за ссылку, сделал обновление так: jQuery(«#list»).trigger(«reloadGrid»);
        🙂

        • Мне нужно было самому внимательнее эту страницу почитать 🙂

  • al908

    Владимир, подскажите, пожалуйста, как работает Summary Footer Row?
    Как я понял, к описанному Вами примеру в JS надо добавить
    footerrow : true,
    userDataOnFooter : true

    И в php-скрипте отправить что-то похожее на:
    $responce->userdata['name'] = 'Totals:';
    $responce->userdata['total'] = $total;

    Но никакой строки «итого» нет. Что нужно еще сделать?

  • al908

    Владимир, подскажите, пожалуйста, как работает Summary Footer Row?
    Как я понял, к описанному Вами примеру в JS надо добавить
    footerrow : true,
    userDataOnFooter : true

    И в php-скрипте отправить что-то похожее на:
    $responce->userdata['name'] = 'Totals:';
    $responce->userdata['total'] = $total;

    Но никакой строки «итого» нет. Что нужно еще сделать?

  • Я сам этой функцией не пользовался. Код на демо сайте нормально работает. И похоже все данные у вас заданы правильно (убедитесь, что индексы элементов массива (name, total) совпадают с названиями столбцов в colModel).
    Если есть желание, присылайте код, я попробую поэкспериментировать.

    • al908

      Если Вас не очень затруднит, то вот код:
      function grid(){
      setTimeout(grid,5000);
      jQuery("#list").trigger("reloadGrid");
      date1=encodeURIComponent(document.getElementById('date1').value); date2=encodeURIComponent(document.getElementById('date2').value);
      var lastSel;
      jQuery("#list").jqGrid({
      width:document.body.clientWidth-15,
      height:100,
      url:'getdata.php?date1='+date1+"&date2="+date2,
      datatype: 'json',
      mtype: 'GET',
      colNames:['№ ККМ', 'Чеков', 'Сумма'],
      colModel :[
      {name:'name', index:'name', width:30, align:'center'}
      ,{name:'chekov', index:'chekov', width:80, align:'center', editable:false, edittype:"text"}
      ,{name:'summa', index:'summa', width:90, align:'center', editable:false, edittype:"text",formatter: 'number'}
      ],
      pager: jQuery('#pager'),
      rowNum:5,
      rowList:[5,10,30],
      sortname: 'name',
      sortorder: "asc",
      viewrecords:"true",
      viewsortcols: "true",
      imgpath: 'themes/sand/images',
      userDataOnFooter : "true",
      footerrow : "true",
      caption: 'Кассы',

      ondblClickRow: function(id){
      if (id && id != lastSel) {
      jQuery("#list").restoreRow(lastSel);
      jQuery("#list").editRow(id, true);
      lastSel = id;
      }
      },
      editurl: 'saverow.php'
      });

      }

      И вот php часть

      ............
      $i=0;
      while($row = $res->fetch(PDO::FETCH_ASSOC)) {
      $response->rows[$i]['name']=$row['numkkm'];
      $response->rows[$i]['cell']=array(iconv('windows-1251','UTF-8',$row['name']),$row['chekov'],sprintf("%.2f",$row['summa']));
      $i++;
      }

      $responce->userdata['chekov'] = 'Totals:';
      $responce->userdata['summa'] = '5000';
      echo json_encode($response);

      }

      • Поэкспериментировать именно с вашим примером не получилось, т.к. базы с данными у меня нет, а создавать ее самому и заполнять под вашу таблицу — довольно нудное занятие 😉

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

        • al908

          Спасибо, в Вашем примере все работает отлично. Почему не работает у меня, я не понимаю, буду разбираться. О результатах отпишусь 🙂

        • ОК, хочу посоветовать. У меня быстрее всего получается найти ошибку сначала отключить все функции, а потом включать по одной до тех пор, пока не перестанет работать 😉

        • al908

          Ошибка оказалась в названии переменных — $response и $responce 🙁
          За пример еще раз спасибо — тут таблица интереснее, чем в первом варианте 🙂

  • Я сам этой функцией не пользовался. Код на демо сайте нормально работает. И похоже все данные у вас заданы правильно (убедитесь, что индексы элементов массива (name, total) совпадают с названиями столбцов в colModel).
    Если есть желание, присылайте код, я попробую поэкспериментировать.

    • al908

      Если Вас не очень затруднит, то вот код:
      function grid(){
      setTimeout(grid,5000);
      jQuery("#list").trigger("reloadGrid");
      date1=encodeURIComponent(document.getElementById('date1').value); date2=encodeURIComponent(document.getElementById('date2').value);
      var lastSel;
      jQuery("#list").jqGrid({
      width:document.body.clientWidth-15,
      height:100,
      url:'getdata.php?date1='+date1+"&date2="+date2,
      datatype: 'json',
      mtype: 'GET',
      colNames:['№ ККМ', 'Чеков', 'Сумма'],
      colModel :[
      {name:'name', index:'name', width:30, align:'center'}
      ,{name:'chekov', index:'chekov', width:80, align:'center', editable:false, edittype:"text"}
      ,{name:'summa', index:'summa', width:90, align:'center', editable:false, edittype:"text",formatter: 'number'}
      ],
      pager: jQuery('#pager'),
      rowNum:5,
      rowList:[5,10,30],
      sortname: 'name',
      sortorder: "asc",
      viewrecords:"true",
      viewsortcols: "true",
      imgpath: 'themes/sand/images',
      userDataOnFooter : "true",
      footerrow : "true",
      caption: 'Кассы',

      ondblClickRow: function(id){
      if (id && id != lastSel) {
      jQuery("#list").restoreRow(lastSel);
      jQuery("#list").editRow(id, true);
      lastSel = id;
      }
      },
      editurl: 'saverow.php'
      });

      }

      И вот php часть

      ............
      $i=0;
      while($row = $res->fetch(PDO::FETCH_ASSOC)) {
      $response->rows[$i]['name']=$row['numkkm'];
      $response->rows[$i]['cell']=array(iconv('windows-1251','UTF-8',$row['name']),$row['chekov'],sprintf("%.2f",$row['summa']));
      $i++;
      }

      $responce->userdata['chekov'] = 'Totals:';
      $responce->userdata['summa'] = '5000';
      echo json_encode($response);

      }

      • Поэкспериментировать именно с вашим примером не получилось, т.к. базы с данными у меня нет, а создавать ее самому и заполнять под вашу таблицу — довольно нудное занятие 😉

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

        • al908

          Спасибо, в Вашем примере все работает отлично. Почему не работает у меня, я не понимаю, буду разбираться. О результатах отпишусь 🙂

        • ОК, хочу посоветовать. У меня быстрее всего получается найти ошибку сначала отключить все функции, а потом включать по одной до тех пор, пока не перестанет работать 😉

        • al908

          Ошибка оказалась в названии переменных — $response и $responce 🙁
          За пример еще раз спасибо — тут таблица интереснее, чем в первом варианте 🙂

  • Дмитрий

    Здравствуйте у меня возникает ошибка Parse error: syntax error, unexpected T_STRING in C:Apache2htdocsjqgrid_foterrowindex.html on line 1 в вашем примере в файле index.html в строке
    Как избавиться от данной ошибке? Помогите пожалуйста.

    • Я могу предположить, что у вас в настройках сервера включена поддержка коротких тегов (short tags). Попробуйте просто убрать первую строку.

  • Дмитрий

    Здравствуйте у меня возникает ошибка Parse error: syntax error, unexpected T_STRING in C:\Apache2\htdocs\jqgrid_foterrow\index.html on line 1 в вашем примере в файле index.html в строке
    Как избавиться от данной ошибке? Помогите пожалуйста.

    • Я могу предположить, что у вас в настройках сервера включена поддержка коротких тегов (short tags). Попробуйте просто убрать первую строку.

  • Дмитрий

    Здрвствуйте у меня в гриде не выводяться данные из базы данных в вашем примере. Возникает синтаксическая ошибка в строке 10 символ 1468 в файле jQuery.jqGrid.min.js. Объясните пожайлуста как можно это исправить? Как вывести данные из базы данных в грид. Сейчас выводяться только названия полей таблица. Данные базе данных имеются. Код оригинальный, без изменений.

    • Напишите, пожалуйста, какая именно ошибка возникает.
      Лучше всего, если описние вы возьмете из firebug (это плагин к firefox).

  • Дмитрий

    Здрвствуйте у меня в гриде не выводяться данные из базы данных в вашем примере. Возникает синтаксическая ошибка в строке 10 символ 1468 в файле jQuery.jqGrid.min.js. Объясните пожайлуста как можно это исправить? Как вывести данные из базы данных в грид. Сейчас выводяться только названия полей таблица. Данные базе данных имеются. Код оригинальный, без изменений.

    • Напишите, пожалуйста, какая именно ошибка возникает.
      Лучше всего, если описние вы возьмете из firebug (это плагин к firefox).

  • Дмитрий

    есть функция у таблицы tableToGrid(«#mytable»);

    которая переводит html формирует query таблицу из html а есть обратная возможность?

    • Насколько я знаю, такой функции нет.
      Есть jqGridExport, но она экспортирует настройки таблицы без данных.
      Вообще плагин не содержит данных, он их только отображает. За подготовку данных отвечает серверная (php) часть.
      Т.е. проще отправить отдельный запрос серверу и написать функцию, которая сформирует таблицу с ними, чем пытаться вытянуть их из jqGrid. Хотя это тоже можно сделать, т.к. jqGrid создает обычную таблицу (вложенную в несколько div'ов) только с большим количеством JS обработчиков.

      • Дмитрий

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

  • Дмитрий

    есть функция у таблицы tableToGrid(«#mytable»);

    которая переводит html формирует query таблицу из html а есть обратная возможность?

    • Насколько я знаю, такой функции нет.
      Есть jqGridExport, но она экспортирует настройки таблицы без данных.
      Вообще плагин не содержит данных, он их только отображает. За подготовку данных отвечает серверная (php) часть.
      Т.е. проще отправить отдельный запрос серверу и написать функцию, которая сформирует таблицу с ними, чем пытаться вытянуть их из jqGrid. Хотя это тоже можно сделать, т.к. jqGrid создает обычную таблицу (вложенную в несколько div'ов) только с большим количеством JS обработчиков.

      • Дмитрий

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

  • dimmer

    Ребят, в чем проблема, не передаются параметры _GET, переходит просто на пустой getdata.php, причем переменные не пустые, проверил. Делал ка написано в примерах. Пример под названием Search Big Sets.

    jQuery("#list").jqGrid('setGridParam',{url:"getdata.php?name_mask="+name_mask+"&artist_mask="+artist_mask,page:1}).trigger("reloadGrid");

    • Проверьте параметр mtype в настройках плагина.

      • dimmer

        Переделал по примеру взятого с wiki jqGrid, исправил с mtype с POST на GET — все заработало. Видимо я что-то ещё не допонимаю. Спасибо вам за статью, очень благодарен Вам.

        • dimmer

          Только сейчас замечаю, сколько делаю ошибок в тексте =(

  • dimmer

    Ребят, в чем проблема, не передаются параметры _GET, переходит просто на пустой getdata.php, причем переменные не пустые, проверил. Делал ка написано в примерах. Пример под названием Search Big Sets.

    jQuery("#list").jqGrid('setGridParam',{url:"getdata.php?name_mask="+name_mask+"&artist_mask="+artist_mask,page:1}).trigger("reloadGrid");

    • Проверьте параметр mtype в настройках плагина.

      • dimmer

        Переделал по примеру взятого с wiki jqGrid, исправил с mtype с POST на GET — все заработало. Видимо я что-то ещё не допонимаю. Спасибо вам за статью, очень благодарен Вам.

        • dimmer

          Только сейчас замечаю, сколько делаю ошибок в тексте =(

  • Castro

    Хороший плагин. И есть вопросы:
    1) Можно ли его настроить так, чтобы в таблице были заголовочные строки сверху и слева? Типа сводочная таблица.
    2) Можно ли напрямоую подключить сгенеренный XML-файл?
    3) Есть ли ещё какие-либо плагины, помогающие геренировать таблицы, котоыре умеют работать с XML?

  • Castro

    Хороший плагин. И есть вопросы:
    1) Можно ли его настроить так, чтобы в таблице были заголовочные строки сверху и слева? Типа сводочная таблица.
    2) Можно ли напрямоую подключить сгенеренный XML-файл?
    3) Есть ли ещё какие-либо плагины, помогающие геренировать таблицы, котоыре умеют работать с XML?

  • FBI

    Здравствуйте!Спасибо за статью. Скачал ваш пример, создал в базе таблицу. В файле getdata.php ввёл свои настройки подключения к базе.Запускаю index.html, получаю пустую таблицу (шапка таблицы есть). ((((

    • Установите firebug и посмотрите какие запросы отправляются и какие данные приходят.
      Чаще всего такая ситуация возникает когда:
      1) запрос отправляется не тому скрипту (нужно проверять весь url запроса);
      2) при выполнении php скрипта возникает ошибка;
      3) скрипт возвращает данные в неправильном формате.

      • FBI

        Вообщем проблему решил: вместо PDO использовал стандартное подключение mysql_connect, mysql_select_db и всё заработало 🙂

        • По-моему лучше включить поддержку PDO, все-таки удобнее чем стандартные функции mysql 😉

  • FBI

    Здравствуйте!Спасибо за статью. Скачал ваш пример, создал в базе таблицу. В файле getdata.php ввёл свои настройки подключения к базе.Запускаю index.html, получаю пустую таблицу (шапка таблицы есть). ((((

    • Установите firebug и посмотрите какие запросы отправляются и какие данные приходят.
      Чаще всего такая ситуация возникает когда:
      1) запрос отправляется не тому скрипту (нужно проверять весь url запроса);
      2) при выполнении php скрипта возникает ошибка;
      3) скрипт возвращает данные в неправильном формате.

      • FBI

        Вообщем проблему решил: вместо PDO использовал стандартное подключение mysql_connect, mysql_select_db и всё заработало 🙂

        • По-моему лучше включить поддержку PDO, все-таки удобнее чем стандартные функции mysql 😉

  • FBI

    Есть вопрос. Я хочу создать обычную форму, в которой просто ввожу к примеру имя и по нажатию кнопки выпадал jqgrid без перегрузки страницы. Соответственно в getdata.php делал бы выборку с базы по имени. Но в документации нигде не могу найти как реализовать такое чудо 🙂 Может кто пробовал чё-то подобное?

    • Попробуйте так:
      В обработчике клика по кнопке:
      1) создаете теги <table id=»list»…> и <div id=»pager»…>
      2) вставляете их под нужным полем
      3) создаете таблицу, т.е. выполняете
      jQuery(«#list»).jqGrid({ …..

      • FBI

        Я так понял, что методом POST мы передаём в getdata.php эти переменные rowNum:5,sortname: 'name',sortorder: «asc».Firebug показывает
        page 1
        rows 5
        sidx name
        sord asc
        А предусмотрено ли в jqGrid, чтоб я передавал ещё и свои переменные, те что я введу к примеру здеся:

        Имя:

        🙂

        • FBI

          пипец не закончил )))))
          Имя:
          input name=»Name» type=»text» value=»»

        • Можно использовать событие loadBeforeSend, с его помощью можно изменить запрос, который отправляется серверу.

  • FBI

    Есть вопрос. Я хочу создать обычную форму, в которой просто ввожу к примеру имя и по нажатию кнопки выпадал jqgrid без перегрузки страницы. Соответственно в getdata.php делал бы выборку с базы по имени. Но в документации нигде не могу найти как реализовать такое чудо 🙂 Может кто пробовал чё-то подобное?

    • Попробуйте так:
      В обработчике клика по кнопке:
      1) создаете теги <table id=»list»…> и <div id=»pager»…>
      2) вставляете их под нужным полем
      3) создаете таблицу, т.е. выполняете
      jQuery(«#list»).jqGrid({ …..

      • FBI

        Я так понял, что методом POST мы передаём в getdata.php эти переменные rowNum:5,sortname: 'name',sortorder: «asc».Firebug показывает
        page 1
        rows 5
        sidx name
        sord asc
        А предусмотрено ли в jqGrid, чтоб я передавал ещё и свои переменные, те что я введу к примеру здеся:

        Имя:

        🙂

        • FBI

          пипец не закончил )))))
          Имя:
          input name=»Name» type=»text» value=»»

        • Можно использовать событие loadBeforeSend, с его помощью можно изменить запрос, который отправляется серверу.

  • FBI

    Я сделал типа такого:
    jQuery(«#list»).jqGrid({
    url:'getdata.php?name='+name+'&surname='+surname,
    ……
    вроде работает 🙂

    • Я думал, нужно передавать методом POST. Но, раз подходит GET, то это действительно самый простой вариант.

  • FBI

    Я сделал типа такого:
    jQuery(«#list»).jqGrid({
    url:'getdata.php?name='+name+'&surname='+surname,
    ……
    вроде работает 🙂

    • Я думал, нужно передавать методом POST. Но, раз подходит GET, то это действительно самый простой вариант.

  • FBI

    Владимир, подскажите пожалуйста, где можна поменять надпись «Row(s)», которая показывает общее кол-во записей.

    • В плагин входят файлы локализации, в т.ч. и для русского языка. Т.е. нужно просто подключить этот файл grid.locale-ru.js до плагина.
      У меня есть статья в которой показан пример Управление jqGrid с помощью поля с автозавершением.

      Кроме того, можно написать свой файл с переводами или использовать такой код
      $.jgrid = {
      defaults : {
      recordtext: "View {0} - {1} of {2}",
      emptyrecords: "No records to view",
      loadtext: "Loading...",
      pgtext : "Page {0} of {1}"
      },
      ...
      }

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

      • FBI

        заработало 🙂

  • FBI

    Владимир, подскажите пожалуйста, где можна поменять надпись «Row(s)», которая показывает общее кол-во записей.

    • В плагин входят файлы локализации, в т.ч. и для русского языка. Т.е. нужно просто подключить этот файл grid.locale-ru.js до плагина.
      У меня есть статья в которой показан пример Управление jqGrid с помощью поля с автозавершением.

      Кроме того, можно написать свой файл с переводами или использовать такой код
      $.jgrid = {
      defaults : {
      recordtext: "View {0} - {1} of {2}",
      emptyrecords: "No records to view",
      loadtext: "Loading...",
      pgtext : "Page {0} of {1}"
      },
      ...
      }

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

      • FBI

        заработало 🙂

  • Ilya

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

    • Да, можно, но написать кода придётся довольно много.

      Нужно установить свои обработчики событий onKeyPress и в них проверять какие клавиши нажаты и вызывать соответствующие методы jqGrid.

  • Ilya

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

    • Да, можно, но написать кода придётся довольно много.

      Нужно установить свои обработчики событий onKeyPress и в них проверять какие клавиши нажаты и вызывать соответствующие методы jqGrid.

  • Дмитрий

    тоже интересует тема горячих клавиш тем более есть плагин query
    http://webduty.ru/список-нужных-плагинов-для-jquery.htm

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

  • Дмитрий

    тоже интересует тема горячих клавиш тем более есть плагин query
    http://webduty.ru/список-нужных-плагинов-для-jquery.htm

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

  • Дмитрий

    кстати нашел решение http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=70923 не так и уш много кода писать надо)

    • Ну да, если формат записи
      if(is_form){……}else{……}
      то действительно кода получается не много 😉
      Если серьезно, как только вы увеличите количество сочетаний клавиш, количество кода резко возрастет. Придется добавить проверки нажат ли ctrl, alt и т.п.
      Кроме того, вы не хотите, чтобы клавиши функционировали при открытом окне календаря — ещё проверки.
      Плюс убедиться, что ваши сочетания не совпадают с зарезервированными сочетаниями всех браузеров.
      Вобщем, реализовать полную поддержку работы с клавиатурой — это приличный кусок работы.

      • Дмитрий

        в YUI не работаете? там вроде назначение клавиш привязывается к объекту :
        var form = ….
        var k2 = new YAHOO.util.KeyListener(document, { ctrl:true, keys:[13] },{fn:handleSave, scope:form, correctScope:true } );

        • Нет, с YUI не работал, но возможность интересная. Думаю, для jQuery тоже должно быть что-то похожее, в виде плагина.

          Кстати, есть flash аналог jqGrid. Возможно, в нём поддержка клавиатуры лучше.

  • Дмитрий

    кстати нашел решение http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=70923 не так и уш много кода писать надо)

    • Ну да, если формат записи
      if(is_form){……}else{……}
      то действительно кода получается не много 😉
      Если серьезно, как только вы увеличите количество сочетаний клавиш, количество кода резко возрастет. Придется добавить проверки нажат ли ctrl, alt и т.п.
      Кроме того, вы не хотите, чтобы клавиши функционировали при открытом окне календаря — ещё проверки.
      Плюс убедиться, что ваши сочетания не совпадают с зарезервированными сочетаниями всех браузеров.
      Вобщем, реализовать полную поддержку работы с клавиатурой — это приличный кусок работы.

      • Дмитрий

        в YUI не работаете? там вроде назначение клавиш привязывается к объекту :
        var form = ….
        var k2 = new YAHOO.util.KeyListener(document, { ctrl:true, keys:[13] },{fn:handleSave, scope:form, correctScope:true } );

        • Нет, с YUI не работал, но возможность интересная. Думаю, для jQuery тоже должно быть что-то похожее, в виде плагина.

          Кстати, есть flash аналог jqGrid. Возможно, в нём поддержка клавиатуры лучше.

  • Ilya

    Ой подождите, я совсем новичек в этом деле, а можно какой-нибудь самый простой пример как например реализовать по нажатию на стрелку вниз переход на след строку или по нажатию на F2 переход в режим редактирования

    jQuery(document).ready(function(){
    var lastSel;
    jQuery(«#list»).jqGrid({
    url:'MyTableHandler.ashx?stat=l',
    datatype: 'xml',
    colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
    colModel :[
    {name:'id', index:'id', width:30}
    ,{name:'surname', index:'surname', width:180, align:'right',editable:true, edittype:»text»}
    ,{name:'fname', index:'fname', width:190, align:'right',editable:true, edittype:»text»}
    ,{name:'lname', index:'lname', width:180, align:'right',editable:true, edittype:»text»}
    ],
    pager: jQuery('#pager'),
    rowNum:1,
    rowList:[1,2,3],
    sortname: 'id',
    sortorder: «asc»,
    viewrecords: true,
    autowidth: true,
    imgpath: '../App_Themes/themes/steel/images',
    caption: 'Список пользователей',
    language: 'ru',
    ondblClickRow: function(id) {
    if (id && id != lastSel) {
    jQuery(«#list»).restoreRow(lastSel);
    jQuery(«#list»).editRow(id, true);
    lastSel = id;
    }
    },
    editurl: 'MyTableHandler.ashx?stat=e'
    }) ;

    });

    });

    • Я пожелание учел и, как только появится время (закончу цикл статей о Yii) постараюсь написать пост на эту тему.

    • Дмитрий

      window.onkeypress = function(evt){

      evt = (evt) ? evt : ((window.event) ? event : null)
      var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));

      if(evt){//если есть событие

      //если клавиша вниз
      if(evt.altKey && charCode == 40){
      var array = jQuery("#list").getDataIDs();//получим эллименты таблицы
      var id = eval (jQuery("#list").getGridParam('selrow'));//получим номер тек записи
      for(i in array){//проход по массиву если значение равно выделеному то получаем значение следующего ключа в массиве
      if (array[i]==id ) {
      i++;
      var next_id = array[i];
      if (next_id == undefined )return;
      jQuery("#list").setSelection(array[i]);
      return;
      }
      }
      }

      //если клавиша вврех
      if(evt.altKey && charCode == 38){
      var array = jQuery("#list").getDataIDs();
      var id = eval (jQuery("#list").getGridParam('selrow'));
      for(i in array){
      if (array[i]==id ) {
      i--;
      var next_id = array[i];
      if (next_id == undefined )return;
      jQuery("#list").setSelection(array[i]);
      i=array.lenght;
      return;
      }
      }
      }

      }

      }

      • Ilya

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

        • Дмитрий

          при инициализации вашей таблице должен быть указан ключ

          colModel :[
          {name:'id', index:'id', width:30, hidden:true,key:true}

          номер пользователя мона вывести в следующем поле

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

          номер строки | номер | фио
          1 3 ВАСЯ
          2 5 ГЕНА
          3 6 ПЕТЯ
          4 7 ОЛЯ

          а будет так:
          номер строки | номер | фио
          3 3 ВАСЯ
          5 5 ГЕНА
          6 6 ПЕТЯ
          7 7 ОЛЯ
          теперь например удобно получить уникальный номер строки=номеру записи:
          var id = jQuery(«#treegrid1»).getGridParam('selrow');
          и с этим id допустим загрузить форму с параметрами пользоватля п.с но это другая уже тема

  • Ilya

    Ой подождите, я совсем новичек в этом деле, а можно какой-нибудь самый простой пример как например реализовать по нажатию на стрелку вниз переход на след строку или по нажатию на F2 переход в режим редактирования

    jQuery(document).ready(function(){
    var lastSel;
    jQuery(«#list»).jqGrid({
    url:'MyTableHandler.ashx?stat=l',
    datatype: 'xml',
    colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
    colModel :[
    {name:'id', index:'id', width:30}
    ,{name:'surname', index:'surname', width:180, align:'right',editable:true, edittype:»text»}
    ,{name:'fname', index:'fname', width:190, align:'right',editable:true, edittype:»text»}
    ,{name:'lname', index:'lname', width:180, align:'right',editable:true, edittype:»text»}
    ],
    pager: jQuery('#pager'),
    rowNum:1,
    rowList:[1,2,3],
    sortname: 'id',
    sortorder: «asc»,
    viewrecords: true,
    autowidth: true,
    imgpath: '../App_Themes/themes/steel/images',
    caption: 'Список пользователей',
    language: 'ru',
    ondblClickRow: function(id) {
    if (id && id != lastSel) {
    jQuery(«#list»).restoreRow(lastSel);
    jQuery(«#list»).editRow(id, true);
    lastSel = id;
    }
    },
    editurl: 'MyTableHandler.ashx?stat=e'
    }) ;

    });

    });

    • Я пожелание учел и, как только появится время (закончу цикл статей о Yii) постараюсь написать пост на эту тему.

    • Дмитрий

      window.onkeypress = function(evt){

      evt = (evt) ? evt : ((window.event) ? event : null)
      var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));

      if(evt){//если есть событие

      //если клавиша вниз
      if(evt.altKey && charCode == 40){
      var array = jQuery("#list").getDataIDs();//получим эллименты таблицы
      var id = eval (jQuery("#list").getGridParam('selrow'));//получим номер тек записи
      for(i in array){//проход по массиву если значение равно выделеному то получаем значение следующего ключа в массиве
      if (array[i]==id ) {
      i++;
      var next_id = array[i];
      if (next_id == undefined )return;
      jQuery("#list").setSelection(array[i]);
      return;
      }
      }
      }

      //если клавиша вврех
      if(evt.altKey && charCode == 38){
      var array = jQuery("#list").getDataIDs();
      var id = eval (jQuery("#list").getGridParam('selrow'));
      for(i in array){
      if (array[i]==id ) {
      i--;
      var next_id = array[i];
      if (next_id == undefined )return;
      jQuery("#list").setSelection(array[i]);
      i=array.lenght;
      return;
      }
      }
      }

      }

      }

      • Ilya

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

        • Дмитрий

          при инициализации вашей таблице должен быть указан ключ

          colModel :[
          {name:'id', index:'id', width:30, hidden:true,key:true}

          номер пользователя мона вывести в следующем поле

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

          номер строки | номер | фио
          1 3 ВАСЯ
          2 5 ГЕНА
          3 6 ПЕТЯ
          4 7 ОЛЯ

          а будет так:
          номер строки | номер | фио
          3 3 ВАСЯ
          5 5 ГЕНА
          6 6 ПЕТЯ
          7 7 ОЛЯ
          теперь например удобно получить уникальный номер строки=номеру записи:
          var id = jQuery(«#treegrid1»).getGridParam('selrow');
          и с этим id допустим загрузить форму с параметрами пользоватля п.с но это другая уже тема

  • Дмитрий

    width:30 сделай лучше width:1

  • Дмитрий

    width:30 сделай лучше width:1

  • Ilya

    теперь грид дает ексепшен, когда по строке мышкой шелкаешь :(((

  • Ilya

    теперь грид дает ексепшен, когда по строке мышкой шелкаешь :(((

  • Дмитрий

    че за ексепшен?

  • Дмитрий

    че за ексепшен?

  • Ilya

    говорит, что необработаный ексепшен и ссылается на строку jquery.js

  • Ilya

    говорит, что необработаный ексепшен и ссылается на строку jquery.js

  • Дмитрий

    слушай может версия грида отличается можешь поискать на официальном формуте это грида

  • Дмитрий

    слушай может версия грида отличается можешь поискать на официальном формуте это грида

  • Ilya

    a какой ты пользуешься? мены любой рабочий вариант устроил бы

  • Ilya

    a какой ты пользуешься? мены любой рабочий вариант устроил бы

  • Дмитрий

    http://trirand.com/blog/jqgrid/jqgrid.html — демо (у меня 3.6)
    http://www.trirand.com — оф сайт
    http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

    -вики

    п.с. так то надо твой код смотреть чтоб понять что к чему, и php тоже

    • Ilya

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

  • Дмитрий

    http://trirand.com/blog/jqgrid/jqgrid.html — демо (у меня 3.6)
    http://www.trirand.com — оф сайт
    http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

    -вики

    п.с. так то надо твой код смотреть чтоб понять что к чему, и php тоже

    • Ilya

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

  • Павел


    http://www.trirand.net/demophp.aspx
    Они тут сделали еще и пхпшный класс для генерации самой таблицы, но просят денег за лицензию на него. Хотя и дают скачать полнофункциональную (?) демку бесплатно, код пхпшных генераторов зашифрован, включает в себя
    Отсюда вопрос: может быть, кто-нибудь в курсе, есть ли у этой демки жесткие ограничения по времени пользования, или это лицензия вида «не надо ставить на открытый сайт — никто слова не скажет»? 🙂

  • Павел


    http://www.trirand.net/demophp.aspx
    Они тут сделали еще и пхпшный класс для генерации самой таблицы, но просят денег за лицензию на него. Хотя и дают скачать полнофункциональную (?) демку бесплатно, код пхпшных генераторов зашифрован, включает в себя
    Отсюда вопрос: может быть, кто-нибудь в курсе, есть ли у этой демки жесткие ограничения по времени пользования, или это лицензия вида «не надо ставить на открытый сайт — никто слова не скажет»? 🙂

  • Ilya

    не получиться
    Trial grids will show a tiny message pointing to our site every once in a while, по крайней мере это для asp-ного так

  • Ilya

    не получиться
    Trial grids will show a tiny message pointing to our site every once in a while, по крайней мере это для asp-ного так

  • Я почитал документацию к этому классу, но, честно говоря, не понял за что 300$ ?
    В нём есть много нужных и полезных методов, но на много ускорить разработку с его помощью по-моему не получится. Например, класс в любом случае ничего не знает о вашей БД, значит запросы всё-равно придется писать вручную.

  • Я почитал документацию к этому классу, но, честно говоря, не понял за что 300$ ?
    В нём есть много нужных и полезных методов, но на много ускорить разработку с его помощью по-моему не получится. Например, класс в любом случае ничего не знает о вашей БД, значит запросы всё-равно придется писать вручную.

  • FBI

    Здравствуйте
    Использую jqgrid и доволен как слон )))Пишу в надежде на то, что кто-то с этим сталкивался.
    Дело в том, что при первой загрузке экшна с таблицей, ответ от сервера приходит через 2-3 секунды. Причем судя по логам и профайлеру, запросы к базе и время выполнения самой функции в экшне ничтожно малы — 0.01 сек. Что происходит в эти 2 секунды — непонятно.
    После загрузки страницы, я нажимаю кнопочку «обновить» в самом гриде, проходит тот же самый запрос но уже за 0.2 секунды — все ок. Замеры времени выполнения не помогают — все говорит о том, что страница генерируется быстро.

    При открытии страницы наблюдается еще и странное подвисание браузера (всех браузеров), на эти же 2 секунды. Фаербаг не показывает js-ошибок или 404, все запросы приходят с кодом 200.

    Уже не знаю где искать ошибку.

    Заранее спасибо за помощь.

    • Можеть быть — это загрузка самого плагина (js файлов)?

  • FBI

    Здравствуйте
    Использую jqgrid и доволен как слон )))Пишу в надежде на то, что кто-то с этим сталкивался.
    Дело в том, что при первой загрузке экшна с таблицей, ответ от сервера приходит через 2-3 секунды. Причем судя по логам и профайлеру, запросы к базе и время выполнения самой функции в экшне ничтожно малы — 0.01 сек. Что происходит в эти 2 секунды — непонятно.
    После загрузки страницы, я нажимаю кнопочку «обновить» в самом гриде, проходит тот же самый запрос но уже за 0.2 секунды — все ок. Замеры времени выполнения не помогают — все говорит о том, что страница генерируется быстро.

    При открытии страницы наблюдается еще и странное подвисание браузера (всех браузеров), на эти же 2 секунды. Фаербаг не показывает js-ошибок или 404, все запросы приходят с кодом 200.

    Уже не знаю где искать ошибку.

    Заранее спасибо за помощь.

    • Можеть быть — это загрузка самого плагина (js файлов)?

  • Дмитрий

    Извините а не подскажете как неуказывать иконку при создании пользоватлеьсих кнопок в таблице

    buttonicon:»»,//в таблице выводится по умолчанию

    и еще как эту кнопку менять при нажатии ???

    • Я не нашел стандартного способа это изменить.
      Можно, конечно, используя id кнопки, получить саму кнопку и убрать картинку.
      Используя свойство onClickButton можно назначить кнопке обработчик события onClick и в нём поменять картинку.
      Но такое решение не очень удобное, т.к. может перестать работать при обновлении плагина.

  • Дмитрий

    Извините а не подскажете как неуказывать иконку при создании пользоватлеьсих кнопок в таблице

    buttonicon:»»,//в таблице выводится по умолчанию

    и еще как эту кнопку менять при нажатии ???

    • Я не нашел стандартного способа это изменить.
      Можно, конечно, используя id кнопки, получить саму кнопку и убрать картинку.
      Используя свойство onClickButton можно назначить кнопке обработчик события onClick и в нём поменять картинку.
      Но такое решение не очень удобное, т.к. может перестать работать при обновлении плагина.

  • Добрый день!
    У меня есть грид с субгридами. Как мне сделать:
    1) чтобы субгрид появлялся не только при нажатии на «+», но и по клику на строке?
    2) чтобы при открытии субгрида и строка-родитель, и сам субргид выделялись (менялся фон/шрифт)?

    • 1) Попробуйте установить обработчик события onSelectRow, и в нём вызывать jQuery(«#grid_id»).hideCol('subgrid'); и jQuery(«#grid_id»).showCol('subgrid');

      2) Точно не знаю. Проще всего посмотреть (firebug'ом) нет ли у открытого subgrid класса, который можно использовать для установки стилей.

  • Добрый день!
    У меня есть грид с субгридами. Как мне сделать:
    1) чтобы субгрид появлялся не только при нажатии на «+», но и по клику на строке?
    2) чтобы при открытии субгрида и строка-родитель, и сам субргид выделялись (менялся фон/шрифт)?

    • 1) Попробуйте установить обработчик события onSelectRow, и в нём вызывать jQuery(«#grid_id»).hideCol('subgrid'); и jQuery(«#grid_id»).showCol('subgrid');

      2) Точно не знаю. Проще всего посмотреть (firebug'ом) нет ли у открытого subgrid класса, который можно использовать для установки стилей.

  • Дмитрий

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

    onSelectRow: function(id) {
    jQuery("#treegrid1").expandSubgridRow(id);
    }

    вообщем тут еще надо реализовать проверку раскрыта ли строка или нет.
    http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
    На счет форматирования изменить стиль можно, наверняка в базовой библиотеки query есть все необходимое для этого.
    http://visualjquery.com/

  • Дмитрий

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

    onSelectRow: function(id) {
    jQuery("#treegrid1").expandSubgridRow(id);
    }

    вообщем тут еще надо реализовать проверку раскрыта ли строка или нет.
    http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
    На счет форматирования изменить стиль можно, наверняка в базовой библиотеки query есть все необходимое для этого.
    http://visualjquery.com/

  • Castro

    Вопрос не касается непосредственно grid, но работы с таблицами в jquery.

    Как с помощью jquery обойти таблицу и проставить ячейкам айдишники типа id+column+row, где column и row — это номер колонки и столбца соответсвенно?
    .attr('id', 'id'+column+row);

    • Примерно так:
      $('td').each(function(index, value) {
      $(this).attr('id', index);
      });

      P.S. Я не тестировал код, могут быть ошибки, проверяйте.

  • Castro

    Вопрос не касается непосредственно grid, но работы с таблицами в jquery.

    Как с помощью jquery обойти таблицу и проставить ячейкам айдишники типа id+column+row, где column и row — это номер колонки и столбца соответсвенно?
    .attr('id', 'id'+column+row);

    • Примерно так:

      $('td').each(function(index, value) {
          $(this).attr('id', index);
      });

      P.S. Я не тестировал код, могут быть ошибки, проверяйте.

  • Дмитрий

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

    • Но прокрутка ведь всегда справа находится… Какую именно прокрутку вы имеете ввиду?

  • Дмитрий

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

    • Но прокрутка ведь всегда справа находится… Какую именно прокрутку вы имеете ввиду?

  • Ilya

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

    • Я никогда такой ошибки не видел. Не могли бы прислать скриншот или какую-нибудь дополнительную информацию?

  • Ilya

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

    • Я никогда такой ошибки не видел. Не могли бы прислать скриншот или какую-нибудь дополнительную информацию?

  • Ilya

    Насколько я понимаю ошибка в том, что после обновления данный на стороне сервера запрос что-то не то возвращает.
    т.е. данные на сервер приходят записываются, а дальше доходят до context.Response.Write(серверная часть у меня на ASP.NET), а потом на клиенте выскакивает сообщение
    result :12031: Unknown Status: error причем иногда говорит
    12030 а иногда 12031

    • Очень похоже, что это какие-то ошибки ASP.
      В любом случае, посмотрите с помощью firebug'а какую именно строку возвращает сервер и сравните с тем, что должно прийти (обычно возвращается содержимое страницы).

  • Ilya

    Насколько я понимаю ошибка в том, что после обновления данный на стороне сервера запрос что-то не то возвращает.
    т.е. данные на сервер приходят записываются, а дальше доходят до context.Response.Write(серверная часть у меня на ASP.NET), а потом на клиенте выскакивает сообщение
    result :12031: Unknown Status: error причем иногда говорит
    12030 а иногда 12031

    • Очень похоже, что это какие-то ошибки ASP.
      В любом случае, посмотрите с помощью firebug'а какую именно строку возвращает сервер и сравните с тем, что должно прийти (обычно возвращается содержимое страницы).

  • Дмитрий

    Имею ввиду листалку таблицы

    • Можно использовать свойство
      pagerpos: 'right',
      но оно не всегда удачно смещает листалку

  • Дмитрий

    Имею ввиду листалку таблицы

    • Можно использовать свойство
      pagerpos: 'right',
      но оно не всегда удачно смещает листалку

  • superbeller

    Здраствуйте. Вот начал использовать jqGrid. Всё работает хорошо. Вот только есть пара проблем:
    1) не знаю, как сделать множественный фильтр. Стандартный фильтр позволяет выбрать только одно поле, по которому будет произведена фильтрация. А надо, чтобы фильтровалось сразу по нескольким полям.
    2) хочу в последней ячейке каждой строки выводить флеш — для каждой строки свой. Возвращаю в формате Json. Пихаю в него html-код c флешом. Работает всё без ошибок, но моего флеша не видно в ячейке. Пробовал вместо флеша выводить ссылку. Её тоже не видно, но она работает — по ней можно перейти. Есть ощущение, что флеш там тоже есть, но просто он почему-то недоступен.

    • 1) У меня есть статья на эту тему jqGrid – поиск данных.

      2) Открывайте firebug и смотрите разметку в ячейках таблицы. Варианты могут быть разные. Вам нужно убедиться, что код флешки вставлен правильно.

      • superbeller

        1) спасибо за пример. Очень хороший и наглядный.
        2) посмотрел в firebug — там код есть, весь в нормальном виде. Но в броузере ничго не видно. В унаследованных стилях не увидел ничего такого, что скрывало бы элемент. Таблица его как-то скрывает. Попробывал так же добавить туда картинку — её тоже не видно. Может в настройках этого столбца можно указать, что отображаться будет html там?

  • superbeller

    Здраствуйте. Вот начал использовать jqGrid. Всё работает хорошо. Вот только есть пара проблем:
    1) не знаю, как сделать множественный фильтр. Стандартный фильтр позволяет выбрать только одно поле, по которому будет произведена фильтрация. А надо, чтобы фильтровалось сразу по нескольким полям.
    2) хочу в последней ячейке каждой строки выводить флеш — для каждой строки свой. Возвращаю в формате Json. Пихаю в него html-код c флешом. Работает всё без ошибок, но моего флеша не видно в ячейке. Пробовал вместо флеша выводить ссылку. Её тоже не видно, но она работает — по ней можно перейти. Есть ощущение, что флеш там тоже есть, но просто он почему-то недоступен.

    • 1) У меня есть статья на эту тему jqGrid – поиск данных.

      2) Открывайте firebug и смотрите разметку в ячейках таблицы. Варианты могут быть разные. Вам нужно убедиться, что код флешки вставлен правильно.

      • superbeller

        1) спасибо за пример. Очень хороший и наглядный.
        2) посмотрел в firebug — там код есть, весь в нормальном виде. Но в броузере ничго не видно. В унаследованных стилях не увидел ничего такого, что скрывало бы элемент. Таблица его как-то скрывает. Попробывал так же добавить туда картинку — её тоже не видно. Может в настройках этого столбца можно указать, что отображаться будет html там?

  • Ilya

    А можно все же еще раз пояснить по поводу того что должна возвращать серверная часть
    вот мой грид
    jQuery(«#list»).jqGrid({
    url:'MyTableHandler.ashx?stat=l',
    datatype: 'xml',
    colNames:['#','Дата', 'Фамилия', 'Имя', 'Отчество'],
    colModel :[
    {name:'id', index:'key', width:30}
    ,{name:'sdate',index:'sdate',width:90, editable:true, sorttype:»date»}
    ,{name:'surname', index:'surname', width:180, align:'right',editable:true, edittype:»text»}
    ,{name:'fname', index:'fname', width:190, align:'right',editable:true, edittype:»text»}
    ,{name:'lname', index:'lname', width:180, align:'right',editable:true, edittype:»text»}
    ],

    pager: jQuery('#pager'),
    rowNum:1,
    rowList:[1,2,3],
    sortname: 'id',
    sortorder: «asc»,
    viewrecords: true,
    autowidth: true,
    imgpath: '../App_Themes/themes/steel/images',
    caption: 'Список пользователей',
    language: 'ru',
    editurl: 'MyTableHandler.ashx?stat=e'
    });
    т.е. 'MyTableHandler.ashx- серверный код
    если stat=l то должно возвратиться содержимое таблицы, что у меня благополучно и делается
    если stat=e то это когда обновились данные в таблице и послан запрос на сервер для дальнейшего обновления данных и вот какраз вопрос в том этот запрос должен что-нибудь возвращать или нет

  • Ilya

    А можно все же еще раз пояснить по поводу того что должна возвращать серверная часть
    вот мой грид
    jQuery(«#list»).jqGrid({
    url:'MyTableHandler.ashx?stat=l',
    datatype: 'xml',
    colNames:['#','Дата', 'Фамилия', 'Имя', 'Отчество'],
    colModel :[
    {name:'id', index:'key', width:30}
    ,{name:'sdate',index:'sdate',width:90, editable:true, sorttype:»date»}
    ,{name:'surname', index:'surname', width:180, align:'right',editable:true, edittype:»text»}
    ,{name:'fname', index:'fname', width:190, align:'right',editable:true, edittype:»text»}
    ,{name:'lname', index:'lname', width:180, align:'right',editable:true, edittype:»text»}
    ],

    pager: jQuery('#pager'),
    rowNum:1,
    rowList:[1,2,3],
    sortname: 'id',
    sortorder: «asc»,
    viewrecords: true,
    autowidth: true,
    imgpath: '../App_Themes/themes/steel/images',
    caption: 'Список пользователей',
    language: 'ru',
    editurl: 'MyTableHandler.ashx?stat=e'
    });
    т.е. 'MyTableHandler.ashx- серверный код
    если stat=l то должно возвратиться содержимое таблицы, что у меня благополучно и делается
    если stat=e то это когда обновились данные в таблице и послан запрос на сервер для дальнейшего обновления данных и вот какраз вопрос в том этот запрос должен что-нибудь возвращать или нет

  • superbeller

    Кажется нашёл решение. Для этого столбца надо сделать свои функции format и unformat. Пункт Functionality / Misc -> Cell Formatters (custom) в демо на сайте содателей.

  • superbeller

    Кажется нашёл решение. Для этого столбца надо сделать свои функции format и unformat. Пункт Functionality / Misc -> Cell Formatters (custom) в демо на сайте содателей.

  • olga

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

    • Все эти настройки изменяются с помощью CSS стилей. Например, чтобы изменить размер шрифта в ячейках таблицы, можно использовать правило

      .ui-jqgrid tr.ui-row-ltr td {
      font-size: 2em;
      }

  • olga

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

    • Все эти настройки изменяются с помощью CSS стилей. Например, чтобы изменить размер шрифта в ячейках таблицы, можно использовать правило

      .ui-jqgrid tr.ui-row-ltr td {
      font-size: 2em;
      }

  • olga

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

  • olga

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

  • В файле ui.jqgrid.css есть стиль
    .ui-jqgrid .ui-jqgrid-htable th div {
    height: 17px;
    }
    Наверное, он вам и нужен.

  • В файле ui.jqgrid.css есть стиль
    .ui-jqgrid .ui-jqgrid-htable th div {
    height: 17px;
    }
    Наверное, он вам и нужен.

  • olga

    я что-то вообще не пойму ничего, гриду вообще все равно что в этом файле, вроде все подключено, такое чувство что он его просто не видит

    • Странно, когда я изменял этот стиль firebug'ом, высота шапки изменялась.

      Попробуйте с помощью firebug'а выбрать заголовок и посмотреть какие там вообще css файлы подключены и поискать height: ….px;
      Возможно мы разные версии плагина используем.

  • olga

    я что-то вообще не пойму ничего, гриду вообще все равно что в этом файле, вроде все подключено, такое чувство что он его просто не видит

    • Странно, когда я изменял этот стиль firebug'ом, высота шапки изменялась.

      Попробуйте с помощью firebug'а выбрать заголовок и посмотреть какие там вообще css файлы подключены и поискать height: ….px;
      Возможно мы разные версии плагина используем.

  • Александр

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

  • Александр

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

  • здравствуйте, не добавляется в базу почему-то данные
    вот код

    jQuery(document).ready(function(){
    var lastSel;
    jQuery("#dicdep-list").jqGrid({
    url:'getdata.php?tb=dicdep',
    datatype: 'json',
    mtype: 'POST',
    width: 1205,
    height: 400,
    colNames:['#', 'Код', 'ФИО','Дата', 'Номер', 'Год', 'Дата выдачи свидетельства', 'Дата начала свидетельства', 'Кол-во листов в НД'],
    colModel :[
    {name:'id', index:'id', width:20, align:'right',editable:false, search:false, hidden:true}
    ,{name:'code', index:'code', width:20, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'fio', index:'fio', width:250, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'data', index:'data', width:50, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'nomer', index:'nomer', width:30, align:'center', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:13}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'year', index:'year', width:50, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'data_v', index:'data_v', width:150, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'data_n', index:'data_n', width:150, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'nd', index:'nd', width:150, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ],

    hiddengrid: true,
    pager: jQuery('#dicdep-pager'),
    rowNum:25,
    rowList:[25,50],
    sortname: 'id',
    sortorder: "asc",
    viewrecords: true,
    caption: 'Словарь - отделы',
    ondblClickRow: function(id) {
    if (id) {
    jQuery("#dicdep-list").restoreRow(lastSel);
    jQuery("#dicdep-list").editRow(id, true);
    lastSel = id;
    }
    },
    editurl: 'saverow.php?tb=dicdep'
    }).navGrid('#dicdep-pager',{ view:false, edit:true, add:true, del:true, search:true},
    {closeOnEscape:true,width:395,modal:true, closeAfterEdit:true}, // default settings for edit
    {closeOnEscape:true}, // default settings for add
    {closeOnEscape:true}, // delete instead that del:false we need this
    {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
    {} /* view parameters*/
    );
    //добавляем верхнюю строку фильтрации
    jQuery("#dicdep-list").filterToolbar();
    });

    • Вы привели код клиентской части, но в БД запись сохраняет серверный скрипт (php).

      Кроме того, чтобы проверить работу скрипта нужны скриншоты firebug'а с данными запроса (массив POST и ответ сервера).

  • здравствуйте, не добавляется в базу почему-то данные
    вот код

    jQuery(document).ready(function(){
    var lastSel;
    jQuery("#dicdep-list").jqGrid({
    url:'getdata.php?tb=dicdep',
    datatype: 'json',
    mtype: 'POST',
    width: 1205,
    height: 400,
    colNames:['#', 'Код', 'ФИО','Дата', 'Номер', 'Год', 'Дата выдачи свидетельства', 'Дата начала свидетельства', 'Кол-во листов в НД'],
    colModel :[
    {name:'id', index:'id', width:20, align:'right',editable:false, search:false, hidden:true}
    ,{name:'code', index:'code', width:20, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'fio', index:'fio', width:250, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'data', index:'data', width:50, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'nomer', index:'nomer', width:30, align:'center', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:13}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'year', index:'year', width:50, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'data_v', index:'data_v', width:150, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'data_n', index:'data_n', width:150, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ,{name:'nd', index:'nd', width:150, align:'left', editable:true, edittype:"text", search:true, stype:'text', editoptions:{size:46}, searchoptions:{sopt:['cn','ne','bw','eq']}}
    ],

    hiddengrid: true,
    pager: jQuery('#dicdep-pager'),
    rowNum:25,
    rowList:[25,50],
    sortname: 'id',
    sortorder: "asc",
    viewrecords: true,
    caption: 'Словарь - отделы',
    ondblClickRow: function(id) {
    if (id) {
    jQuery("#dicdep-list").restoreRow(lastSel);
    jQuery("#dicdep-list").editRow(id, true);
    lastSel = id;
    }
    },
    editurl: 'saverow.php?tb=dicdep'
    }).navGrid('#dicdep-pager',{ view:false, edit:true, add:true, del:true, search:true},
    {closeOnEscape:true,width:395,modal:true, closeAfterEdit:true}, // default settings for edit
    {closeOnEscape:true}, // default settings for add
    {closeOnEscape:true}, // delete instead that del:false we need this
    {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
    {} /* view parameters*/
    );
    //добавляем верхнюю строку фильтрации
    jQuery("#dicdep-list").filterToolbar();
    });

    • Вы привели код клиентской части, но в БД запись сохраняет серверный скрипт (php).

      Кроме того, чтобы проверить работу скрипта нужны скриншоты firebug'а с данными запроса (массив POST и ответ сервера).

  • файрбаг показывает на 815 строку

    http://fastpic.ru/view/2/2010/0311/0ddfb3645ec99c618f33a58fdb00f2a9.jpg.html

    • В какой момент возникает эта ошибка?

      • nervi

        Владимир
        12 марта 2010 в 16:37
        В какой момент возникает эта ошибка?

        такое происходит при загрузке таблицы

        • Если это происходит при загрузке таблицы, то почему на скриншоте таблица заполнена данными?
          Порядок загрузки данных в jqGrid следующий.
          1) Загружается jQuery и плагин.
          2) Выполняется инициализация. На этом этапе таблица создана, но пустая.
          3) Отправляется ajax запрос серверу, который должен вернуть данные.
          4) Данные вставляются в таблицу.
          Посмотрите в консоли firebug ушел запрос или нет?

          P.S. А почему вы используете альфа версию jQuery?

  • файрбаг показывает на 815 строку

    http://fastpic.ru/view/2/2010/0311/0ddfb3645ec99c618f33a58fdb00f2a9.jpg.html

    • В какой момент возникает эта ошибка?

      • nervi

        Владимир
        12 марта 2010 в 16:37
        В какой момент возникает эта ошибка?

        такое происходит при загрузке таблицы

        • Если это происходит при загрузке таблицы, то почему на скриншоте таблица заполнена данными?
          Порядок загрузки данных в jqGrid следующий.
          1) Загружается jQuery и плагин.
          2) Выполняется инициализация. На этом этапе таблица создана, но пустая.
          3) Отправляется ajax запрос серверу, который должен вернуть данные.
          4) Данные вставляются в таблицу.
          Посмотрите в консоли firebug ушел запрос или нет?

          P.S. А почему вы используете альфа версию jQuery?

  • Еще замечу, что удаление происходит корректно.

  • Еще замечу, что удаление происходит корректно.

  • FBI

    Народ вопрос на засыпку: под APACHE JQGRID работает? Поднял под IIS — всё пашет, под APACHE — возвращает пустую табличку. В FIREBUGе глянул данные POSTом оправляются, а возвращаются нули. Запросы проверил рабочие. Может функция JSON_ENCODE() тупит? Короче говоря, я в тупике…

    • Да, работает. Если запрос ушел нормально, значит, возникла какая-то ошибка при выполнении php скрипта. Может быть, что дело и в json_encode (ее поддержку можно отключить в php.ini).
      Подключите отладчик и посмотрите как скрипт работает. Нет возможности использовать отладчик — можно просто вывести переменные с помощью var_dump.

    • PooH

      JSON_ENCODE() тупит с win1251 кодировкой

  • FBI

    Народ вопрос на засыпку: под APACHE JQGRID работает? Поднял под IIS — всё пашет, под APACHE — возвращает пустую табличку. В FIREBUGе глянул данные POSTом оправляются, а возвращаются нули. Запросы проверил рабочие. Может функция JSON_ENCODE() тупит? Короче говоря, я в тупике…

    • Да, работает. Если запрос ушел нормально, значит, возникла какая-то ошибка при выполнении php скрипта. Может быть, что дело и в json_encode (ее поддержку можно отключить в php.ini).
      Подключите отладчик и посмотрите как скрипт работает. Нет возможности использовать отладчик — можно просто вывести переменные с помощью var_dump.

    • PooH

      JSON_ENCODE() тупит с win1251 кодировкой

  • FBI

    Вообщем под виндой APACHE залетал и с JQGRID траблов нет. А под LINUX гемор остался. А в доках не могу нарыть взаимодействие LINUX с JQGRID… 🙁

  • FBI

    Вообщем под виндой APACHE залетал и с JQGRID траблов нет. А под LINUX гемор остался. А в доках не могу нарыть взаимодействие LINUX с JQGRID… 🙁

  • PooH

    Здравствуйте. Есть вопрос по поводу добавления записи в таблицу. Делаю add: true там появляется окошко (там пусто и 2 кнопки), но в это окошко нужно подставить свою форму. Не подскажете как ?

  • PooH

    Здравствуйте. Есть вопрос по поводу добавления записи в таблицу. Делаю add: true там появляется окошко (там пусто и 2 кнопки), но в это окошко нужно подставить свою форму. Не подскажете как ?

  • Есть хороший пример на эту тему. Находится здесь. В меню справа выбираете Live Data Manipulation — Add row.

  • Есть хороший пример на эту тему. Находится здесь. В меню справа выбираете Live Data Manipulation — Add row.

  • user1231

    Народ подскажите пожалуйста как в jGrid шапку таблицы сделать многострочной?
    Имеет место быть когда имя колонки состоит из нескольких слов
    например: «User Update Last» нужно чтобы это название колонки отображалось в 3 строки

    • user1231

      или хотябы увеличить высоту шапки таблицы с помощью JS кода..,
      (не хотелось бы вручную править CSS и JS код для этого (мало ли обновлять буду плагин…)

      • Я сам с этой проблемой не сталкивался, но видел такое решение

        <style type="text/css">
        #mydiv table.scroll thead th { vertical-align: top; }
        #mydiv table.scroll thead th div { height: auto; }
        </style>

        • FBI

          Столкнулся с такой же проблемой. К сожалению, Владимир, на том сайте решение так и не нашли 🙁 Если найдёте решение пожалуйста отпишитесь, а если нет, то прийдётся лезть в css файл расширять высоту ячейки, а в colNames заголовок писать через br: UserUpdateLast

        • Обязательно. Правда, я уже сомневаюсь, что оно будет простым.

  • user1231

    Народ подскажите пожалуйста как в jGrid шапку таблицы сделать многострочной?
    Имеет место быть когда имя колонки состоит из нескольких слов
    например: «User Update Last» нужно чтобы это название колонки отображалось в 3 строки

    • user1231

      или хотябы увеличить высоту шапки таблицы с помощью JS кода..,
      (не хотелось бы вручную править CSS и JS код для этого (мало ли обновлять буду плагин…)

      • Я сам с этой проблемой не сталкивался, но видел такое решение

        <style type="text/css">
          #mydiv table.scroll thead th { vertical-align: top; }
          #mydiv table.scroll thead th div { height: auto; }
        </style>
        • FBI

          Столкнулся с такой же проблемой. К сожалению, Владимир, на том сайте решение так и не нашли 🙁 Если найдёте решение пожалуйста отпишитесь, а если нет, то прийдётся лезть в css файл расширять высоту ячейки, а в colNames заголовок писать через br: UserUpdateLast

        • Обязательно. Правда, я уже сомневаюсь, что оно будет простым.

  • user1231

    спс..,
    я уже решил эту проблему немножко по другому…

  • user1231

    спс..,
    я уже решил эту проблему немножко по другому…

  • user1231

    сделал так:
    вот часть кода…
    думаю разберетесь =)

    colNames:['ID', 'Дата<br> создания', 'User<br> update<br> last']

    это заголовки таблицы с предустановленными БРами
    наз-ся соответственно id, date, uul

    при дебаге было выяснено что данные в шапке тыблицы находятся в ДИВЕ с уникальным ИД.., который состоит из префикса jqgh_ и имени (интекса ячейки) например jqgh_date

    дальше все просто ставим стилем нужную высоту дива( так как именно он остается неизменным (остальное динамически изменится)

    вот так:

    $("#jqgh_date, #jqgh_uul").css({"height": "24px"});

    вуаля.. все получилось =)
    правда криво но ))) другого способа я не нашел пока что….

    ____
    З.Ы.
    естессно код упрощен но впринципе разобраться несложно что куда тыкать…

  • user1231

    сделал так:
    вот часть кода…
    думаю разберетесь =)

    colNames:['ID', 'Дата<br> создания', 'User<br> update<br> last']

    это заголовки таблицы с предустановленными БРами
    наз-ся соответственно id, date, uul

    при дебаге было выяснено что данные в шапке тыблицы находятся в ДИВЕ с уникальным ИД.., который состоит из префикса jqgh_ и имени (интекса ячейки) например jqgh_date

    дальше все просто ставим стилем нужную высоту дива( так как именно он остается неизменным (остальное динамически изменится)

    вот так:

    $("#jqgh_date, #jqgh_uul").css({"height": "24px"});

    вуаля.. все получилось =)
    правда криво но ))) другого способа я не нашел пока что….

    ____
    З.Ы.
    естессно код упрощен но впринципе разобраться несложно что куда тыкать…

  • user1231

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

    • Большое спасибо за то, что рассказали о решении!
      До сих пор не понимаю, почему разработчики плагина не учли этот момент.

      P.S. Надеюсь я правильно вставил теги.

  • user1231

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

    • Большое спасибо за то, что рассказали о решении!
      До сих пор не понимаю, почему разработчики плагина не учли этот момент.

      P.S. Надеюсь я правильно вставил теги.

  • FBI

    А пробовал кто-то убирать заглавие таблицы и название полей(шапку), и выводить только саму сетку с данными?

    • Не пробовал, но что если просто указать пустые строки к заголовкам столбцов?

    • user1231

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

      • FBI

        Пересмотрел все примеры — где ты там нарыл, хз

        • Честно говоря, я тоже не нашел 🙁

        • user1231

          да хоть так:

          $("#pager").css({"display": "none"});
          $(".ui-jqgrid-hdiv").css({"display": "none"});
          $(".ui-jqgrid-titlebar").css({"display": "none"});

        • user1231

          полностью убрать ты их не сумеешь..
          так как они часть скрипта.., и неообходимые параметры.., только скрыть

        • Спасибо! Правда, я все-таки надеялся, что есть встроенный метод.

        • FBI

          user1231 огромный респект и уважуха 🙂

  • FBI

    А пробовал кто-то убирать заглавие таблицы и название полей(шапку), и выводить только саму сетку с данными?

    • Не пробовал, но что если просто указать пустые строки к заголовкам столбцов?

    • user1231

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

      • FBI

        Пересмотрел все примеры — где ты там нарыл, хз

        • Честно говоря, я тоже не нашел 🙁

        • user1231

          да хоть так:

          $("#pager").css({"display": "none"});
          $(".ui-jqgrid-hdiv").css({"display": "none"});
          $(".ui-jqgrid-titlebar").css({"display": "none"});

        • user1231

          полностью убрать ты их не сумеешь..
          так как они часть скрипта.., и неообходимые параметры.., только скрыть

        • Спасибо! Правда, я все-таки надеялся, что есть встроенный метод.

        • FBI

          user1231 огромный респект и уважуха 🙂

  • Андрей

    Подскажите, может кто знает, можно сделать чтобы filterToolbar работал корректно при локальной загрузки данных через массив. Подключаю через jQuery(«#table»).jqGrid('filterToolbar');, сортировать сортирует только неправильно. Заранее спасибо 🙂

    • А что именно неправильно в сортировке? Если можно, покажите пример.

    • user1231

      он правильно сортирует…
      другой вопрос твои данные какого формата.., и по какому принципу ты их сортируешь…

      пример:
      у тебя данные вида 21,520,534,53,543
      и ты сортируешь их как текст, то у тебя в итоге получится
      21,520,53,534,543
      смотри в коде тип сортировки…

  • Андрей

    Подскажите, может кто знает, можно сделать чтобы filterToolbar работал корректно при локальной загрузки данных через массив. Подключаю через jQuery(«#table»).jqGrid('filterToolbar');, сортировать сортирует только неправильно. Заранее спасибо 🙂

    • А что именно неправильно в сортировке? Если можно, покажите пример.

    • user1231

      он правильно сортирует…
      другой вопрос твои данные какого формата.., и по какому принципу ты их сортируешь…

      пример:
      у тебя данные вида 21,520,534,53,543
      и ты сортируешь их как текст, то у тебя в итоге получится
      21,520,53,534,543
      смотри в коде тип сортировки…

  • user1231

    меня сейчас начал волновать несколько другой вопрос…
    кто-нибудь сталкивался с вопросом…, сохранения настроек сделанных пользователем с таблицей (тип сортировки , выбранные столбцы, порядок столбцов, размеры и прочее…)

    интересует какая нить кнопка, которая буудет передавать эти настройки в ПХП и обратно…
    думаю ясно зачем…,
    вот только возможно ли такое реализовать кто в курсе ?

    • По-идее, реализовать можно, но я не пробовал.
      Существует модуль Import/Export, он позволяет импортировать и экспортировать настройки таблицы.
      Вам остается только сохранять эти настройки в БД.

    • Павел

      Я с этим сталкивался (заказчик попросил только ширину и видимость колонок таблицы сохранять). Сохраняю в виде JSON в куку (при желании не проблема отдавать эти данные аяксом серверу и сохранять там в сессии или на что фантазии хватит).

      saveSettings = function(mode){
      var i, cnt, settings = {},
      colModel = $('#list').jqGrid('getGridParam', 'colModel')
      settings.columns = {}
      for( i in colModel ){
      settings.columns[colModel[i].name] = {width:colModel[i].width, hidden:colModel[i].hidden}
      }
      settings['postData'] = $('#list').jqGrid('getPostData');
      delete settings.postData.nd;
      //return settings;
      $.cookies.set('jqgrid_settings_'+mode, $.JSON.encode(settings), {expiresAt: new Date( 2012, 1, 1 )})
      }

      mode — специфичная для моей задачи переменная. Используются плагины cookies и json (гугл в помощь). Плюс при инициализации таблицы приходится обращаться к этой куке для считывания нужных параметров столбцов. Наверное, я изобрел велосипед 🙂

      • Большое спасибо за решение!
        Велосипед это, или нет, но раз оно работает, то вполне может кому-то сэкономить время.
        Правда, решение Дмитрия выглядит компактнее 😉

  • user1231

    меня сейчас начал волновать несколько другой вопрос…
    кто-нибудь сталкивался с вопросом…, сохранения настроек сделанных пользователем с таблицей (тип сортировки , выбранные столбцы, порядок столбцов, размеры и прочее…)

    интересует какая нить кнопка, которая буудет передавать эти настройки в ПХП и обратно…
    думаю ясно зачем…,
    вот только возможно ли такое реализовать кто в курсе ?

    • По-идее, реализовать можно, но я не пробовал.
      Существует модуль Import/Export, он позволяет импортировать и экспортировать настройки таблицы.
      Вам остается только сохранять эти настройки в БД.

    • Павел

      Я с этим сталкивался (заказчик попросил только ширину и видимость колонок таблицы сохранять). Сохраняю в виде JSON в куку (при желании не проблема отдавать эти данные аяксом серверу и сохранять там в сессии или на что фантазии хватит).

      saveSettings = function(mode){
      var i, cnt, settings = {},
      colModel = $('#list').jqGrid('getGridParam', 'colModel')
      settings.columns = {}
      for( i in colModel ){
      settings.columns[colModel[i].name] = {width:colModel[i].width, hidden:colModel[i].hidden}
      }
      settings['postData'] = $('#list').jqGrid('getPostData');
      delete settings.postData.nd;
      //return settings;
      $.cookies.set('jqgrid_settings_'+mode, $.JSON.encode(settings), {expiresAt: new Date( 2012, 1, 1 )})
      }

      mode — специфичная для моей задачи переменная. Используются плагины cookies и json (гугл в помощь). Плюс при инициализации таблицы приходится обращаться к этой куке для считывания нужных параметров столбцов. Наверное, я изобрел велосипед 🙂

      • Большое спасибо за решение!
        Велосипед это, или нет, но раз оно работает, то вполне может кому-то сэкономить время.
        Правда, решение Дмитрия выглядит компактнее 😉

  • Дмитрий

    то же тема актуальная но мне кажется в стандартном Import/Export много лишней информации. если реализовать через param = jQuery("#grid").getGridParam(); — получаем нужные данные и сохраняем в mysql а param = jQuery("#grid").setGridParam(....); — установим сохраненые данные или что то типа этого

    • Спасибо, хороший вариант.

    • Павел

      да, я действительно заново изобрел велосипед… до getGridParam додумался, а вот до setGridParam как-то не успел 🙂 Спасибо, что глаза открыли.

    • user1231

      это то что надо но есть одно НО!..
      кто бы подсказал функцию как в PHP аналог serialize/unserialize
      которая этот массив с данными переведет в строку и обратно…
      но в JS???

      • Можно преобразовать в JSON формат. У меня есть статья на эту тему. Отправка данных в формате JSON с помощью JavaScript и jQuery

      • Дмитрий

        PHP
        $responce->h=150;
        echo json_encode($responce);//{h:150}

        Javascript
        var oResults = eval("(" + o.responseText + ")");

        • user1231

          пасиб..,
          возник следущий вопрос
          получаю параметры
          jQuery("#list").getGridParam('colModel')
          тут впринципе все ясно.., но..
          а если мне не нужно брать ВСЕ параметры полученные таким способом…
          как мне получить параметры всех столбцов (например ширины)
          как в примере павла. (у него это осуществлено методом перебора)
          у меня же другой вопрос можно ли задать нечто вроде:
          jQuery("#list").getGridParam('colModel','width')
          представленный выше код естессно не работает =)

        • user1231

          что самое интересное,
          res=jQuery("#list").getGridParam('colModel');
          получил
          потом поменял местами столбцы к примеру, размер поменял скрыл половину…
          теперь пытаюсь применить сохраненные настройки
          jQuery("#list").setGridParam({colModel:res}).trigger("reloadGrid");
          и таблицу перекореживает… шапка таблицы вообще остается такой как была…
          а строки перемешиваются… размеры меняются.. глюки

          кто обьяснит что не так делаю ? =)
          _____
          З.Ы.
          все это не перегружая таблицу (даже такой вариант не прокатил)

        • Дмитрий

          а как происходит скрытие столбцов в Демо?? там ведь все нормально работает

        • @user1231 Точно сказать не могу, сам не ковырялся. Может getGridParam сохраняет не все параметры, которые вы изменили?

        • user1231

          помучавшись дня 3 понял что использование
          getGridParam и setGridParam
          оправдано только в случае изменения одного параметра (не массивного) а их оч мало.., из чего следует что эти 2 функции просто БЕСПОЛЕЗНЫ, так как они ПРАВИЛЬНО ничего толком поменять не могут…
          я джаже не сумел передать
          вот эту опцию через эти параметры:
          rowList:[10,15,20,25]

          не то чтообы говорить о чем-то другом…

        • Понятно, я тоже ничего конкретного не нашел.

    • Дмитрий

      jQuery(«#treegrid1»).hideCol(['CODE','COMMENT'])

      • user1231

        возник вопрос…
        как с помощью начальных установок (в самом теле яваскрипта)
        (когда он только загружается пользователем и инициализируется)
        задать настройки поиска
        —-
        нужно для опции сохранения параметров для сайта

        (допустим у нас есть таблица пользователь зашел, нажал поиск,
        выбрал данные, они сохранились на сервер (тут проблеем нет они просто передаются скрипту))

        _search true
        filters {"groupOp":"OR","rules":[{"field":"ID_vis","op":"eq","data":"2"},{"field":"ID_user","op":"eq","data":"5"}]}

        а вот как эти данные пихнуть в скрипт при ПЕРВОЙ загрузке кто знает ?

        • Не уверен, что правильно понял вопрос. Но посмотрите статью Передача параметров в JavaScript файлы. Там описаны варианты передачи данных от сервера в JS файлы, и они будут доступны при первой загрузке страницы.
          Т.е. при настройке поиска можно будет использовать что-то вроде

          [{«field»:»ID_vis»,»op»:$.searchConfig.op1,»data»:$.searchConfig.val1},

        • user1231

          я имел ввиду что
          есть код

          jQuery("#list").jqGrid({
          url:'getdata.php',
          datatype: 'json',
          mtype: 'POST',
          colNames:['ID', 'Фамилия', 'Имя', 'Отчество'],
          colModel :[
          {name:'id', index:'id', width:50}
          ,{name:'surname', index:'surname', width:150}
          ,{name:'fname', index:'fname', width:150}
          ,{name:'lname', index:'lname', width:150}],
          pager: jQuery('#pager'),
          rowNum:5,
          rowList:[5,10,30],
          sortname: 'id',
          sortorder: "asc",
          viewrecords: true,
          caption: 'Данные пользователей',


          который генерируется сервером
          и нужно В ЭТОТ код вставить параметры поиска

          _search true
          filters {"groupOp":"OR","rules":[{"field":"ID_vis","op":"eq","data":"2"},{"field":"ID_user","op":"eq","data":"5"}]}

          так вот как это сделать ?
          как передать тут не имеет значения., имеет значение как это описать в коде

        • Параметры вам известны?

          Если да, то вставляете их так, чтобы в результате получилась строка.

          Например

          [{«field»:»ID_vis»,»op»:»eq»,»data»:»<?php echo $value; ?>»},

        • user1231

          так вот как втавить то ? =)

        • user1231

          я имею ввиду

          rowList:[5,10,30],
          sortname: 'id',

          вот так вставляются варианты кол-ва записей на странице и колонка сортировки,

          так вот меня интересует а как вставить параметры поиска,
          ЧТО НАДО УКАЗАТЬ в конфиге ?
          как вставить сами парачетры в ПХП я знаю…

        • У меня такое ощущение что я чего-то не понимаю и только путаю вас 🙂

          Конфиг формируется на сервере и находится в js файле. Правильно?

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

          Т.е. вместо
          sortname: 'id',
          выводить, например,
          sortname: 'price',
          где price название столбца и его нужно получить из базы.
          Этот момент я правильно понял?

          Если да, то нужно переименовать js файл в php и вставлять новые значения с помощью обычного php кода.
          Возможно в начале этого файла нужно будет отправить заголовок
          header('Content-type: application/x-javascript')

        • user1231

          да, не понимаете =))
          как отправить получить установить я знаю…
          я не знаю как ОПИСАТЬ!!!!

          jQuery("#list").jqGrid({
          url:'getdata.php',
          datatype: 'json',
          mtype: 'POST',
          colNames:['ID', 'Фамилия', 'Имя', 'Отчество'],
          colModel :[
          {name:'id', index:'id', width:50}
          ,{name:'surname', index:'surname', width:150}
          ,{name:'fname', index:'fname', width:150}
          ,{name:'lname', index:'lname', width:150}],
          pager: jQuery('#pager'),
          rowNum:5,
          rowList:[5,10,30],
          sortname: 'id',
          sortorder: "asc",
          viewrecords: true,
          caption: 'Данные пользователей',

          выше был пример кода…
          там инициализация и прочее
          вот…
          мне надо туда вставить код для поиска (как вставлять и какие данные я умею этого не требуется)

          мне нужно узнать ЧТО вставлять туда

          полагаю нечто вроде:

          sortorder: "asc",
          viewrecords: true,
          поиск: true,
          фильтр: [{"field":"ID_vis","op":$.searchConfig.op1,"data":$.searchConfig.val1}],


          так вот мне нужно знать возможно ли так ?
          и если да,
          то какие слова вставлять вместо слов «поиск» и «фильтр»

        • user1231

          как описать стандартные настройки я знаю…
          я не могу описать в ЭТОМ КОДЕ
          данные по поиску
          тоесть в таблице есть кнопка ПОИСК
          пользователь ее нажал сделал запрос
          и получил данные отфильтрованные…

          после этого закрыл страницу (а полученные данные на серваке сохранились)

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

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

        • user1231

          вот так не работает

          _search:true,
          filters: [{groupOp:"OR",rules:[ {field:"ID_vis",op:"eq",data:"2"},{field:"ID_vis",op:"eq",data:"36"}]}],
          sortorder: "asc",
          viewrecords: true,

          параметры sortorder и viewrecords применяются все норм
          а вот параметры _search и filters нет…
          как понимаю они не существуют
          так вот я и хочу узнать а какие существуют чтобы это все заработало =)

        • Кажется я понял 🙂
          Параметры _search и filters не нужно задавать в настройках jqgrid, их плагин формирует сам при отправке запроса.

          Нужно указать в colModel перечень доступных операций сравнения:
          {name:'fieldname', … searchoptions:{sopt:['eq','ne','bw','cn']}}

          а в общих настройках — поле по которому выполняется сортировка и направление сортировки.
          sortname: 'id',
          sortorder: «asc»,

          Кстати, у меня есть готовый пример поиска.

  • Дмитрий

    то же тема актуальная но мне кажется в стандартном Import/Export много лишней информации. если реализовать через param = jQuery("#grid").getGridParam(); — получаем нужные данные и сохраняем в mysql а param = jQuery("#grid").setGridParam(....); — установим сохраненые данные или что то типа этого

    • Спасибо, хороший вариант.

    • Павел

      да, я действительно заново изобрел велосипед… до getGridParam додумался, а вот до setGridParam как-то не успел 🙂 Спасибо, что глаза открыли.

    • user1231

      это то что надо но есть одно НО!..
      кто бы подсказал функцию как в PHP аналог serialize/unserialize
      которая этот массив с данными переведет в строку и обратно…
      но в JS???

      • Можно преобразовать в JSON формат. У меня есть статья на эту тему. Отправка данных в формате JSON с помощью JavaScript и jQuery

      • Дмитрий

        PHP
        $responce->h=150;
        echo json_encode($responce);//{h:150}

        Javascript
        var oResults = eval("(" + o.responseText + ")");

        • user1231

          пасиб..,
          возник следущий вопрос
          получаю параметры
          jQuery("#list").getGridParam('colModel')
          тут впринципе все ясно.., но..
          а если мне не нужно брать ВСЕ параметры полученные таким способом…
          как мне получить параметры всех столбцов (например ширины)
          как в примере павла. (у него это осуществлено методом перебора)
          у меня же другой вопрос можно ли задать нечто вроде:
          jQuery("#list").getGridParam('colModel','width')
          представленный выше код естессно не работает =)

        • user1231

          что самое интересное,
          res=jQuery("#list").getGridParam('colModel');
          получил
          потом поменял местами столбцы к примеру, размер поменял скрыл половину…
          теперь пытаюсь применить сохраненные настройки
          jQuery("#list").setGridParam({colModel:res}).trigger("reloadGrid");
          и таблицу перекореживает… шапка таблицы вообще остается такой как была…
          а строки перемешиваются… размеры меняются.. глюки

          кто обьяснит что не так делаю ? =)
          _____
          З.Ы.
          все это не перегружая таблицу (даже такой вариант не прокатил)

        • Дмитрий

          а как происходит скрытие столбцов в Демо?? там ведь все нормально работает

        • @user1231 Точно сказать не могу, сам не ковырялся. Может getGridParam сохраняет не все параметры, которые вы изменили?

        • user1231

          помучавшись дня 3 понял что использование
          getGridParam и setGridParam
          оправдано только в случае изменения одного параметра (не массивного) а их оч мало.., из чего следует что эти 2 функции просто БЕСПОЛЕЗНЫ, так как они ПРАВИЛЬНО ничего толком поменять не могут…
          я джаже не сумел передать
          вот эту опцию через эти параметры:
          rowList:[10,15,20,25]

          не то чтообы говорить о чем-то другом…

        • Понятно, я тоже ничего конкретного не нашел.

    • Дмитрий

      jQuery(«#treegrid1»).hideCol(['CODE','COMMENT'])

      • user1231

        возник вопрос…
        как с помощью начальных установок (в самом теле яваскрипта)
        (когда он только загружается пользователем и инициализируется)
        задать настройки поиска
        —-
        нужно для опции сохранения параметров для сайта

        (допустим у нас есть таблица пользователь зашел, нажал поиск,
        выбрал данные, они сохранились на сервер (тут проблеем нет они просто передаются скрипту))

        _search true
        filters {"groupOp":"OR","rules":[{"field":"ID_vis","op":"eq","data":"2"},{"field":"ID_user","op":"eq","data":"5"}]}

        а вот как эти данные пихнуть в скрипт при ПЕРВОЙ загрузке кто знает ?

        • Не уверен, что правильно понял вопрос. Но посмотрите статью Передача параметров в JavaScript файлы. Там описаны варианты передачи данных от сервера в JS файлы, и они будут доступны при первой загрузке страницы.
          Т.е. при настройке поиска можно будет использовать что-то вроде

          [{"field":"ID_vis","op":$.searchConfig.op1,"data":$.searchConfig.val1},
        • user1231

          я имел ввиду что
          есть код

          jQuery("#list").jqGrid({
          url:'getdata.php',
          datatype: 'json',
          mtype: 'POST',
          colNames:['ID', 'Фамилия', 'Имя', 'Отчество'],
          colModel :[
          {name:'id', index:'id', width:50}
          ,{name:'surname', index:'surname', width:150}
          ,{name:'fname', index:'fname', width:150}
          ,{name:'lname', index:'lname', width:150}],
          pager: jQuery('#pager'),
          rowNum:5,
          rowList:[5,10,30],
          sortname: 'id',
          sortorder: "asc",
          viewrecords: true,
          caption: 'Данные пользователей',


          который генерируется сервером
          и нужно В ЭТОТ код вставить параметры поиска

          _search true
          filters {"groupOp":"OR","rules":[{"field":"ID_vis","op":"eq","data":"2"},{"field":"ID_user","op":"eq","data":"5"}]}

          так вот как это сделать ?
          как передать тут не имеет значения., имеет значение как это описать в коде

        • Параметры вам известны?

          Если да, то вставляете их так, чтобы в результате получилась строка.

          Например

          [{«field»:»ID_vis»,»op»:»eq»,»data»:»<?php echo $value; ?>»},

        • user1231

          так вот как втавить то ? =)

        • user1231

          я имею ввиду

          rowList:[5,10,30],
          sortname: 'id',

          вот так вставляются варианты кол-ва записей на странице и колонка сортировки,

          так вот меня интересует а как вставить параметры поиска,
          ЧТО НАДО УКАЗАТЬ в конфиге ?
          как вставить сами парачетры в ПХП я знаю…

        • У меня такое ощущение что я чего-то не понимаю и только путаю вас 🙂

          Конфиг формируется на сервере и находится в js файле. Правильно?

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

          Т.е. вместо
          sortname: 'id',
          выводить, например,
          sortname: 'price',
          где price название столбца и его нужно получить из базы.
          Этот момент я правильно понял?

          Если да, то нужно переименовать js файл в php и вставлять новые значения с помощью обычного php кода.
          Возможно в начале этого файла нужно будет отправить заголовок
          header('Content-type: application/x-javascript')

        • user1231

          да, не понимаете =))
          как отправить получить установить я знаю…
          я не знаю как ОПИСАТЬ!!!!

          jQuery("#list").jqGrid({
          url:'getdata.php',
          datatype: 'json',
          mtype: 'POST',
          colNames:['ID', 'Фамилия', 'Имя', 'Отчество'],
          colModel :[
          {name:'id', index:'id', width:50}
          ,{name:'surname', index:'surname', width:150}
          ,{name:'fname', index:'fname', width:150}
          ,{name:'lname', index:'lname', width:150}],
          pager: jQuery('#pager'),
          rowNum:5,
          rowList:[5,10,30],
          sortname: 'id',
          sortorder: "asc",
          viewrecords: true,
          caption: 'Данные пользователей',

          выше был пример кода…
          там инициализация и прочее
          вот…
          мне надо туда вставить код для поиска (как вставлять и какие данные я умею этого не требуется)

          мне нужно узнать ЧТО вставлять туда

          полагаю нечто вроде:

          sortorder: "asc",
          viewrecords: true,
          поиск: true,
          фильтр: [{"field":"ID_vis","op":$.searchConfig.op1,"data":$.searchConfig.val1}],


          так вот мне нужно знать возможно ли так ?
          и если да,
          то какие слова вставлять вместо слов «поиск» и «фильтр»

        • user1231

          как описать стандартные настройки я знаю…
          я не могу описать в ЭТОМ КОДЕ
          данные по поиску
          тоесть в таблице есть кнопка ПОИСК
          пользователь ее нажал сделал запрос
          и получил данные отфильтрованные…

          после этого закрыл страницу (а полученные данные на серваке сохранились)

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

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

        • user1231

          вот так не работает

          _search:true,
          filters: [{groupOp:"OR",rules:[ {field:"ID_vis",op:"eq",data:"2"},{field:"ID_vis",op:"eq",data:"36"}]}],
          sortorder: "asc",
          viewrecords: true,

          параметры sortorder и viewrecords применяются все норм
          а вот параметры _search и filters нет…
          как понимаю они не существуют
          так вот я и хочу узнать а какие существуют чтобы это все заработало =)

        • Кажется я понял 🙂
          Параметры _search и filters не нужно задавать в настройках jqgrid, их плагин формирует сам при отправке запроса.

          Нужно указать в colModel перечень доступных операций сравнения:

          {name:'fieldname', ... searchoptions:{sopt:['eq','ne','bw','cn']}}

          а в общих настройках — поле по которому выполняется сортировка и направление сортировки.
          sortname: 'id',
          sortorder: «asc»,

          Кстати, у меня есть готовый пример поиска.

        • Дмитрий

          var a = jQuery("#treegrid1").getGridParam();
          a.postData — содержит свойства _search, nd, page, rows и тд именно эти свойства отправляются при запросе к серверу в виде post данных, теперь установим новое свойство
          jQuery("#treegrid1").setGridParam({postData:{ids:23}});
          делаем релод таблицы и смотрим в фарефоксе вкладка post параметры, наблюдаем параметр ids в списке пост данных

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

  • user1231

    user1231
    —————-
    хехе
    так У МЕНЯ ВОПРОС И СОСТОИТ В ТОМ,
    что он сам формирует, когда ты заполняешь форму поиска так ?
    а мне нужно
    КАК УКАЗАТЬ В НАСТРОЙКАХ
    чтобы плагин СРАЗУ при ПЕРВОЙ загрузке/инициализации
    уже отправил запрос с фильтром
    чтобы значения, введенные при предыдущем посещении сайта,
    сохранились и были введены автоматически через предустановки
    и первым загрузился уже отфильтрованный список с данными настройками поиска

  • simplecoding

    А зачем тогда вообще с поиском заморачиваться?
    1) Пользователь загружает страницу.
    2) jqGrid отправляет обычный запрос на получение всех данных.
    3) Сервер получает данные о пользователе (из сессии или из БД), с сохраненными настройками фильтра.
    4) Добавляет эти настройки в запрос и отправляет результат посетителю.
    5) Посетитель видит отфильтрованные данные.

  • user1231

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

    а мне нужно как раз его именно вбить во все поля, которые были указаны…

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

  • Илья

    Обращаюсь с огромным уважением к автору!

    Всё вроде супер, Дамп БД импортировал, настройки подключения к БД прописал, при подключении ошбику вроде не выдаёт, но в строке 28, конкретно на отрезке $row = $res->fetch(PDO::FETCH_ASSOC)
    у меня php спотыкается…

  • Напишите, пожалуйста, какую конкретно ошибку выдает php.

  • Илья

    Я уже нашёл и исправил сам, проблема была из-за первого вызова fetch(), при подсчёте кол-ва значений, при повторной попытке SQL стал слёзно просить либо использовать буферизацию, либо пользоваться fetchAll(), т.к. ещё что-то осталось невыбранным. Как потом оказалось, там был пустой элемент массива. Странная какая-то версия sql у моего провайдера…
    Поставил fetchAll в первом вхождении, всё заработало. Потом ещё правда долго парился с json_encode(), но тоже победил 🙂
    Кстати интересную ветку нашёл: http://www.linkexchanger.su/2008/41.html, там в комментариях мне функция понравился json_encode_cyr()

  • Илья

    поправка не «провайдера», а «хостинга»
    и функция «понравилась»
    Спешил просто 🙂

  • Все-таки интересно, какая именно версия MySQL?

  • Макс

    Добрый вечер!
    Такой вот вопрос возник: а если есть необходимость передавать комплексный ключ,то что делать тогда?
    и еще, если вместо id использовать как ключ другое поле, например:
    $response->rows[$i]['id']=$row['name'];
    $response->rows[$i]['cell']=array($row['id'], $row['surname'], $row['fname'], $row['lname']);
    то при нажатии на строку информация выбираться будет правильно, а вот выделение не снимается если нажать на последующую строку, как с этим бороться?

  • 1) Можно использовать extraparam в котором перечислить нужные поля. А на сервере выбирать запись используя их.

    2) Не сталкивался.

  • Макс

    Доброго времени суток!
    Подскажите, пожалуйста, как сделать 2 несвязаные таблицы jqGrid на одной странице? и можно ли из одного поля ввода сделать для обеих таблиц автозаполнение?

  • Макс

    все) разобрался, вопрос снят!

  • Ништяк пример — мне для «затравки» хватило на 100% !
    буду пробовать реальную БД перетращить на это дело

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

    как это реализовать ?

  • Укажите в colModel для нужного поля параметр
    edittype:textarea

  • Димитрий

    Подскажите, пожалуйста, никак не могу найти то, что мне нужно. Нужна таблица, чтобы в ней выводилась информация из базы данных с сортировкой и включающимися фильтрами, которые бы отсеивали выводимую информацию. Например, выводятся следующие данные: марка автомобиля, объем двигателя, цена. Если включен фильтр «Лада», то в таблицу будут загружены только автомобили марки «Лада», если включен еще и фильтр «Москвич», эта марка так же будет загружена. Потом загруженные данные можно отсортировать по любому столбцу.

  • Посмотрите этот пример http://www.trirand.com/blog/jqgrid/jqgrid.html

    (New in version 3.3 — Multiple Toolbar Search).

  • O Turansky

    Подскажите, что это за объект с данными ($response)? Вы к нему обращаетесь
    $response->page = $curPage;
    $response->total = ceil($totalRows['count'] / $rowsPerPage);
    $response->records = $totalRows['count'];
    Этот объект нигде не объявляется, прежде, чем его использовать?

    • В строках, которые вы привели, этот объект создается.

      Если бы это было обращение к нему, то он стоял бы справа от знака присваивания.

      Создание объекта, в данном случае, такое же как и создание массива.
      Вы же можете записать
      $r[] = '111';
      $r[] = '222'; и т.д.

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

  • Serg

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

  • Serg

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

  • Serg

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

  • Сергей

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

    p.s.: смотрел документацию, но так и не понял…

    • Я все-таки дам ссылку на документацию 🙂
      Просто задача не настолько простая, чтобы ее можно было объяснить в рамках комментария.

      Есть пример (Row Editing — Custom edit). Там добавлены три кнопки в первую колонку. Вам нужно добавить только одну, т.е. вставить только один тег input.

      В атрибуте onclick передаете id записи. Получить id можно в цикле при вставке кнопок (так же как и в примере).

      А окно открываете с помощью window.open()

      • Сергей

        jQuery(«#rowed2»).jqGrid({ url:'server.php?q=3', datatype: «json», colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'act',index:'act', width:75,sortable:false}, {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90, editable:true}, {name:'name',index:'name', width:100,editable:true}, {name:'amount',index:'amount', width:80, align:»right»,editable:true}, {name:'tax',index:'tax', width:80, align:»right»,editable:true}, {name:'total',index:'total', width:80,align:»right»,editable:true}, {name:'note',index:'note', width:150, sortable:false,editable:true} ], rowNum:10, rowList:[10,20,30], pager: '#prowed2', sortname: 'id', viewrecords: true, sortorder: «desc»,
        gridComplete: function(){ var ids = jQuery(«#rowed2").jqGrid('getDataIDs'); for(var i=0;i < ids.length;i++){ var cl = ids[i]; be = "»; se = «»; ce = «»; jQuery(«#rowed2»).jqGrid('setRowData',ids[i],{act:be+se+ce}); } },

        вот код с примера, но как соединяется name:'act',index:'act' с input ?

  • Сергей

    Владимир пытаюсь сделать по примеру, но кнопка не появляется((
    подскажите где ошибка в коде?

    jQuery(document).ready(function(){
    var lastSel;
    jQuery(«#list»).jqGrid({
    url:'getdata.php',
    datatype: 'json',
    mtype: 'POST',
    colNames:['№', 'Район', 'Адрес', 'Тип', 'Этаж', 'Этаж-ть', 'Общ', 'Жил', 'Кух', 'В/Сн', 'Угл', 'Тел', 'с/у', 'Ком', 'Б/Л', 'Цена', 'Телефон', 'Фото'],
    colModel :[
    {name:'id', index:'id', width:25, editable:false, edittype:»text»,searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'district', index:'district', width:80, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'street', index:'street', width:148, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'level', index:'type', width:32, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'type', index:'level', width:45, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'all_level', index:'all_level', width:77, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'all_place', index:'all_place', width:40, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'life_place', index:'life_place', width:38, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'kitchen', index:'kitchen', width:33, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'bath', index:'bath', width:40, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'angle', index:'angle', width:30, align:'right', editable:true, edittype:»text»}
    ,{name:'telefone', index:'telefone', width:30, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'bathroom', index:'bathroom', width:26, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'type_room', index:'type_room', width:32, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'balcony', index:'balcony', width:30, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'price', index:'price', width:61, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'firm_telefone', index:'firm_telefone', width:65, align:'right', editable:true, edittype:»text», searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'act',index:'act', width:75,sortable:false}
    ],
    pager: jQuery('#pager'),
    rowNum:5,
    rowList:[5,10,30],
    sortname: 'id',
    sortorder: «asc»,
    gridComplete: function(){
    var ids = jQuery(«#list»).jqGrid('getDataIDs');
    for(var i=0;i < ids.length;i++){
    var cl = ids[i];
    be = "»;
    se = «»;
    ce = «»;
    jQuery(«#list»).jqGrid('setRowData',ids[i],{act:be+se+ce});}},
    viewrecords: true,
    caption: 'Данные пользователей',
    ondblClickRow: function(id) {
    if (id && id != lastSel) {
    jQuery(«#list»).restoreRow(lastSel);
    jQuery(«#list»).editRow(id, true);
    lastSel = id;
    }
    },
    editurl: 'saverow.php'
    }).navGrid('#pager',{view:true, del:true, add:true, edit:true},
    {}, // default settings for edit
    {}, // default settings for add
    {reloadAfterSubmit:false}, // delete instead that del:false we need this
    {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true}, // search options
    {} /* view parameters*/
    );
    });

    • Без отладчика не отвечу 🙂
      Посмотрите что происходит при выполнении
      jQuery(«#list»).jqGrid('setRowData',ids[i],{act:be+se+ce});}},

  • Сергей

    напрягает
    потому как где лежит этот скрипт я не знаю, но что поразительно, ошибки на отсутствие файла нет…

  • July

    Простите за глупый вопрос, но никак не могу разобраться, откуда берутся в массиве POST такие имена переменных (строки 4-7 в скрипте PHP). Скрипт возвращает нулевые значения этих переменных. Где и как их можно объявить?

    • Эти параметры формирует jqGrid.
      Посмотрите с помощью firebug какие параметры отправляются в ajax запросах (вкладка Console). Эта статья написана довольно давно и имена параметров могли поменяться.

  • Макс

    Добрый день!
    А чтобы расположить несколько таблиц последовательно одна за другой горизонтально что надо сделать? помогут ли фреймы или можно как-то проще?

    Спасибо

    • Фреймы, конечно, помогут, но можно и проще 🙂

      Таблица — это набор обычных html элементов, интерактивность добавлена с помощью JavaScript.

      Поэтому вы можете установить для таблицы любые CSS стили. Например,

      float:left

      • Макс

        Спасибо!
        И еще вот такой вопрос: а можно ли в таблице сделать выплывающую подсказку при наведении (нажатии) на ячейку определенного столбца? причем, информация в подсказке -запрос из базы.

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

          Но вы всегда можете «повесить» на ячейки таблицы свой обработчик нужного события (например, клика мышкой). И отправить из этого обработчика ajax запрос, который вернет текст подсказки.

  • Pntvn

    Спасибо за интересную статью. Но это вы работаете с материнской таблицей. А с дочерней таблицей Как?

    • Поясните, пожалуйста, что именно вы хотите сделать. Для jqGrid без разницы с какой таблицей вы работаете. Он получает данные от сервера в виде таблицы, а как они сформированы — для него не важно.

    • jqGrid без разницы с какой таблицей вы работаете. Он «видит» только то, что передает ему серверный скрипт. А откуда серверный скрипт берет эти данные (из базы, текстового файла или внешнего ресурса) jqgrid ничего не знает.

  • Димыч

    Всем привет,

    возможно не в тему но все же возникла проблемка….

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

    • Вы хотите добавить scroll для ячейки?
      Попробуйте использовать
      overflow: scroll

      • Димыч

        overflow: scroll
        не сработал

        • Зафиксировать высоту с помощью height или max-height пробовали?

        • Димыч

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

        • У меня получилось, но только при использовании дополнительного div'а внутри ячейки.
          http://jsfiddle.net/5VFSY/

        • Димыч

          все гениально и просто 🙂 Спасибо!

        • Димыч

          Как вам такой вариантик…..
          formatter: function(v) {
               return » + v + »;
          },

        • Я бы не добавлял CSS правило в атрибут style. Лучше использовать class и внешнюю таблицу стилей, т.к. упрощается поддержка.

  • Scavengerr-86

    ухты! впервые вижу чтобы так быстро реагировали на комменты! супер так держать!
    и у меня есть вопросик:)
    подскажите плиз, как записать все данные из таблицы в pdf файл, не могу никак вспомнить! а примеры на оф. сайте используют формирование таблицы в файлах php, а у меня в js.

    • Не встречал JS библиотек, которые могут генерировать pdf. Поэтому, скорее всего, вам придется отправлять содержимое таблицы на сервер, генерировать там pdf и отдавать его посетителю.

      • Scavengerr-86

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

        • Да, есть. Но на клиентской стороне только кнопка, клик по ней отправляет запрос серверу, который и формирует pdf.

        • Scavengerr-86

          Вот именно кнопка меня и интересует, по указанной вами ссылке настройки таблицы указываются с помощью php, а я использую js
          http://www.trirand.com/blog/?page_id=6

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

        • Scavengerr-86

          Вы пытаетесь помочь и это очень здорово, но вас куда то понесло:)
          Мне всего лишь нужна кнопка (pdf). 

        • Кажется дошло 🙂

          jQuery('#grid').jqGrid('navGrid','#pager'
              ,{
                  «edit»:false,
                  «add»:false,
                  «del»:false,
                  «search»:true,
                  «refresh»:true,
                  «view»:false,
                  «excel»:false,
                  «pdf»:true,
                  «csv»:false,
                  «columns»:false
              }

          );

          jQuery('#grid').jqGrid('navButtonAdd','#pager',{id:'pager_pdf',caption:»,title:'Export To Pdf',onClickButton : function(e)
          {
              try {
                  jQuery(«#grid»).jqGrid('excelExport',{tag:'pdf', url:'grid.php'});
              } catch (e) {
                  window.location= 'grid.php?oper=pdf';
              }
          }, buttonicon:'ui-icon-print'}); });

        • Scavengerr-86

          «excel»:true,»pdf»:true,
          «csv»:true,
          «columns»:true

          ни один не сработал 🙁
          Повторюсь я использую бесплатную версию…
          http://www.trirand.com/blog/?page_id=6

        • У меня получилось. Запаковал код в архив. Серверную часть не делал, только код добавления кнопки.
          Удачи 😉

        • Кажется дошло 🙂

          jQuery('#grid').jqGrid('navGrid','#pager'
              ,{
                  «edit»:false,
                  «add»:false,
                  «del»:false,
                  «search»:true,
                  «refresh»:true,
                  «view»:false,
                  «excel»:false,
                  «pdf»:true,
                  «csv»:false,
                  «columns»:false
              }

          );

          jQuery('#grid').jqGrid('navButtonAdd','#pager',{id:'pager_pdf',caption:»,title:'Export To Pdf',onClickButton : function(e)
          {
              try {
                  jQuery(«#grid»).jqGrid('excelExport',{tag:'pdf', url:'grid.php'});
              } catch (e) {
                  window.location= 'grid.php?oper=pdf';
              }
          }, buttonicon:'ui-icon-print'}); });

  • Димыч

    Всем привет,
    как передать дополнительные данные (кроме oper и id) при удалении записи из таблицы jQgrid?

    Заранее спасибо!

  • Димон

    Всем привет.
    Думаю с такой проблемой сталкивались многие…
    Как добавить/редактировать картинку в таблице jQgrid?
    Поиск в сети не дал результата.
    Поэтому решил отписаться тут, подскажите куда копать, где искать?
    Заранее спасибо.

    • Посмотрите здесь и здесь.

      • Димон

        проблем с отображением картинок в таблице нет, как быть дальше?
        куда вписать enctype=»multipart/form-data»?

        • Вы хотите отправлять картинки через inline редактор? Этот редактор отправляет данные с помощью ajax запроса, т.е. приаттачить картинку не получится.

  • Homa

    Одно непонятно $limit и $start в начале пхп скрипта значений никаких не получают. Откуда брать? Поясните пожалуйста. Спасибо.

    • Укажите, пожалуйста, строку в которой вы нашли $limit и $start

  • Подскажите пожалуйста…. использую filtertoolbar и хочу чтобы при клике на фильтр по дате появлялось окошко datepicker…и + нормально сортировало по дате… Связка jqgrid + java

    • 1) Подключение datepicker.
      Есть довольно много datepicker-плагинов для jQuery, но проще всего будет использовать datepicker из jQueryUI, тем более, что jQueryUI у вас практически наверняка уже подключен.
      Для подключения нужно определить id текстового поля при редактировании которого будет появляться datepicker.
      Т.е. код будет примерно таким:

      jQuery(«#gs_item_date»).datepicker({dateFormat:»yy-mm-dd»});

      Только нужно убедиться, что подключение datepicker'а выполянется после создания таблицы.

      Пример можно посмотреть здесь (Integrations -> UI datepicker)

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

  • Natair

    А как этот текст переделать под Postresql? Пробовал сам, но из-за LIMIT выдавало ошибки, как переписат именно этот момент?

    • У PostgreSQL немного отличается формат запроса
      SELECT select_list
      FROM table_expression
      [LIMIT { number | ALL }] [OFFSET number]

  • Иван

    Владимир, доброго времени суток, возникла следующая проблемка, когда getdata.php выбирает данные по запросу, но их нету, то основная табличка с данными (сам грид) пишет Загрузка… помогает только перезагрузка страницы. а firebug пишет TypeError: a is undefined load. Но если есть хоть одна запись, то все работает прекрасно.

  • Alex

    Добавил проверку параметров, работает.
    $rowsPerPage = (int)$_POST['rows'];
    if ($rowsPerPage <= 100)
    {
    $rowsPerPage = $rowsPerPage;
    }
    else
    {
    echo "Ошибка, неверное количество строк на странице";
    }
    Создал ошибку (задал больше страниц в самой таблице), защита сработала, НО не вывелось сообщение об ошибке.
    Подскажите почему?
    Хотя о синтаксической ошибке (специально добавил лишнюю скобку) – сообщение вывелось.
    Спасибо.

    • Посмотрите с помощью firebug какой ответ возвращает сервер когда $rowsPerPage > 100. Обратите внимание на http код ответа сервера. Сравните этот код с кодом в ответе при возникновении синтаксической ошибки.

  • Maximiljan

    В каком месте мы указываем название таблицы БД, чтобы сосать оттуда данные?

    • При отправке запроса (строка 20)

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

  • Maximiljan

    А в каком месте мы ссылаемся на имя таблицы mysql чтобы высосать оттуда данные?

  • Guest

    В какой строчке кода php написано, что необходимо брать данные именно из БД users? 20?

  • Maximiljan

    Я хочу избранные строчки пометить жёлтым. Очень удобно это делать с помощью функции multiselect: true . Как сделать, чтобы сохранился фон избранных строчек при перезагрузке страницы?

    • Вам нужно будет запомнить выбранные строки (например, в сессии) и при формировании таблицы подсветить их с помощью функции setSelection

      • Maximiljan

        А можно по-другому сделать уникальный фон для некоторых строк, если таблица будет генерироваться из БД?

  • Евгений

    Странно, сделал все, как написано, но у меня даже getdata.php не подключается. Для проверки в самое начало ему прописал echo «Hello, world». Ничего не выводится.

    • Посмотрите с помощью firebug или инструментов в chrome, уходит ли ajax запрос к getdata.php

  • Kos

    Скажите пожалуйста где можно посмотреть как
    реализовать динамически создаваемый jQuery-плагин tabs с jqgrid ?

  • Владислав

    Уважаемый Владимир!.Пожалуйста не могли бы Вы научить как сделать точно такую же табличку http://jqgrid-php.net/doku.php как «Живой пример» .
    Нужны именно эти параметры таблицы в том числе и экспорт в ексель. Не силено уж я понял как подключить эти опции .. .. ваш пример из ваших кодов заработал с полтычка а вот шаг в сторону — растреляли 🙂

  • kot_k_k

    Спасибо, пример прекрасный — вот только выводит пустую таблицу. PHP проверял — массив $response формирует, т.е. данные должен передавать, а вот на вывод никак. Где грабли?

    • kot_k_k

      кодировка, блин.

      • Можете где-нибудь выложить Вашу страницу?

        • kot_k_k

          пример Ваш + пример с jqgrid_edit (тоже Ваш) — менял только логин/пароль, отдельно php работает и json выводит — а в грид никак.
          Вот так выводит грид php.
          {«page»:1,»total»:6,»records»:6,»rows»:[{«id»:»1",»cell»:[«1",»Ivanov»,»Ivan»,»Ivanovich»]},{«id»:»2",»cell»:[«2",»Petrov»,»Petr»,»Petrovich»]},{«id»:»3",»cell»:[«3",»Sidorov»,»Sidor»,»Sidorovich»]},{«id»:»4",»cell»:[«4",»Sergeev»,»Serg»,»Serdeevich»]},{«id»:»5",»cell»:[«5",»Vasiliev»,»Vasil»,»Vasilievich»]}]}

        • По Вашему описанию определить проблему не получится. Сделайте, пожалуйста, скриншот вкладки Сеть (network) в firebug или инструментах разработчика chrome. Если появляются js ошибки, то нужен скриншот вкладки console.

        • kot_k_k

          вот скрин.

        • kot_k_k

          или вот это надо было, сорь если не правильно.

        • Правильно, а теперь посмотрите что показано на вкладках Preview и Response. Там должен быть ответ сервера.

        • kot_k_k

          Вот — массив есть.

        • В ответе не должно быть никакого текста кроме данных в json формате. Т.е. <br> и warning нужно убрать.

        • kot_k_k

          большое спасибо.
          ругалось на $response->page = $curPage;
          хотя перед этим добавил $responce = new stdClass();
          воткнул error_reporting( E_ERROR );
          усе заработало.
          вот еще бы выпадающий список прикрутить:)

        • Это несложно. Есть пример http://trirand.com/blog/jqgrid/jqgrid.html -> Row Editing (new) -> Input types

        • kot_k_k

          Спасибо, интуитивно чувствую, что должно быть все довольно просто, но где конкретно «ставить галочку» — не до конца понимаю.
          «Чую что литра, а доказать не могу» (с) Чапаев В. И.

        • 🙂

  • Alex

    А можно вопрос: пытаюсь подключиться к БД, но таблица пустая… данные (host, name, psw…) подключения правильные (стандартные, через mysql — работает), импортировал таблицу с примера, но все равно не катит…

    • Alex

      Просмотрел предыдущие замечания, все гуд)

  • German Kyznetsov

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

    • Для подключения к базе mysql нужно указать 5 параметров:
      1) имя пользователя — user
      2) пароль — pass
      3) название базы данных — name
      4) ip адрес сервера на котором работает mysql — если mysql работает на том же компьютере, что и приложение, то можно указать localhost
      5) порт, который использует mysql — по умолчанию 3306, можно не указывать если его явно не изменяли в конфиге.

      Эти параметры нужно укзать в строке:
      $dbh = new PDO('mysql:host=localhost;dbname=name', 'user', 'pass');