jQuery Grid Plugin – FAQ на основе комментариев

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

jqgrid faq

Когда я опубликовал в этом блоге первую статью о jqGrid, то даже приблизительно не представлял насколько актуальной окажется эта тема.

Комментарии посыпались как из рога изобилия 😉 и чтобы ответить на них ушло гораздо больше времени чем на сами статьи. Фактически часть моих статей о jqGrid была ответами на вопросы, заданные к предыдущим статьям.

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

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

Но хочу предупредить. Нет никакой гарантии, что ответы, приведенные здесь, подойдут для вашего конкретного случая. Это не официальная документация к плагину. На какие-то вопросы ответы давал я, на какие-то – другие читатели, на какие-то – автор вопроса сам находил ответ. Кроме того, на некоторые вопросы нет развернутых ответов, только подсказки или ссылки на документацию. Также учитывайте, плагин развивается, в новых версиях появляются дополнительные возможности и, возможно, со временем какие-то ответы станут не актуальными.

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

Кстати, если кому-то интересно, в этом блоге опубликовано 7 статей о jqGrid и более 650 комментариев к ним.

Прежде всего, привожу список статей.

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

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

jqGrid – поиск данных

Управление jqGrid с помощью поля с автозавершением

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

jqGrid, форма с автозавершением и поиск

Использование jqGrid вместе с Yii фреймворком

Как изменить размер отображаемой таблицы?

Ширина столбцов указывается при создании таблицы.

jQuery("#list").jqGrid({
…
width:919,
height:230,
…
});

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

Если ширина фиксированная, её можно указать при создании таблицы.
«Плавающих» решений я нашел 2: раз и два.
Оба используют JS, т.е. похоже, что с помощью настроек или только CSS сделать это нельзя.

Как изменить высоту строки, высоту заголовка, а так же их шрифт?

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

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

Поддерживает ли jqgrid динамическое изменение количества полей?

На stackoverflow есть обсуждение этой темы.

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

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

Укажите в colModel для нужного поля параметр

edittype:textarea

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

Есть обсуждение этой темы с решением.

Можно ли фильтр не отображать в некоторых столбцах?

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

Как передать при клике по кнопке id текущей строки в php код?

Используйте событие loadComplete.

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?id_group="+cl+"' rel="nofollow"gt;Добавить</a>";
		jQuery("#list").setRowData(ids[i],{act:be})
	}
},

Как можно передать GET переменную в таблицу и отправить её на сервер?

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

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

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

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

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

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

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

Как можно изменить ширину формы редактирования/добавления записи?

В примерах только

jQuery("#grid_id").editGridRow(rowid, {width:777});

но хочется изменить её ширину для всех вызовов, а не только для этого.

Вариант

ondblClickRow: function(rowid){
	var gr = jQuery("#listobj").getGridParam('selrow');
	if(gr != null) jQuery("#listobj").editGridRow(gr,{width:777});
	else alert("Выберите строку");
}

Не подходит, т.к. в этом случае ширина формы изменяется, но только при возникновении события ondblClickRow, а во всех остальных случаях используется значение по-умолчанию.

Решение.

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

Перед шириной обязательно нужно указать и высоту.

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

jQuery("#list").trigger("reloadGrid");

Как работает Summary Footer Row?

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

Существует функция tableToGrid(«#mytable»);
которая преобразует html таблицу в jqGrid, а есть обратная возможность?

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

Можно ли его настроить jqGrid так, чтобы в таблице были заголовочные строки сверху и слева (сводная таблица)?

Да, но придётся передавать в XML все тексты для колонок.

Где можно поменять надпись «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}"
},
...
} 

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

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

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

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

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

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

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

Устанавливаем обработчики событий.

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

Как сделать множественный фильтр?

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

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

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

Как в jGrid шапку таблицы сделать многострочной?

Например, столбцы заданы следующим образом.

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

Называются столбцы: id, date, uul.

В шапке тыблицы находятся в <div> с уникальным id, который состоит из префикса jqgh_ и имени столбца, например, jqgh_date.

Далее указываем с помощью CSS нужную высоту дива

#jqgh_date, #jqgh_uul {
	height: 3em;
}

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

Существует модуль Import/Export, он позволяет импортировать и экспортировать настройки таблицы.

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

Каким образом передать комплексный ключ? И можно ли вместо id использовать как ключ другое поле?

Да, можно.
С помощью extraparam можно передать значения любых полей на сервер. А на серверный скрипт должен выбирать запись используя их.

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

Возьмем пример из документации (Row Editing — Custom edit). Там добавлены три кнопки в первую колонку. Вам нужно добавить только одну, т.е. вставить только один тег input.

В атрибуте onclick передаете id записи. Получить id можно в цикле при вставке кнопок (так же как и в примере).

А окно открываете с помощью window.open()

Как добавить проверку введенных данных перед отправкой на сервер и узнать добавилась ли запись?

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

beforeSubmit: function() {
var ret=[false,"The value is not valid"];
return ret;
},

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

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

Как спрятать столбец таблицы сразу после её загрузки?

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

Как определить номер выделенной строки в таблице? Метода getSelection я не обнаружил в доках.

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

var selRow = $('tr.selected').attr('id'); 

UPD. Tony Tomov нашел подходящий метод

$("#grid").jqGrid('getGridParam','selrow')

и хороший вариант предложил BuCeFaL — использовать событие onSelectRow, которое передает параметр id строки.

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

Панель навигации включается параметром

pager: jQuery('#pager')

в настройках плагина.

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

Значение по-умолчанию можно указать в настройках плагина:

editoptions:{defaultValue:'MAG'}}, 

Можно ли сделать экспорт таблицы в Excel?

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

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

С помощью js ее можно добавить так.

$("#mygrid").jqgrid({
...
"excelexport":true,
}); 
Таблица не заполнена данными, с чем это может быть связано? 

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

Как добавить кнопку button на каждую строку, чтобы при нажатии открывалось активное окно в которое передавался бы id элемента строки?

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

Могу ли я и как с помощью FIREBUG увидеть сформированный sql-запрос? Необходимо для отладки php скрипта, т.к. таблица получает данные в неправильном формате.

Чтобы увидеть запрос firebug'ом, его нужно отправить браузеру. Попробуйте использовать расширение firePHP.
У меня есть две статьи о нём.

1) Программирование на PHP. Использование FirePHP для отладки web приложений.

2) Программирование на PHP. Подключаем FirePHP к фреймворку CodeIgniter.

Альтернативный вариант – создать лог на сервере и записывать данные в него.

При работе с jqGrid использую кодировку windows-1251. При формировании запроса к БД кодировка каким-то образом изменяется и в зарос подставляется параметр в кодировке отличной от windows-1251 (русский текст не читается). Подскажите где искать ошибку?

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

$par1 = $this->input->post('par1');
$par1 = mb_convert_encoding($par1,'windows-1251','utf-8');

Как вставить в поле ввода даты календарик?

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

editoptions:{dataInit: function (elem) {$(elem).datepicker({dateFormat:"dd/mm/yy"});} } }

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

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

Нужны такие настройки
1) указать ширину столбцов в colModel

colModel :[
{name:'city', index:'city', width:350},
{name:'country', index:'country', width:350}
],

2) указать общую ширину страницы
width: 400,

3) запретить сжатие столбцов
shrinkToFit:false,

Как при добавлении новой записи отправить файл на сервер?

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

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

Присвоить заранее Id для кнопки (при ее создании).
Удаление можно выполнить обычным (для jQuery) способом.
$("#xxxxx").remove();

Можно ли форму поиска конструировать самому и в дальнейшем передавать параметры поиска в jqGrid?

Можно используйте appendPostData.
Он позволяет передать дополнительные параметры в запросе.

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

Хотите стать квалифицированным программистом? Курсы php дадут необходимые вам знания.

  • Pingback: Tweets that mention jQuery Grid Plugin – FAQ на основе комментариев -- Topsy.com()

  • BuCeFaL

    «Как можно передать GET переменную в таблицу и отправить её на сервер?»
    разве нельзя просто установить параметр url в jqGrid через setGridParam ?

    Тем кому нужно передать свои данные POST ом, используйте beforeRequest.
    beforeRequest: function(){
    var postData = $(this).getGridParam('postData');
    postData.some = $('#MyCustomInput').val();
    postData.customData = $('#MyCustomInput2').val();
    $(this).setGridParam('postData',postData);
    }

    http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods (документация со всеми методами)

    «Как добавить title к заголовкам таблицы»
    http://www.trirand.com/blog/?page_id=393/feature-request/adding-title-attribute-to-grid-table-headers/#p14824

    код:

    var thd = $(«thead:first», grid.hdiv).get(0);
    var colNames = grid.getGridParam('colNames');
    if (colNames !== undefined && colNames !== null) {
    for (var i = 0; i < colNames.length; i++) {
    var name = colNames[i];
    if (name !== undefined && name.length != 0)
    $("tr th:eq(" + i + ")", thd).attr("title", name);
    }
    }

    Огромное Спасибо автору за проделанную работу !

    • Да, вы правы, так сделать можно. Это еще один вариант решения проблемы.
      Вообще, это не единственная задача, которую можно решить несколькими способами.

      И я немного не удачно сформулировал вопрос. Обычно я использовал beforeSubmitCell для отправки POST запроса.
      Вообще мне кажется логичным перехватить отправку запроса и добавить в него дополнительные параметры.

  • Как определить номер выделенной строки в таблице? Метода getSelection я не обнаружил в доках.

    >> $(«#grid»).jqGrid('getGridParam','selrow')

    • BuCeFaL

      Есть событие onSelectRow которое передает параметр id строки.

      • Большое спасибо!
        Я добавил оба варианта.

  • AlexTix

    А не подскажете как сделать редактирование доступное только пользователям, а не гостям сайта?

    • jqGrid — это клиентский скрипт. Т.е. по-большому счету вы не можете контролировать действия пользователя.
      Заблокировать редактирование можно только на стороне сервера. Т.е. в php скрипте проверить права пользователя и в зависимости от результата редактировать запись в БД (или не делать этого).

      • AlexTix

        Большое спасибо, в php я не силен, вот если бы примерчик, был бы очень Вам благодарен.

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

  • AlexTix

    Вопрос про экспорт таблицы в Excel с помощью js , при добавлении кода «excelexport»:true, значек экспорта не появляется, в чем может быть проблема?

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

      • AlexTix

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

        • JS клиентский скрипт, он выполняется в браузере, php — на сервере, т.е. они не взаимозаменяемые.

  • Dimon_lanec

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

    я изменяю размеры так:
    grid_1.setGridHeight(_h);
    grid_1.setGridWidth(_w);

    • Ширина таблицы задается при ее создании в пикселах. Свойства width и height. Насколько я знаю, динамически она не изменяется. Т.е. вы все правильно делаете.

  • Alexander Plutov

    Cubique — datagrid for Zend Framework and jQuery http://plutov.by/post/cubique_zf_jquery

  • DK

    Здравствуйте!
    Интересует следующее.
    Есть таблица А в базе Б. В таблице А есть 1 столбец, к примеру name.
    Вопрос такой. Как я могу отредактировать данные столбца name в таблице А.
    Во всех примерах, связанных с изменением данных. Редактирование происходит всех полей кроме первого, как пример с такими названиями (CustomerID, ID), эти же поля есть и в базе. У меня же в базе 1 поле, создавать еще одно в виде идентификатора я не хочу.
    Хотелось бы получить помощь в реализации.
    То есть вне зависимости от количества полей в базе при загрузке страницы создать поле с неким ID значение которого $n=1;
    а в строчке таблицы $n++.
    ну вот как то так.
    или если есть другой способ напишите, буду очень признателен.

    • >> создавать еще одно в виде идентификатора я не хочу

      Почему? Одним из основных требований к таблицам в реляционной БД является наличие поля значения которого уникальны для всей таблицы. Этим полем может быть name, но только до тех пор, пока его значения не повторяются, иначе вы не сможете однозначно указать какую строку вы хотите отредактировать/удалить.

      Для ID можно указать auto_increment и значения будут устанавливаться автоматически.

  • Alexey

    нашел баг, если установлена loadonce:true,, тогда не срабатывает кнопка удаления строки, выдает ошибку  H.split is not a function. Кто с таким сталкивался? как решать?

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

      • Alexey

        все что подключал:
        jquery.js
        jquery-ui.custom.min.js
        jquery-ui.custom.css
        ui.jqgrid.css
        grid.locale-ru.js
        jquery.jqGrid.min.js

        • Вопрос в jquery.jqGrid.min.js. Когда вы качаете плагин с оф. сайта, вы можете выбрать набор модулей, которые будут в него входить. Выберите все и попробуйте запустить скрипт.

        • Alexey

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

  • Иван

    Как сделать выделение строки другим цветом, по условию, например определенная ячейка в строке равна 15.

    • Есть готовое решение.

      • Иван

        Спасибо! ))

        • Иван

          Рано сказал спасибо, по ссылке 2 варианта, первый ругается на функцию: rowsToColor. Второй вариант не обрабатывает условие, закрашивает всё красным.

        • Если я ничего не путаю, rowsToColor не функция, а массив. Какая именно ошибка возникает?

          > Закрашивает красным
          Это уже половина дела, остается поправить условие 😉

        • Иван

          в первом варианте, ошибка возникала из-за необъявленного массива, однако его объявление не принесло результата. второй пример закрашивает все целиком красным. Я хочу, чтобы столбец в котором стоит no был красным.
          loadComplete: function(data){ $.each(data.rows,function(i,item){ if(data.rows[i].id>50){ $(«#» + data.rows[i].id).find(«td»).eq(9).css(«color», «red»); } }); },
          вот такое условие работает.
          loadComplete: function(data){ $.each(data.rows,function(i,item){ if(data.rows[i].ready=»no»){ $(«#» + data.rows[i].id).find(«td»).eq(9).css(«color», «red»); } }); },а вот такое нет, как понимаю ошибка кроется в условии, даже на 99% либо в кавычках, либо в присвоении. пробовал и в одинарных и в двойных. Ткните курсором пжа, что не так делаю ))

        • У меня большая просьба. Выложите код с которым вы эксприментируете на http://jsfiddle.net/ (или любой другой ресурс). Иначе очень сложно воспроизвести ваши ошибки.

  • aaa

    как загрузить данные в jqGrid из 2 таблиц одновременно, одна из которых ссылается на другую?

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

  • Jedi

    Как можно получить текст SQL запроса, который отправляет jqgrid, чтобы сохранить его для последующей обработки???

    • jqGrid не отправляет SQL запросов. Он отправляет только параметры поиска на основе которых ваш серверный скрипт должен сформировать SQL запрос. Параметры передаются в массиве $_POST.

      • Александр General

        Владимир привет! Подскажи можно ли сохранять в jqgrid результаты последней выборки (сортировки, фильтра, поиска), что бы человек заходя в очередной раз на страничку получал таблицу автоматически исходя из последнего запроса?

        • Непосредственно в jqGrid сделать этого нельзя. Данные пользователя можно сохранить либо в сессии на сервере, либо с помощью JS сохранить в хранилище браузера.

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

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

        • Александр General

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

        • Хранение всего запроса в базе потенциально создаёт проблему.
          Что будет если Вы внесёте доработки в приложение, которые будут затрагивать структуру таблицы?
          Скорее всего, запрос будет выполнен с ошибкой. Т.е. после обновления кода на продакшен сервере все пользователи, которые работали раньше с приложением получат ошибку.
          Поэтому я бы всё-таки хранил параметры запроса, а не весь SQL запрос.

        • Александр General

          Прикрутить бы заплаточку с jquery.cookie.js — цены б тогда jqgrid не было

        • А в чем проблема? Вы можете использовать этот плагин параллельно с jqGrid.

  • MaryAnn

    Спасибо за статью. Я уже спрашивала по поводу объеденения строк в таблице, нашла решение в JQuery как объеденить два массива(http://allineed.ru/ru/jquery-articles/77-arrays/92-jquery-working-with-arrays.html), но как сделать с двух строк эти два массива, и как к кнопке подключить это действие с обновлением имени по id этого нового массива? Буду очень благодарна за всё советы)))))

    • Всё-таки не доконца понятна идея. Что подразумевает операция объединения факультетов? Должен появиться новый факультет в который входят кафедры из тех факультетов, который вы объединяете?

      Если да, то на мой взгляд, лучше изменить интерфейс.
      1) На странице со списком факультетов пользователь добавляет новый факультет (на данный момент к нему не привязана ни одна кафедра).
      2) На странице управления кафедрами — привязывает к новому факультету соответствующие кафедры. После этой операции к факультетам, которые объединяют не должно быть привязано ни одной кафедры.
      3) На странице управления факультетами пользователь удаляет старые факультеты.
      4) Кнопку «Объединить факультеты» убираем.

  • igor

    А возможно выделить цветом стоки стеки в зависимости от содержимого параметров записей?

  • Александр General

    Владимир, могли бы вы помочь исправить стили таблицы jqgrid? Требуется перенести строку с иконками (inline) снизу наверх и увеличить в 2 раза размеры иконок. Как это сделать? Перерисовывать спрайт надо? Можете ли вы перерисовать?
    Напишите мне я доступ к сайту дам 7454585@gmail.com

    • Одной перерисовкой спрайтов вы, скорее всего, не обойдетесь. Как минимум придется исправить CSS стили. Фактически вам нужно будет создать свою тему jQuery UI http://jqueryui.com/themeroller/
      Я этим раньше не занимался, поэтому помочь не смогу.

  • MaryAnn

    Доброго времени суток, у меня вопрос на счет передачи переменных в сессии.
    Здесь фрагмент кода php-файла, где надо подключить jqGrid-таблицу со списком групп, которые относятся к факультету, что определен в сессии, все группы всех факультетов мне удалось подключить, но как сделать, чтоб можно было подключить только группы выбранного факультета(4, а не все 40):
    <?php
    if(!defined("IN_ADMIN")) die;
    require "query.php";
    mysql_query("SET NAMES 'utf8';")
    or die;
    $post_group_name=mysql_escape_string(trim($_POST['group_name']));
    $post_fakultet=mysql_escape_string(trim($_POST['fakultet']));

    echo("Вибір групи.»);
    echo(«»);
    echo(«»);
    echo(» Група : «);
    echo(«»);
    echo(«»);
    selectCommonChecker(«group_name», $group_from_specialty_query, «gid», $post_group_name, «gname»);// здесь будет расскрывающийся список групп на основе запроса из файла query.php
    echo(«»);
    //а здесь будет таблица со спиком групп

    jQuery(document).ready(function(){
    var lastSel;
    jQuery(«#list1").jqGrid({
    url:'dekanat_new_getdata_groups.php',
    datatype: 'json',
    //width: 'auto',
    height:'300',
    mtype: 'POST',
    colNames:[ '#','Курс','Назва групи' ],
    colModel :[
    {name:'id', index:'id', width:40, align:'left', editable:true, edittype:»text», resizable: false, hidden:true,searchoptions:{sopt:['eq','ne','bw','cn']}}
    ,{name:'num_kurs', index:'num_kurs', width:185, align:'left', editable:false, edittype:»text», resizable: false}
    ,{name:'nazva_grupu', index:'nazva_grupu', width:185, align:'left', editable:false, edittype:»text», resizable: false}
    ],
    pager: jQuery('#pager1'),
    rowNum:20,
    rowList:[20,30,40],
    sortname: 'id',
    scrolling: true,
    sortorder: «asc»,
    viewrecords: true,
    multiselect: true,
    imgpath: 'themes/basic/images',
    caption: '___Управління групами___',
    loadtext: 'Завантаження …',
    ondblClickRow: function(id) {
    if (id && id != lastSel) {
    jQuery(«#list1»).restoreRow(lastSel);
    jQuery(«#list1»).editRow(id, true);
    lastSel = id;
    }
    },
    editurl: 'dekanat_new_saverow_groups.php',
    }).navGrid('#pager1',{view:false,edit:true,add:true,del:true,search:true},
    {closeOnEscape:true, jqModal:true},// default settings for edit
    //{closeOnEscape:true, closeAfterAdd:true},// default settings for add
    {closeOnEscape:true, jqModal:true, closeAfterAdd:true},// default settings for add
    {reloadAfterSubmit:true, jqModal:true}, // delete instead that del:false we need this
    //{closeOnEscape:true, closeAfterDel:true}, // delete instead that del:false we need this
    {closeOnEscape:true, multipleSearch:true, closeAfterSearch:true},// search options
    {}// view parameters
    );
    });

    query.php:

    Но как привязать к JqGrid-таблице со списком групп запрос query.php? как ето норм сделать учитывая особенности сессии?
    Помогите вияснить етот вопрос…
    Буду очень благодарна за любую помощь)))

    • Я может быть что-то пропустил, но в вашем примере в сессии сохраняется только значение $_SESSION['user_description'], факультет вы в сессии не сохраняли.

      >> как привязать к JqGrid-таблице со списком групп запрос query.php?

      Никак. JqGrid работает в браузере, а query.php — на сервере. Т.е. JqGrid может получить данные только одним способом — отправить ajax запрос на сервер. Исходя из ваших настроек, запрашиваться будет dekanat_new_getdata_groups.php. В этом скрипте вы должны сформировать список из нужных групп. Т.е. включить в условие SQL запроса id факультета. Хранить id факультета в сессии, по-моему, не лучшее решение. Возможно, у вас есть какие-то причины, делать именно так. Но я бы использовал другой подход — передавал id факультета в параметрах запроса. У меня есть статья в которой рассказывается как это сделать Управление jqGrid с помощью поля с автозавершением.

      • MaryAnn

        Причиной подключить группы по факультетах в сессии таковы, что есть 10 факультетов, и каждый входит в систему под своим логином и паролем, и соответственно когда логинится факультет 1, то должны быть доступны группы только этого факультета, а не факультета 2,(у него другой логин и пароль и соответственно другие группы прикреплены. Передавать id факультета в запросе хорошая идея которая посещала меня, но я не знала как это правильно реализовать программно….Сейчас буду читать и изучать статью, что вы посоветовали : Управление jqGrid с помощью поля с автозавершением.)))

  • Groomsha

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

    jQuery(document).ready(function(){
    jQuery(«#table»).jqGrid({
    url: 'test.php',
    imgpath: 'css/flick/images',
    datatype: 'json',
    height: 'auto',
    width: 1050,
    sortname: 'id',
    sortorder: «asc»,
    mtype: 'POST',
    colNames: ['id', 'Перейти на страницу', 'notes'],
    colModel: [ {name:'id', index:'id', width:320, align:'left', sortable:false, search:false},
    {name:'data', index:'data', width:320, align:'left', sortable:false, search:false},
    {name:'notes', index:'notes', width:320, align:'left', sortable:false, search:false}],
    rowNum: 50,
    viewrecords: false,
    shrinkToFit: false,
    hidegrid: false,
    loadonce: true
    });
    });

    В подсказке видно что ссылка есть но перейти по ней не выходит — не активно

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

      • Groomsha

        Спасибо, интересное решение но уже применил такой подход http://stackoverflow.com

  • Tatjana

    При работе с jqGrid использую кодировку windows-1251, база тоже в windows-1251. Почти все проблемы связанные с перекодировкой решены, но вот сортировка с кирилицей не работает правильно. Подскажите, где искать причину.

    • Покажите, пожалуйста, пример. Возможно проблема связана с самой кодировкой.

  • Tatiana

    Построила таблицу, теперь хочу в добавленную строчку записать сумму столбца. Строчку добавила: footerrow : true, сумму посчитала, а как записать значение в добавленную строчку не могу разобраться. Подскажите, пожалуйста.

    • Возможно, вам подойдет этот пример

      • Tatiana

        Спасибо, работает. Только вот сумму считает только данных на одной странице. А нет ли примерчика, где можно подсчитать сумму в колонке по всей базе? Или это уже нужно делать только через запрос к базе?

        • Это можно сделать только через запрос к базе, т.к. jqgrid получает только одну страницу с данными и об остальных значениях ничего не знает.