jQuery Grid Plugin – "продвинутое" решение для создания таблиц
Сегодня речь пойдет о плагине для 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).
Все, задача решена. Если хотите поэкспериментировать, качайте архив с примером
Заключение
Этот пример не раскрывает и 10% возможностей плагина. Например, вы можете встраивать inline редакторы для строк, изменять оформление, использовать другие форматы данных (тот же xml), создавать вложенные таблицы и т.п.
В общем, очень удобный инструмент.
Если у вас возникли вопросы, есть советы или замечания, не стесняйтесь, пишите их в комментариях. Буду рад ответить или обсудить 
Интересно почитать
Хрупкая красота программного кода:
10 приемов, способных ее разрушить
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в Ajax, HTML, JavaScript, PHP, Web разработка Комментарии (219) »
Комментарии (219)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
тут было достаточно интересное описание различных плагинов таблиц: link
может быть окажется полезным.
Спасибо, действительно интересный список.
Ну, если уже разговор идет о таких продвинутых вещах, то стоит посмотреть в сторону ExtJS. Там таких таблиц, формочек, окошек и прочей радости очень много.
В extjs есть так же двойная лицензия. Если Ваш код opensource, то extjs бесплатно, если не то сколько 50-100$? А заработок обычно появляется именно в закрытых приложениях.
В принципе extjs очень хороший фреймворк, но гораздо жирнее, чем нужный набор из jquery.ui, который тоже удобно использовать.
С ExtJS я не работал, демонстрационные странички производят впечатление.
Цены, кстати, начинаются от 259$ на одного разработчика.
Не уверен, что есть смысл их платить, ведь аналогичные возможности можно получить и с помощью той же jQuery + плагины.
Жалко что в примере не расмотрели jqgrid где можно редактировать поля. Помоему это один из самых главных моментов. Я попробовал зделать у меня не получилось с редактированием.
Постараюсь в ближайшее время написать на эту тему пост с примером.
Пасибо былобы очень хорошо.
Ogromneishee Vam spasibo! Davno iskal
>>>
Прежде всего, обратите внимание на строки 13 и 14, в которых мы подключили файлы со стилями. В этом примере используется тема basic, но, естественно, её можно изменить.
>>>
В теле страницы мы создаем таблицу (строка 17) и панель навигации (тег div, строка 18). На данный момент они пустые, их содержимое будет создано плагином.
У тебя номера строк не совпадают вроде?
Что за объект $response? ты его не с того начал юзать в 23 строке (php-бекенда)
Спасибо!
Действительно, нумерация у меня сместилась на 3 строки.
>> $response
Наверное, нужно было его явно создать… Но в любом случае работает
Работает только если E_WARNING отключить, я для этого создал класс с пустыми соответствующими свойствами…
Признаю, недосмотрел. Понадеялся на оф. документацию.
Спасибо за статью, очень познавательно =) Но вот у меня вопрос по теории. Когда я использую формат 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 стилях).
Скажите пожалуйста, в jqgrid 3.4 было так: выставляешь ширину столбцам и таблице, если суммарная ширина столбцов больше чем у всей таблицы, то появлялся скрол и табличную часть можно было прокрутить влево, вправо. А в версии 3.5 в этом случае скрол не появляется, а ширина столбцов пропорционально уменьшается, чтобы они влезли в табличку. В моей таблице 25 столбцов и это очень не удобно. Не могу никак найти, какие параметры отвечают за это в версии 3.5
Попробуйте использовать CSS стили. Например, так как в примере Якова
table.scroll {
width:950px;
height:105px;
}
Скажите. А вот диномическое изменение количества полей поддерживает jqgrid ? Я имею ввиду следующее – мне необходимо выводить данные по датам. Каждое поле это дата. И даты выводятся за произвольный период. То есть таблица должна или сужаться или расширятся
Я сам не пробовал, но на stackoverflow есть обсуждение этой темы.
Вкратце, варианты такие:
1) Каждый раз заново создавать всю таблицу.
2) Загрузить максимально возможное количество полей и прятать/показывать их по мере необходимости.
Алексей вы побороли эту проблему?
Скорее всего вопрос будет признан дурацким, и всё же:
скачал демо, создал базу, изменил dbdata.php а таблица открывается пустая. Где ипотека?
В лишний раз убедился, что если сидишь за компом не с 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) А в качестве фильтра поиск подойдет? Если да, то есть пример.
еще вопрос немного не потеме в версии до 3.5 использовал форматирование:
priority_format = function(el,cellval) {
$(el).html('' + cellval + '');//выводит запись с спец.форматом
};
а в новой версии постоянно выводит:
undefined
каким то другим образом передаются данные?
Честно говоря, я не очень хорошо ориентируюсь в особенностях разных версий.
Поясните, пожалуйста, подробнее что вы хотите сделать. Если есть на оф. сайте похожий пример, киньте ссылочку.
и еще можно ли фильтр в ненужных столбцах не отображать (пример встроеного в таблицу фильтра)
Настройки для каждого столбца указываются отдельно. В параметре 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.
я попробывал бы отключить скрипты которые подгружает форум, выяснить какой скрипт производит конфликт с таблицей
все 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>";
Разобрался!Все очень просто!
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
А можете мне прислать скрипты именно таблицы со ссылками и что бы появлялось окошко при клике. Буду очень благодарен! Мыло: 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 строка берется в кавычки.
Но по теме. По-моему для каждой строки менять параметры нельзя. Они задаются для колонки и других настроек я не видел.
И я не уверен, что такой таблицей будет удобно пользоваться. Может, подумать над альтернативными вариантами?
тоже эта тема волновала кстати
Скажите пожалуйста как можно передать POST или GET переменную в таблицу.У меня передается параметр через ?group=$row[group] тоесть передается через get.Как мне добавить столбец с group, если все значения берутся из getdata?
Проблема в том что в saverow нужно передавать значение переменной $_GET[group].
Вам нужно определить собственный обработчик события beforeSubmitCell
Он должен вернуть массив с данными, которые будут добавлены к обычным данным ячейки. Т.е. вы можете сформировать массив из данных $_GET и отправить его серверному скрипту.
Вообще-то я не понял зачем вам данные из $_GET (понял, что вам их нужно вставить в AJAX запрос), поэтому возможно существует более подходящее решение.
Подробнее об этом событии можно почитать здесь.
Я не совсем понял как сформировать массив GET в beforeSubmitCell. Мне надо просто передать одно значение GET на сервер.Вы бы не могли написать строчку скрипта, который формирует отправку на сервер значение переменных не из таблицы, если это возможно…Заранее благодарю!
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
http://visualjquery.com/
интересно можно ли с сервера принять дополнительные 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};Решил свою проблему только по иному:
jQuery("#list").delGridRow(gr,{delData:{id_group:""})
Параметр delData передает новый параметр серверу,вот я и назначил $_GET параметр и благополучно передал)
Спасибо всем кто помогал!
Еще вопрос.
Мне надо вывести чекбоксы, которые будут отмечены в зависимости от того что выведет сервер, тоесть допустим если сервер выводит 1,то чекбокс отмечен, если 0, то нет.
И что бы их можно было редактировать.
Подскажите пожалуйста как это можно осуществить
//функция пользователського форматирования, используется перед инициальзации таблицы
checkbox = function(cellval) {
if (cellval==1){
rerurn ";//вкл
}
else{
rerurn ";//выкл
}
};
с сервера передается 1 или 0
в colModel задаешь пользовательское форматирование:
formatter:comment_checkbox
Не работает, даже не выводит чекбоксы!
Что должен передавать сервер что бы вывести их?
Кстати rerurn это я так понимаю return, но что он должен возвращать?
сервер должне передвать данные 1 или 0 в это поле
это форматирование для gris 3.5
если у вас 3.4 там другой метод форматирования
return ";//это при 0
return ";//это при 1
забыл добавить
return '';//при 0 и
return '';//при 1
извиняюсь за ошибку
непроходит html тег чекбокса
Я прошу прощения, WP автоматически режет все теги, кроме запрещенных, и мне не хочется отключать эту функцию (все-таки это один из лучших вариантов защиты от XSS).
Если не сложно, замените < на < в вашем коде.
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);
}
При таком скрипте выводит чекбоксы как положено,тоесть если сервер передал 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; } }
Пример из демо,не работает!Подскажите может надо подключать еще что нибудь?Или в чем причина?
Какой именно пример из демо вы смотрите?
After Insert Row event, мне надо выводить данные одного столбца разным цветом
Прежде всего, проверьте (с помощью firebug), что у вас загружены теже скрипты, что и на странице с примером.
Убедитесь, что вы правильно указали id вашей таблицы (если он отличается от примера).
Если не получится, пришлите мне ваши скрипты, я посмотрю в чем проблема.
Спасибо большое за статью. Не подскажете по примеру (я с jquery и php очень на "Вы"): я положил файлы index.html и getdata.php в одну папку. Запускаю index.html, получаю пустую таблицу (шапка таблицы есть). Мне кажется, что он в файл getdata.php вообще не попадает, т.к. в начале скрипта я добавил функцию для записи в лог сообщения, что он дошел до этого файла, но лог пустой, т.е. php-файл не вызывается.Почему так может происходить?
Так может происходить когда скрипт пытается обратиться к несуществующему файлу, например, если не правильно указан путь к нему.
Проще всего это проверить с помощью firebug (это плагин к firefox). В консоли этого плагина отображаются все ajax запросы. Просто посмотрите куда отправляется запрос.
хм, если в поисковой строке яндекса вводить что-то, то консоль показывает запросы. А на моей странице с таблицей консоль вообще чистая. Напишу текст 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: 'Данные пользователей'
});
});
Оно заработало по непонятной причине
А можно сказать пример ответа, который получается в строке
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"]}]}
Большое спасибо, в таблице появился Иван Иваныч
Буду разбираться, как оно работает 
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) определить какие именно символы создают проблемы и либо убрать их, либо заменить чем-то.
В любом случае какая-то обработка текста будет нужна.
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, т.е. вы можете задать любое размещение файлов.
А можно ли изменять форму редактирования?
ТОесть добавлять чекбоксы например,возле каждого поля ввода?Грид это позволяет?
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
ТАк grid.custom.js это для создания фильтра или чекбоксов на форме?
Для фильтра
Спасибо,фильтр заработал,но тут есть небольшие недостатки.
в версии 3.5 есть метод mygrid.filterToolbar();
там привязывается строка фильтра к каждому столбцу, хотелось бы его использовать, но он все равно не работает!Может надо для него еще че нибудь подключать?
По-идее, нет, если Custom module вы уже подключили. Я бы попробовал скачать самую полную версию плагина.
Может проблема с параметрами? Какие конкретно ошибки возникают?
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).
но обычно у меня стоит отправка данных через кнопку потверждения выделенных значений таблицы имхо не очень при выделении делать запросы к бд
Зависит от ситуации, иногда лучше подгружать данные при выделении строки (например, если таблица большая, а в тот же мультиселект нужно подгрузить большой список строк).
Или же например отправить запрос на удаление и с помощью afterSubmit вывести модальное окно с именами удаленных данных.ТАк мне кажется проще…
Подскажите пожалуйста как можно вывести такое окно?
Все зависит от того, какое окно вы хотите. Есть хорошая небольшая библиотека, которая позволяет создавать красивые окна.
А не подскажете, как можно сделать автообновление таблицы?
Уточните, пожалуйста, что вы имеете ввиду.
Допустим, посетитель просматривает таблицу, а она вдруг начинает скакать вверх/вниз из-за того, что кто-то добавляет/удаляет записи из базы. Что должно происходить если пользователь редактирует ячейку?
А вообще, если эти вопросы вы решили, то можно сделать так.
1) Удалить данные из таблицы с помощью метода clearGridData.
2) Заполнить таблицу новыми данными, например, с помощью addJSONData.
3) Создать таймер и с его помощью запускать эти методы.
Подробнее о методах читайте здесь.
Спасибо за ссылку, сделал обновление так: jQuery("#list").trigger("reloadGrid");
Мне нужно было самому внимательнее эту страницу почитать
Владимир, подскажите, пожалуйста, как работает Summary Footer Row?
Как я понял, к описанному Вами примеру в JS надо добавить
footerrow : true,userDataOnFooter : true
И в php-скрипте отправить что-то похожее на:
$responce->userdata['name'] = 'Totals:';$responce->userdata['total'] = $total;
Но никакой строки "итого" нет. Что нужно еще сделать?
Я сам этой функцией не пользовался. Код на демо сайте нормально работает. И похоже все данные у вас заданы правильно (убедитесь, что индексы элементов массива (name, total) совпадают с названиями столбцов в colModel).
Если есть желание, присылайте код, я попробую поэкспериментировать.
Если Вас не очень затруднит, то вот код:
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);
}
Поэкспериментировать именно с вашим примером не получилось, т.к. базы с данными у меня нет, а создавать ее самому и заполнять под вашу таблицу – довольно нудное занятие
Поэтому я попробовал создать строку для примера из этой статьи.
Строка создалась без проблем.
Весь пример (все библиотеки и дамп базы) я упаковал в архив. Надеюсь, поможет.
Кстати, эта возможность работает только в последней версии плагина.
Спасибо, в Вашем примере все работает отлично. Почему не работает у меня, я не понимаю, буду разбираться. О результатах отпишусь
ОК, хочу посоветовать. У меня быстрее всего получается найти ошибку сначала отключить все функции, а потом включать по одной до тех пор, пока не перестанет работать
Ошибка оказалась в названии переменных – $response и $responce
За пример еще раз спасибо – тут таблица интереснее, чем в первом варианте
Здравствуйте у меня возникает ошибка 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).
есть функция у таблицы tableToGrid("#mytable");
которая переводит html формирует query таблицу из html а есть обратная возможность?
Насколько я знаю, такой функции нет.
Есть jqGridExport, но она экспортирует настройки таблицы без данных.
Вообще плагин не содержит данных, он их только отображает. За подготовку данных отвечает серверная (php) часть.
Т.е. проще отправить отдельный запрос серверу и написать функцию, которая сформирует таблицу с ними, чем пытаться вытянуть их из jqGrid. Хотя это тоже можно сделать, т.к. jqGrid создает обычную таблицу (вложенную в несколько div'ов) только с большим количеством JS обработчиков.
ну это понятно, есть мысль как вариант отображения файлов каталога на основе плагины таблицы, насчет экспорта данных просто нужно реализовать печать таблицы вот и подумал что печать окна где данные в html виде путем экспорта из query, ну да ладно придется через php реализовывать
Ребят, в чем проблема, не передаются параметры _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в настройках плагина.Переделал по примеру взятого с wiki jqGrid, исправил с mtype с POST на GET – все заработало. Видимо я что-то ещё не допонимаю. Спасибо вам за статью, очень благодарен Вам.
Только сейчас замечаю, сколько делаю ошибок в тексте =(
Хороший плагин. И есть вопросы:
1) Можно ли его настроить так, чтобы в таблице были заголовочные строки сверху и слева? Типа сводочная таблица.
2) Можно ли напрямоую подключить сгенеренный XML-файл?
3) Есть ли ещё какие-либо плагины, помогающие геренировать таблицы, котоыре умеют работать с XML?
Отвечаю себе самому )
1) Да, но придётся передавать в XML все тексты для колонок.
2) Можно. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
Здравствуйте!Спасибо за статью. Скачал ваш пример, создал в базе таблицу. В файле getdata.php ввёл свои настройки подключения к базе.Запускаю index.html, получаю пустую таблицу (шапка таблицы есть). ((((
Установите firebug и посмотрите какие запросы отправляются и какие данные приходят.
Чаще всего такая ситуация возникает когда:
1) запрос отправляется не тому скрипту (нужно проверять весь url запроса);
2) при выполнении php скрипта возникает ошибка;
3) скрипт возвращает данные в неправильном формате.
Вообщем проблему решил: вместо PDO использовал стандартное подключение mysql_connect, mysql_select_db и всё заработало
По-моему лучше включить поддержку PDO, все-таки удобнее чем стандартные функции mysql
Есть вопрос. Я хочу создать обычную форму, в которой просто ввожу к примеру имя и по нажатию кнопки выпадал jqgrid без перегрузки страницы. Соответственно в getdata.php делал бы выборку с базы по имени. Но в документации нигде не могу найти как реализовать такое чудо
Может кто пробовал чё-то подобное?
Попробуйте так:
В обработчике клика по кнопке:
1) создаете теги <table id="list"…> и <div id="pager"…>
2) вставляете их под нужным полем
3) создаете таблицу, т.е. выполняете
jQuery("#list").jqGrid({ …..
Я так понял, что методом POST мы передаём в getdata.php эти переменные rowNum:5,sortname: 'name',sortorder: "asc".Firebug показывает
page 1
rows 5
sidx name
sord asc
А предусмотрено ли в jqGrid, чтоб я передавал ещё и свои переменные, те что я введу к примеру здеся:
Имя:
пипец не закончил )))))
Имя:
input name="Name" type="text" value=""
Можно использовать событие loadBeforeSend, с его помощью можно изменить запрос, который отправляется серверу.
Я сделал типа такого:
jQuery("#list").jqGrid({
url:'getdata.php?name='+name+'&surname='+surname,
……
вроде работает
Я думал, нужно передавать методом POST. Но, раз подходит GET, то это действительно самый простой вариант.
Владимир, подскажите пожалуйста, где можна поменять надпись "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.
тоже интересует тема горячих клавиш тем более есть плагин 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. Возможно, в нём поддержка клавиатуры лучше.
Ой подождите, я совсем новичек в этом деле, а можно какой-нибудь самый простой пример как например реализовать по нажатию на стрелку вниз переход на след строку или по нажатию на 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;
}
}
}
}
}
что-то у меня не очень получается, грид ведет себя странно, иногда по стрелке переходит на след запись иногда нет, а если переходит то выделение с предыдущей не снимается, т.е. если выделить мышью выделенной получается одна строка(причем она ярко синего цвета), а если ходить по гриду кнопками то выделение иногда переходит на след строку, но оно как-бы только подсвечивает след строку, курсор все равно остается на исходной
при инициализации вашей таблице должен быть указан ключ
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
теперь грид дает ексепшен, когда по строке мышкой шелкаешь
((
че за ексепшен?
говорит, что необработаный ексепшен и ссылается на строку jquery.js
слушай может версия грида отличается можешь поискать на официальном формуте это грида
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 тоже
Ой, что-то совсем никак не работает.
А нельзя ли какой-нибудь простенький пример таблички на локальных данных, чтоб стрелочки вверх вниз работали
http://www.trirand.net/demophp.aspx
Они тут сделали еще и пхпшный класс для генерации самой таблицы, но просят денег за лицензию на него. Хотя и дают скачать полнофункциональную (?) демку бесплатно, код пхпшных генераторов зашифрован, включает в себя
Отсюда вопрос: может быть, кто-нибудь в курсе, есть ли у этой демки жесткие ограничения по времени пользования, или это лицензия вида "не надо ставить на открытый сайт – никто слова не скажет"?
не получиться
Trial grids will show a tiny message pointing to our site every once in a while, по крайней мере это для asp-ного так
Я почитал документацию к этому классу, но, честно говоря, не понял за что 300$ ?
В нём есть много нужных и полезных методов, но на много ускорить разработку с его помощью по-моему не получится. Например, класс в любом случае ничего не знает о вашей БД, значит запросы всё-равно придется писать вручную.
Здравствуйте
Использую jqgrid и доволен как слон )))Пишу в надежде на то, что кто-то с этим сталкивался.
Дело в том, что при первой загрузке экшна с таблицей, ответ от сервера приходит через 2-3 секунды. Причем судя по логам и профайлеру, запросы к базе и время выполнения самой функции в экшне ничтожно малы – 0.01 сек. Что происходит в эти 2 секунды – непонятно.
После загрузки страницы, я нажимаю кнопочку "обновить" в самом гриде, проходит тот же самый запрос но уже за 0.2 секунды – все ок. Замеры времени выполнения не помогают – все говорит о том, что страница генерируется быстро.
При открытии страницы наблюдается еще и странное подвисание браузера (всех браузеров), на эти же 2 секунды. Фаербаг не показывает js-ошибок или 404, все запросы приходят с кодом 200.
Уже не знаю где искать ошибку.
Заранее спасибо за помощь.
Можеть быть – это загрузка самого плагина (js файлов)?
Извините а не подскажете как неуказывать иконку при создании пользоватлеьсих кнопок в таблице
buttonicon:"",//в таблице выводится по умолчанию
и еще как эту кнопку менять при нажатии ???
Я не нашел стандартного способа это изменить.
Можно, конечно, используя id кнопки, получить саму кнопку и убрать картинку.
Используя свойство onClickButton можно назначить кнопке обработчик события onClick и в нём поменять картинку.
Но такое решение не очень удобное, т.к. может перестать работать при обновлении плагина.
Добрый день!
У меня есть грид с субгридами. Как мне сделать:
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/
Вопрос не касается непосредственно grid, но работы с таблицами в jquery.
Как с помощью jquery обойти таблицу и проставить ячейкам айдишники типа id+column+row, где column и row – это номер колонки и столбца соответсвенно?
.attr('id', 'id'+column+row);
Примерно так:
$('td').each(function(index, value) { $(this).attr('id', index); });P.S. Я не тестировал код, могут быть ошибки, проверяйте.
а не подскажите как сместить прокрутку для таблицы не по центру а немного в право.???
Но прокрутка ведь всегда справа находится… Какую именно прокрутку вы имеете ввиду?
строка в режиме редактирования, по Enter должны сохраниться изменения. Все сохраняется, но потом на клиентской стороне выдается сообщение ошибка 12030, причем началось как-то вдруг, не могу понять в чем дело, подскажите пожалуйста
Я никогда такой ошибки не видел. Не могли бы прислать скриншот или какую-нибудь дополнительную информацию?
Насколько я понимаю ошибка в том, что после обновления данный на стороне сервера запрос что-то не то возвращает.
т.е. данные на сервер приходят записываются, а дальше доходят до context.Response.Write(серверная часть у меня на ASP.NET), а потом на клиенте выскакивает сообщение
result :12031: Unknown Status: error причем иногда говорит
12030 а иногда 12031
Очень похоже, что это какие-то ошибки ASP.
В любом случае, посмотрите с помощью firebug'а какую именно строку возвращает сервер и сравните с тем, что должно прийти (обычно возвращается содержимое страницы).
Имею ввиду листалку таблицы
Можно использовать свойство
pagerpos: 'right',
но оно не всегда удачно смещает листалку
Здраствуйте. Вот начал использовать jqGrid. Всё работает хорошо. Вот только есть пара проблем:
1) не знаю, как сделать множественный фильтр. Стандартный фильтр позволяет выбрать только одно поле, по которому будет произведена фильтрация. А надо, чтобы фильтровалось сразу по нескольким полям.
2) хочу в последней ячейке каждой строки выводить флеш – для каждой строки свой. Возвращаю в формате Json. Пихаю в него html-код c флешом. Работает всё без ошибок, но моего флеша не видно в ячейке. Пробовал вместо флеша выводить ссылку. Её тоже не видно, но она работает – по ней можно перейти. Есть ощущение, что флеш там тоже есть, но просто он почему-то недоступен.
1) У меня есть статья на эту тему jqGrid – поиск данных.
2) Открывайте firebug и смотрите разметку в ячейках таблицы. Варианты могут быть разные. Вам нужно убедиться, что код флешки вставлен правильно.
1) спасибо за пример. Очень хороший и наглядный.
2) посмотрел в firebug – там код есть, весь в нормальном виде. Но в броузере ничго не видно. В унаследованных стилях не увидел ничего такого, что скрывало бы элемент. Таблица его как-то скрывает. Попробывал так же добавить туда картинку – её тоже не видно. Может в настройках этого столбца можно указать, что отображаться будет html там?
А можно все же еще раз пояснить по поводу того что должна возвращать серверная часть
вот мой грид
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 то это когда обновились данные в таблице и послан запрос на сервер для дальнейшего обновления данных и вот какраз вопрос в том этот запрос должен что-нибудь возвращать или нет
У вас stat=e – запрос на изменение данных в таблице. В этом случае сервер должен только сохранить данные, он может ничего не возвращать. У меня есть готовый пример и статья с описанием.
Кажется нашёл решение. Для этого столбца надо сделать свои функции format и unformat. Пункт Functionality / Misc -> Cell Formatters (custom) в демо на сайте содателей.
Подскажите пожалуйста, как можно изменить высоту строки, высоту заголовка, а так же их шрифт
Все эти настройки изменяются с помощью CSS стилей. Например, чтобы изменить размер шрифта в ячейках таблицы, можно использовать правило
.ui-jqgrid tr.ui-row-ltr td {
font-size: 2em;
}
вообще у меня следующая проблема, grid отрисовывается с заголовком в котором очень крупный шрифт и видны только верхушки букв, и никак не могу этот шрифт изменить, вообще не пойму откуда он его цепляет, во всех других местах все работает нормально, нельзяя ли какой нибудь маленький примерчик, где меняется стиль заголовка
В файле ui.jqgrid.css есть стиль
.ui-jqgrid .ui-jqgrid-htable th div {
height: 17px;
}
Наверное, он вам и нужен.
я что-то вообще не пойму ничего, гриду вообще все равно что в этом файле, вроде все подключено, такое чувство что он его просто не видит
Странно, когда я изменял этот стиль 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 и ответ сервера).
файрбаг показывает на 815 строку
http://fastpic.ru/view/2/2010/0311/0ddfb3645ec99c618f33a58fdb00f2a9.jpg.html
В какой момент возникает эта ошибка?
Еще замечу, что удаление происходит корректно.
Народ вопрос на засыпку: под APACHE JQGRID работает? Поднял под IIS – всё пашет, под APACHE – возвращает пустую табличку. В FIREBUGе глянул данные POSTом оправляются, а возвращаются нули. Запросы проверил рабочие. Может функция JSON_ENCODE() тупит? Короче говоря, я в тупике…
Да, работает. Если запрос ушел нормально, значит, возникла какая-то ошибка при выполнении php скрипта. Может быть, что дело и в json_encode (ее поддержку можно отключить в php.ini).
Подключите отладчик и посмотрите как скрипт работает. Нет возможности использовать отладчик – можно просто вывести переменные с помощью var_dump.