jqGrid: редактирование табличных данных с помощью inline редакторов
В одной из прошлых статей (jQuery Grid Plugin – "продвинутое" решение для создания таблиц) я рассказывал об использовании jqGrid для создания таблиц.
jqGrid представляет собой плагин к библиотеке jQuery предназначенный для работы с таблицами. С его помощью можно создавать многостраничные таблицы, выполнять сортировку и, конечно, редактировать данные.
В прошлой статье речь шла только о самых простых возможностях и, как справедливо заметили в комментариях, о самой интересной части, редактировании, не было ничего сказано. Я пообещал это исправить и сегодня постараюсь это обещание выполнить.
Прежде всего, напомню, что данные хранятся на стороне сервера (в базе данных) и плагин к ним непосредственного доступа не имеет. Он может только вызвать серверный (PHP) скрипт и передать ему новые значения.
Редактировать записи в таблице можно 2 способами.
1) В отдельном окне. При редактировании строки появляется окно со всеми полями, в которые нужно ввести новые значения. Клик по кнопке «OK» отправит данные серверу.
2) С использованием inline редакторов. В режиме редактирования текст строки заменяется полями для ввода данных. Нажатие на клавишу Enter отправляет измененные данные.
Общий принцип работы в обоих случаях один и тот же. Поэтому мы рассмотрим только один вариант (с использованием inline редакторов).
Использовать будем предыдущий пример. На данный момент он только создает таблицу с данными из базы, а мы добавим возможность их редактирования.
В тексте этой статьи приводить полный код скриптов нет смысла, остановимся только на тех моментах, которые касаются редактирования. Но вы можете скачать архив с этим примером и поэкспериментировать с демонстрационной страницей.
Прежде всего, сделаем поля таблицы редактируемыми. Для этого нужно внести несколько изменений в скрипт, создающий таблицу.
-
jQuery(document).ready(function(){
-
var lastSel;
-
jQuery("#list").jqGrid({
-
url:'getdata.php',
-
datatype: 'json',
-
mtype: 'POST',
-
colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
-
colModel :[
-
{name:'id', index:'id', width:30}
-
,{name:'surname', index:'surname', width:80, align:'right', editable:true, edittype:"text"}
-
,{name:'fname', index:'fname', width:90, editable:true, edittype:"text"}
-
,{name:'lname', index:'lname', width:80, align:'right', editable:true, edittype:"text"}
-
],
-
pager: jQuery('#pager'),
-
rowNum:5,
-
rowList:[5,10,30],
-
sortname: 'id',
-
sortorder: "asc",
-
viewrecords: true,
-
imgpath: 'themes/basic/images',
-
caption: 'Данные пользователей',
-
ondblClickRow: function(id) {
-
if (id && id != lastSel) {
-
jQuery("#list").restoreRow(lastSel);
-
jQuery("#list").editRow(id, true);
-
lastSel = id;
-
}
-
},
-
editurl: 'saverow.php'
-
});
-
});
В строке 2 мы добавили переменную lastSel, которая служит для хранения id строки, редактируемой в данный момент.
Также немного изменились строки 10-12 (по сравнению с предыдущим примером). В них перечислены параметры ячеек таблицы и для каждой ячейки (кроме первой, в которой хранится id записи) мы добавили параметры editable:true и edittype:"text".
Первый параметр делает ячейку редактируемой, второй – указывает, что в ячейке нужно создать обычное текстовое поле. Другие значения этого параметра: textarea, checkbox и select.
После этого создаем обработчик события ondblClickRow (строки 22-28). В нем мы проверяем что пользователь кликнул по строке и эта строка в данный момент не редактируется. Восстанавливаем значения в строке, которая редактировалась перед этим (с помощью restoreRow) и переводим новую строку в режим редактирования (функция editRow).
Обратите внимание на второй параметр функции editRow. Он должен быть равен true для того, чтобы сохранение данных выполнялось при нажатии на клавишу Enter.
И последнее изменение (строка 29). В параметре editurl указываем имя серверного скрипта, который будет сохранять данные.
Теперь остается только написать серверный (PHP) скрипт (saverow.php).
-
<?php
-
require_once('dbdata.php');
-
-
try {
-
//читаем новые значения
-
$id = $_POST['id'];
-
$surname = $_POST['surname'];
-
$fname = $_POST['fname'];
-
$lname = $_POST['lname'];
-
-
//подключаемся к базе
-
$dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
-
//указываем, мы хотим использовать utf8
-
$dbh->exec('SET CHARACTER SET utf8');
-
-
//определяем количество записей в таблице
-
$stm = $dbh->prepare('UPDATE users SET surname=?, fname=?, lname=? WHERE id=?');
-
$stm->execute(array($surname, $fname, $lname, $id));
-
}
-
catch (PDOException $e) {
-
echo 'Database error: '.$e->getMessage();
-
}
-
-
// end of saverow.php
Здесь мы читаем новые значения (названия параметров в массиве $_POST совпадают с названиями столбцов таблицы) (строки 6-9).
После этого подключаемся к базе и обновляем запись (строки 11-18). Чтобы показать основную идею я максимально сократил код, убрал проверки и использовал PDO для работы с базой.
Всё, теперь можно спокойно редактировать записи в таблице.
Если есть вопросы или замечания, пишите, постараюсь ответить 
До встречи!
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в Ajax, JavaScript, MySQL, PHP, Web разработка Комментарии (82) »
Комментарии (82)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Как-то пропустил в Reader'е Вашу первую статью об этом плагине…
Давно присматриваюсь к нему, но как-то не мог найти времени заняться документацией.
Спасибо за эти статьи — это хороший старт для начала использования этого плагина.
Владимир, а как же защита?
alert(1);Хоть не валидно, но прошло на ура+ при открытии поля для редактирования как-то логично было бы закрывать при клике вне его, аль при потере фокуса всех его инпутов (мышкой-то тоже бывает нужно закрыть)
+ при двойном клике (кстати не всегда срабатывает) выбирается первое поле, хоть щелкаешь и на другом
+ для юзабилити можно убрать выделение по двойному клику, иначе видно, что слово выделяется, а после превращается в инпут
Все испытывалось в Fx 3.5 Preview (beta 99)
(script)alert(1);(/script)– код был таким, парсер комментариев скушал теги (вместо больше и меньше подставьте соответствующие символы).С защитой все просто. Я сокращал пример и первоначально не собирался делать демо-страницу, а потом передумал.
Поэтому и осталась только защита от SQL Injection, которая автоматически выполняется PDO.
Но вы правы, оставлять в таком виде нельзя.
Закрываются редакторы нажатием на Esc. Но сделать можно как угодно. Мне почему-то больше понравился вариант с двойным кликом, хотя в документации приведен пример для одинарного клика.
Глюки: основная причина в том, что я просто скопипастил код из документации. Недостатки есть, но идею показывает отлично.
В любом случае эти недостатки быстро устраняются. Я убрал проверку в событие ondblClickRow и добавил обработчик onSelectRow. Теперь закрыть обработчики можно одиночным кликом по любой строке. И исправил проблему с несрабатывающим двойным кликом.
Менять код в статье и архиве я не буду, а посмотреть изменения можно с помощью Firebug.
Проблема с кодировкой
Я вижу, но не могу повторить.
Пробовал из FireFox 3, Opera 9.62 и IE 8. Кириллица отображается правильно, там везде используется UTF-8.
>if (id &&
поправь на &&
да и вообще у тебя подсветка синтаксиса так себе (при копировании лишний шлак в буфер попадает), заюзай codecolorer, на порядок лучше
Спасибо!
Эти проблемы с подсветкой уже порядком надоели. Только у всех плагинов, которые я пробовал были свои недостатки.
у codecolorer нет таких проблем, сам его юзаю
Когда юзаешь:
>edittype:"textarea"
то как переходить на следующую строку? вешать собственный обработчик?
По-моему edittype:"textarea" и inline редактор – это не правильно. Лучше открыть отдельное окно, при этом можно увеличить размер текстовой области и избавиться от проблем, возникающих при нажатии на enter.
ясно, сенк
столкнулся с такой проблемой: форма редактирования строки в jqgrid открывается только, если перед этим открывалась форма добавления записи. Подскажите как победить.
В примере к этой статье форма открывается по двойному клику на строке, а формы добавления записи вообще нет… может вам подойдет
Если нет – пишите, почему.
коммента не в тему))) мне кажется PDO это зло))) лучше юзать стандартные функции или framework
Обоснуйте
PDO ничем не хуже библиотек фреймворков. Но когда нужна ТОЛЬКО библиотека для работы с БД, то смысла использовать фреймворк нет.
синтаксис несколько усложняет, а функционала не прибавляет)))
Владимир, позвольте задать Вам вопрос.
jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
url:'getdata.php',
datatype: "json",
colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
colModel :[
{name:'numbers',index:'numbers', width:30,sortable:false},
{name:'surname', index:'surname', width:180, align:'right', editable:true, edittype:"text"},
{name:'fname', index:'fname', width:190, editable:true, edittype:"text"},
{name:'lname', index:'lname', width:180, align:'right', editable:true, edittype:"text"}
],
rowNum:5,
rowList:[5,10,20,30],
// imgpath: "img",
pager: jQuery('#pager2'),
sortname: 'surname',
sortorder: "asc",
loadComplete: function(){
var ids = jQuery("#list2").getDataIDs();
var numberlocal = 0;
for(var i=0;i<ids.length;i++){
numberlocal = i+1;
jQuery("#list2").setRowData(ids[i],{numbers:numberlocal})
}
},
viewrecords: true,
caption:"пример работы"
}).navGrid('#pager2',
{edit:false,add:false,del:false, search:false}, // events
{drag: true,reloadAfterSubmit:true}, // options
{}, // edit options
{}, // add options
{}, // del options
{} // search options
);
$("#editform").click(function(){
var gr = jQuery("#list2").getGridParam('selrow');
if( gr != null ) jQuery("#list2").editGridRow(gr,{
closeAfterEdit: true,
url: 'saverow.php'
});
else alert("Выберите запись");
});
$("#delform").click(function(){
var gr = jQuery("#list2").getGridParam('selrow');
//getSelectedRow();
if( gr != null ) jQuery("#list2").delGridRow(gr,{
msg: "Удалить выбранную ревизию",
url: 'delrow.php'
});
else alert("Выберите запись для удаления!");
});
$("#addform").click(function(){
jQuery("#list2").editGridRow("new",{
height:280,
closeAfterAdd: true,
url: 'addrow.php'
});
});
});
все работает хорошо, но хочется добавить валидации перед отправкой на сервер и узнать добавилась ли запись от сервера.
как это можно сделать? и можно ли вообще?
Конечно, это сделать можно. Для этого в jqGrid предусмотрены специальные события.
Например, для inline редактора подойдет beforeSubmitCell (возникает перед отправкой содержимого ячейки серверу).
Подробное описание в справке (раздел Editing – Sell Editing – Events)
Кроме того, есть события, которые возникают при редактировании записей через отдельную форму.
Тут я не согласен. PDO гораздо функциональнее чем стандартная библиотека, а синтаксис – вопрос привычек
для работы над валидацией есть beforeSubmit, но понять логику его работы, точнее как долно это выглядеть в работе не могу ;(
==========================
beforeSubmit
fires before the data is submitted to the server. Parameter is of type id=value1,value2,… When called the event can return array where the first parameter can be true or false and the second is the message of the error if any. Example:
[false,"The value is not valid"]
==========================
да думаю, это привычка, мне не понравилось я за 2 мин. переписал, главное это идя)
спасибо за статью
ответ нашел
$("#editform").click(function(){
var gr = jQuery("#list2").getGridParam('selrow');
if( gr != null ) jQuery("#list2").editGridRow(gr,{
closeAfterEdit: true,
beforeSubmit: function() {
var ret=[false,"The value is not valid"];
return ret;
},
url: 'saverow.php'
});
else alert("Выберите запись");
});
Владимир, подскажи пожалуйста
скопировал твой код
После
jQuery(document).ready(function(){…});
добавил строку
jQuery("#list").navGrid("#pager",{edit:true,add:true,del:true});
проверил функция navGrid вызывается, но кнопки edit,add,del на панели навигации не появляются
что еще надо сделать чтобы они появились? в документации ничего найти не могу.
По-моему, чтобы создать кнопку в панели навигации нужно использовать метод navButtonAdd. Пример есть в справке (раздел Navigating – Custom Buttons).
Написал как сказано в справке:
jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false})
.navButtonAdd('#pager',{
caption:'add',
buttonimg:"themes/basic/images/row_add.gif",
onClickButton:function(){ alert("Adding Row")},
position: "last",
title:'ToolTip ADD'
});
Кнопки все равно не добавляются
Я попробую помочь, но для этого мне нужна ваша страница со скриптами. Присылайте архив на vova_33[at]gala.net
А подробнее можно?
Можно. Но о чем именно подробнее рассказать? Здесь показан работающий пример. Наращивать функционал можно, но что именно вас интересует?
не могу вызвать данные, таблица есть а данные из гетдаты не получаю, по идее должно отдавать так:
try {
$response->page = "1"; // current page
$response->total = "1"; // total pages
$response->records = "1"; // total records
$response->rows['0']['id']="1"; //id
$response->rows['0']['cell']=array('1','2erwy','3eyr','4weryw');
echo json_encode($response);
}
но нехрена не отдает….
А вы не можете посмотреть какой json бекенд отдает?
adw0rd прав, определить в чем проблема без отладчика (firebug) не получится.
Нужно посмотреть какие параметры переданы в запросе и что отправил сервер.
а как редактировать в отдельном окне в справке не сказано.
По-моему этот раздел вам подойдет
jqGrid – Editing – Form Editing
Кроме того, точно видел такой пример на их демо сайте.
Скажите пожалуйста как выполнить добавление записи? Ссылка на добавление находится не на тулбаре таблицы, а отдельно…
Есть готовый пример. Раздел Manipulating – Grid Data. Там одна из операций "Add row with id 99".
добавление строки я уже сделал,теперь надо сохранить в базу данных. Попробовал сделать проверку на добавление(на параметр add)
if (isset($_POST['_add']) && $_POST['_add'] == 'true') {
$query =("INSERT INTO `telephones` ( `id_tel` , `tel_number` , `tel_denorm` , `is_close` , `id_operator` )
VALUES (", $tel_number, NULL , '0', $code)");
$result=mysql_query($query);
не помогло…
Удаленно находить баги у меня плохо получается
Если можете, пришлите мне скрипт почтой, я посмотрю.
добрый вечер.Подскажите пожалуйста почему у меня не работает редактирование?Вот вырезка скриптов:
{name:'id_operator', index:'id_operator', width:100, align:'center', editable:true, edittype:"select",editoptions:{value:"1:050; 2:095; 3:099; 4:063; 5:093; 6:067; 7:068"}}
,{name:'tel_number', index:'tel_number', width:100, align:'center', editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','bw','cn']}}
и запрос:
$stm = $dbh->prepare('UPDATE telephones SET tel_number=?, id_operator=? WHERE id_tel=?');
$stm->execute(array($tel_number, $id_operator));
Вам нужно проверить (firebug'ом) какие данные отправляются серверу и что он отвечает. Отправляться должны измененные данные, а отправить назад сервер должен эти же данные в формате json (или другом, в зависимости от настроек).
Спасибо за совет ,очень полезная штука)У меня формируется POST запрос но сервер ничего не возвращает(
Проверяйте php скрипт.
В конце должно быть что-то вроде
echo json_encode($data)
Подскажите пожалуйста, я сделал удаление строки, а удаляется строка по порядковому номеру POST id.Тоесть если запись с id 10,а в таблице она стоит на 8м месте, то удаляется запись с id 8!Как мне решить эту проблему?
От сервера данные передаются в формате
{id:"1", cell:["cell11", "cell12", "cell13"]}
Значение id – это id в базе данных, а в первой колонке (cell1) можно указать порядковый номер.
Еще один вариант – выводить id из БД вместо порядковых номеров.
У меня подобная проблема, запутался совсем. Когда имя ключевого столбца таблицы ID , то все хорошо, но у меня этот столбец имеет название id_row и я так понял что "ID" где-то глубже сидит? Тупо уже меняю в 3-x файлах (index.html,getdata.php и saverow.php) все id на id_row ,но происходит редактирование строки не нужным мне id_row из базы,а с порядковым номером таблице что видим.
Всего записей в БД 5410, для наглядности меняю последнюю строку и ставлю id_row=5555, после сортировки по этому полю эта запись на первом песте.Смотрю в Firefox в getdata.php:
{"page":"1","total":1082,"records":"5410","rows":[{"id_row":"5555","cell":["5555","44005010010015","\u0421\u0438....и т.д.
И id_row и cell – пятерки, смотрю в Firefox saverow.php – там ID=1, т.е. первая строка.Выведите, пожалуйста, меня из стопора.
Firefox читать как FIREBUG
Если в saverow id == 1, значит $_POST['id'] == 1, т.е. вы, скорее всего, не изменили имя столбца в файле index.php (строка 9).
Например, для этого примера при сохранении строки плагин передает такие данные
fname Сидор
id 3
lname Сидорович
surname Сидоров222
Имена параметров – это имена столбцов, которые указаны в colModel (строки 8-13). Измените id на id_row и проверьте firebug'ом какие данные передаются при изменении строки (или удалении).
в том то и дело что везде изменено id на id_row, но все равно передаются данные где есть имена столбцов моих,а вместо id_row – все равно id. В принципе, уже закрываю глаза на это -надоело ,в getdata.php ПРОПИСАЛ ВОТ ТАК
$responce->rows[$i]['id']=$row['id_row'];и вроде работает.Спасибо за оперативный ответ!Спасибо,разобрался. Скажите пожалуйста,на странице демок есть вкладка Formater, там можно указывать формат поля. Я хочу в таблицу расположить ссылки или кнопки для каждой записи.В демке не показано куда записывать адрес ссылки…
Адрес ссылки в смысле href?
. Адреса формируются автоматически. К базовому адресу добавляется текст поля (trirand.com/jqgrid/ + Client 1).
В том примере они нигде его не указывают
Насколько я понял вам нужен немного другой formatter. Не link, а showlink. В его настройках можно указать url. Подробнее здесь.
Да, эта статья помогла)
Но вот все равно документация мне не нравится! Вот как например изначально спрятать колонку таблицы? Мне надо передать значение переменной в saverow. Я думаю добавить столбец и спрятать его,а через него будет передаваться значение переменной.Можно ли как нибудь по другому передавать значение?
Спрятать колонку можно с помощью параметра hidden:true (подробнее здесь). Кроме того, можно разрешить пользователю самому прятать/показывать колонки (пример здесь).
Спасибо большое!
Подскажите пожалуйста как можно при добавлении или редактировании textarea подсчитывать количество введенных символов?Скрипт есть который это делает, но вот как его втулить в jqquery?
Попробуйте использовать событие beforeEditCell.
В нем подключите ваш скрипт к нужной textarea.
beforeEditCell: function(rowid,cellname) {
if (t.value.length>4000) {
alert("Сообщение не должно привышать 4000 символов.");
return(false);
}
else return(true);
}
}
Написал такое, соответственно не работает(
Здравствуйте Владимир.
подскажите пожалуйста, почему у меня может не срабатывать алерт который я поместил в событие "beforeShowForm". То есть у меня есть таблица в нижней части которой расположены стандартные кнопки редактирования, по нажатию на которые появляется форма с полями для редактирования, мне бы хотелось отслеживать момент появления этой формы и судя по документации для этого надо использовать событие: "beforeShowForm" но код в нем не срабатывает, может есть какие-то тонкости?
Я не помню использовал ли раньше beforeShowForm, но этими событиями проблем вроде не было (если, конечно, не забывать подключать модуль Common, лучше вообще тестировать на полной версии плагина). Если хотите, присылайте почтой мне код, я попробую найти в чем проблема.
Подскажите пожалуйста, как можно организовать редактирование столбца данных, а не строки.
Стандартных возможностей в jqGrid для этого нет. Написать самому, конечно, можно что угодно, но я плохо представляют как пользоваться редактированием столбца.
Напишите подробнее, что вы хотите сделать.
Для примера могу привести редактирование журнала оценок, когда столбцы это даты, а строки это ученики. Выставление оценок проходит по одной конкретной дате. Это конечно можно сделать и редактированием строк, но количество действий пользователя при этом резко увеличивается.
Значит, вопрос в количестве действий пользователя.
Например, если вы сделаете так, что после ввода оценки и нажатии на кнопку "вниз" курсора, введенное значение будет отправлено на сервер, фокус переместится на строку ниже и поле с оценкой перейдет в режим редактирования, будет ли такой вариант подходящим решением?
Ото прекрасная идея. Подскажите пожалуйста как это реализовать.
Скажу сразу, что готового решения у меня нет, но я давно собирался поэкспериментировать и сделать что-то похожее. Когда закончу, наверное, пост напишу.
В любом случае, судя по описанию плагин поддерживает все необходимые методы и события, поэтому не думаю, что возникнут серьезные проблемы.
Добрый день, Владимир.
Подскажите можно ли как-то получить номер выделенной строки в таблице. Метода getSelection я не обнаружил в доках.
Это нужно для того, чтобы убрать выделение строки, при клике вне области таблицы.
Спасибо заранее за ответ.
Я тоже не нашел подходящего метода.
Но когда строка выделена, ей (тегу tr) присваивается класс selected.
Попробуйте использовать что-то вроде
var selRow = $('tr.selected').attr('id');
Здравствуйте, спасибо Вам за урок – мне очень помогли!
Все работает.
У меня имеется вопрос: Вывожу таблицу для редактирования (список товаров), где у меня по кодам тянется тип товара и производитель. То есть и выводятся тоже коды (как в таблице), а как мне реализовать вывод списка с названиями, а при редактировании сохранять коды в таблицу?
спасибо.
Это нужно делать на серверной стороне, т.е. с помощью php. Для jqGrid без разницы откуда вы берете данные и куда их потом сохраняете.
Т.е. пишете sql запрос (с объединениями) который вытянет из таблиц нужные поля и отправляете итоговую таблицу jqGrid.
Когда нужно сохранять данные, читаете название производителя, делаете запрос к таблице "производители" и узнаете его код, сохраняете запись о товаре в таблицу "товары" (уже с кодом).
Я сделал запрос где вместо кодов указываю имена производителей(для отображения текущего производителя), и сделал запрос, где выбрал всех производителей (для поля со списком естественно). Как мне все это передать в браузер (яваскрипту) чтобы был реализовать мою задачу?
Подсмотрел на офф. сайте примерчик и там увидел строку:
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},здесь все ясно, но только со статичными данными, а как быть когда все это дело передает php?
Вы получили результаты этих запросов в виде массивов. Теперь нужно сформировать новый массив с данными, которые будут отображаться в таблице.
Точнее удобнее сразу присваивать нужные данные свойствам объекта $response (в предыдущей статье второй листинг, строки 28-32).
Покопался в англицкой документации и там на счет этого написано
Я создал новый файл add.php c содержанием:
$res=mysql_query("SELECT id,name FROM vendor;",$db)$i=0;
while ($row=mysql_fetch_assoc($res))
{
$rdata->rows[$i]['vid']=$row['id'];
$rdata->rows[$i]['data']=$row['name'];
$i++;
}
echo json_encode($rdata);
и в скрипт соответственно:
{name:'vid',index:'vid', width:90, editable: true,edittype:"select",editoptions:{dataUrl:'add.php'}}Таблица выводится, но где должны быть поля со списками – пустой столбец.
Не знаю что и делать. Я нид хелп!!
Теперь до меня дошло, что именно вы хотите сделать
Судя по описанию, ваш скрипт (add.php) должен сформировать и вернуть select, а не просто данные (The data should be a valid html select element …).
Правда я с select'ами не работал.
Но в любом случае, по-моему, в документации есть более интересный вариант – передать значения в формате
editoptions:{value:{1:'One',2:'Two'}}
при формировании таблицы.
Это удобный вариант, особенно если список не очень большой и вы можете сгенерировать js-код с помощью php скрипта. Как минимум выиграете на одном ajax запросе.
По select вот что нарыл:
Setting editoptions dataUrl parameter
The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get.
When this option is set, the element will be filled with values from the ajax request. The data should be a valid html select element with the desired options – something like:
One
Two
…
Т.е. по русски, вызываемый add.php должен генерить собственно Select. Проверил, работает.
Теперь я не понимаю как это так сделать, и чем этот пример отличается от того статического, что был в примере?
Может ткнете меня в нужноее направление парой строк кода?)
Вы можете создавать настройки jqGrid динамически.
Допустим, ваша страница создается скриптом index.php. В нем же находится js код, который подключает и настраивает jqGrid.
Вы можете выполнить запрос к базе, получить массив значений для выпадающего списка и в цикле сформировать строку типа
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}
Естественно, этот метод не будет работать если js код находится в отдельном файле с расширением js, но и в этом случае можно решить проблему.
Я даже как-то написал заметку на эту тему Передача параметров в JavaScript файлы.
Пара строк кода
Решил эту наболевшую задачу, хоть и криво, хоть и не так как хотелось бы, но в данный момент не до изысков. Работает, и хорошо.
Обогащу пост парой строк кода, может кому понадобится.
формирую строку для передаци в скрипт
//коннект к серверу бд
$db=mysql_connect('localhost','xxx','xxx');
//выбор БД
mysql_select_db('mybase',$db);
//запрос в котором выбираю имя производителя и его код
$q=mysql_query("select id,name from vendor;",$db);
$values = '';
$i=0;
while($row = mysql_fetch_assoc($q))
{
if ($i != 0)
{
$values .= ';';
//формирую строку в нужном формате, чтоб скрипт понял }
$values .= $row['id'].':'.$row['name'];
$i++;
}
//записываю значения сформированной строки в значение скрытого поля страницы
printf('',$values);
Далее по имени из скрипта на стороне пользователя по идентификатору получаем значение поля со списком
,{name:'tname',index:'tname', width:30, align:'left', editable: true,edittype:"select",editoptions:{value:$("#type").val()}}
Все работает, хоть и реализация хромает)))
Большое спасибо Владимиру за помощь и терпимость к моей назойливости!!
Пожалуйста
Скажите как подключить навигацию к таблице
Панель навигации включается параметром
pager: jQuery('#pager') //(строка 14 в первом листинге)
в настройках плагина.
Скажите, а можно привязать к выбранной ячейке FCKeditor.
В принципе, да. Правда я не пробовал. Но FCKeditor (или другой редактор) можно привязать к любой textarea. Т.е. когда ячейка преобразуется в textarea нужно получить ее id и после этого можно подключать редактор.
Скорее всего еще придется писать код, который будет убирать редактор. И могут быть проблемы с оформлением, все-таки кнопки занимают довольно много места.
А можно ли этот скрипт, переделать, что бы он за базу принимал текстовые файлы а не мускул ? Ну и соотвественно формировал таблици и так далее
Переделать можно как угодно
Но, если использовать текстовые файлы, то объём кода получится больше, к тому же нужно будет определиться с их форматом. В общем, если нужно просто хранить данные в файлах, то советую использовать SQLight. Этот пример должен правильно работать с SQLight, нужно только изменить параметры подключения.
Как сделать, что бы при добавлении новой записи, какие-то значения выставлись в форме по умолчанию, типа дата была текущей.
В настройках столбцов (colModel) можно указать параметр defval, но он работает только для формы поиска.
Поэтому можно использовать событие afterShowForm, чтобы заполнить поля формы. id полей будут такими же как названия столбцов.
Т.е. примерно такой код.
jQuery("#addBtn").submit(function() { jQuery("#list").editGridRow( "new", { height:280, reloadAfterSubmit:false, afterShowForm:function(){ $("#surname").val("222"); } } ); return false; });Я ориентировался на этот пример (Live Data Manipulation – Add row)