Цикл статей «Документация jqGrid на русском».
Следующая статья — «Свойство editoptions в jqGrid».
Предыдущая статья — «Общие свойства редактирования в jqGrid».
Свойство edittype определяет тип элемента редактирования поля. Возможные значения: 'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file' и 'custom' . Значение по умолчанию — 'text'.
text
Когда свойство edittype равно 'text' , jqGrid создаёт элемент ввода input type text:
1 |
<input type="text" ...../> |
В editoptions можно указать все возможные атрибуты для этого поля. Например:
1 |
... editoptions: {size:10, maxlength: 15} |
создаст следующий элемент ввода:
1 |
<input type="text" size="10" maxlength="15" /> |
В дополнение к этому jqGrid добавит атрибуты id и name.
textarea
Если edittype равно 'textarea' , то jqGrid создаст элемент ввода textarea:
1 |
<input type="textarea" .../> |
В editoptions можно указать дополнительные атрибуты. Обычно это размеры:
1 |
... editoptions: {rows:"2",cols:"10"} |
1 |
<input type="textarea" rows="2" cols="10".../> |
К этим атрибутам jqGrid дополнительно добавляет id и name.
checkbox
Когда edittype равен 'checkbox', то jqGrid создаёт следующий элемент ввода:
1 |
<input type="checkbox" .../> |
Свойство value в editoptions используется для определения значения для состояния с галочкой и без галочки. Первое значение для состояния с галочкой. Пример:
1 |
...editoptions: { value:"Yes:No" } |
Это создаст:
1 |
<input type="checkbox" value="Yes" offval="No".../> |
Определяет checkbox. Когда значение равно Yes, checkbox становится с галочкой, в противном случае — без галочки. Это значение передаётся в качестве параметра в editurl.
Если в editoptions свойство value не установлено, то jqGrid ищет значения (false|0|no|off|undefined), для того, чтобы построить элемент checkbox. Если содержимое ячейки не содержит одно из этих значений, то атрибут value становится содержимым ячейки и offval устанавливается в "off" .
Если содержимое ячейки равно true, то:
1 |
<input type="checkbox" value="true" offval="off" checked.../> |
К этим атрибутам jqGrid добавляет id и name.
select
Когда свойство edittype равно 'select', jqGrid создаёт тег input:
1 2 3 4 5 6 |
<select> <option value='val1'> Value1 </option> <option value='val2'> Value2 </option> ... <option value='valn'> ValueN </option> </select> |
Есть три способа создания этого элемента:
1. Установка строки в свойство value в editoptions. Свойство value в editoptions должно содержать множество пар «значение:надпись», где значение отделено от надписи двоеточием «:», и где пары заканчиваются точкой с запятой «;».
Что-то вроде этого:
1 |
editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” } |
создаст:
1 2 3 4 5 |
<select> <option value='FE'> FedEx </option> <option value='IN'> InTime </option> <option value='TN'> TNT </option> </select> |
Последний элемент в строке не должен заканчиваться на «;».
2. Установка объекта в свойство value в editoptions.
В этом случае value в editoptions должно содержать примерно следующее:
1 2 3 4 5 6 7 |
... colModel : [ ... {name:'myname', edittype:'select', editoptions:{value:{1:'One',2:'Two'}} }, ... ] ... |
Это создаст HTML-элемент select:
1 2 3 4 |
<select> <option value='1'>One</option> <option value='2'>Two</option> </select> |
3. Установка свойства dataUrl в editoptions. Свойство dataUrl в editoptions корректно только для элементов с edittype: 'select'. Свойство dataUrl содержит url, из которого должен браться элемент select.
Когда это свойство установлено, элемент заполняется значениями из AJAX-запроса. Данные должны быть корректным элементом select с желаемыми элементами option:
1 2 3 4 5 |
<select> <option value='1'>One</option> <option value='2'>Two</option> ... </select> |
К этому элементу jqGrid добавляет атрибуты id и name.
Множественный выбор из select-а также возможен. Можно добавить атрибут size.
1 |
...editoptions: {multiple:true, size:3... } |
password
Когда edittype равен 'password', jqGrid создаёт элемент ввода с типом password:
1 |
<input type="password" ...../> |
В editoptions мы можем установить все возможные атрибуты для этого поля. Например:
1 |
... editoptions: {size:10, maxlength: 8} |
будем иметь следующий HTML:
1 |
<input type="password" size="10" maxlength="8" /> |
В дополнение к этим атрибутам jqGrid добавляет атрибуты id и name.
button
Если свойство edittype равно 'button', то jqGrid создаёт следующий элемент:
1 |
<input type="button" ...../> |
В editoptions можно установить все возможные атрибуты для поля. Например:
1 |
... editoptions: {value:'MyButton'} |
Здесь элемент ввода будет выглядеть так:
1 |
<input type="button" value="MyButton" /> |
В дополнение к этим атрибутам jqGrid добавляет атрибуты id и name.
image
Если edittype равно 'image', то jqGrid создаёт следующий элемент ввода:
1 |
<input type="image" ...../> |
В editoptions можно установить все возможные атрибуты для поля. Например:
1 |
... editoptions: {src:'path_to_my_image'} |
jqGrid создаст следующий текст:
1 |
<input type="image" src="path_to_my_image" /> |
В дополнение к этим атрибутам jqGrid добавляет атрибуты id и name.
file
Если свойство edittype равно 'file', то jqGrid создаст следующий элемент:
1 |
<input type="file" ...../> |
В editoptions можно установить все возможные атрибуты для поля. Например:
1 |
... editoptions: {alt:'Alt text'} |
jqGrid создаст следующее:
1 |
<input type="file" alt="Alt text"... /> |
В дополнение к этим атрибутам jqGrid добавляет атрибуты id и name.
Когда этот элемент создан (обычно в форме редактирования), форма НЕ становится ENCTYPE="multipart/form-data", для того чтобы отправлять файл. Нужно применить другой плагин для этих целей — AJAX File Upload plugin.
custom
Этот тип элемента редактирования делает возможным объявление пользовательского элемента редактирования. Когда edittype установлен в "custom", вам нужно предоставить две функции: одна создаёт элемент, одна получает и устанавливает значение из формы и в форму для отправки на сервер.
Функции, которые должны быть определены это: custom_element и custom_value. Смотрите editoptions для получения большей информации.
При создании пользовательского элемента автоматически выполняются три действия:
- добавляется класс 'customelement'
- добавляется атрибут name со значением name из colModel
- добавляется id в соответствии с правилами для выбранного способа редактирования
Примет выше создаёт следующий элемент ввода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> function myelem (value, options) { var el = document.createElement("input"); el.type="text"; el.value = value; return el; } function myvalue(elem, operation, value) { if(operation === 'get') { return $(elem).val(); } else if(operation === 'set') { $('input',elem).val(value); } } jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} }, ... ] ... }); </script> |
govern [ˈɡʌvən] — руководить, управлять, ограничивать
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Свойство editoptions в jqGrid».
Предыдущая статья — «Общие свойства редактирования в jqGrid».
Добрый день.
В таблице использую поле, редактируемое с помощью списка (edittype: ‘select’, editoptions: { value: «Заблокирован:Заблокирован; Активен:Активен; Ожидает подтверждения:Ожидает подтверждения» }). Пробовал ещё так (edittype: ‘select’, editoptions: { value: { 0: ‘Заблокирован’, 2:’Активен’, 3:’Ожидает подтверждения’} }).
Если редактирую сроку в отдельной форме — список работает корректно (предлагает все варианты), а при редактировании данного поля прямо в строке таблицы список не работает (отображает только один вариант, соответствующий текущему значению ячейки). Подскажите, в какую сторону копать, в чём может быть причина?
Не знаю, но явно что-то не то сделали.
Попробуйте покопаться в статье про редактирование записи в строке в jqGrid.
Добрый день. Спасибо.
Методом «научного тыка» удалось определить, что удаление параметра multikey решает проблему.
Вы не знаете, как это связано?
Вот набор моих параметров для множественного выбора:
multikey: ‘ctrlKey’,
multiboxonly: true,
multiselect: true,
multiselectWidth: 20,
При этом, изменение/удаление параметра multiboxonly ситуации не меняет, пока есть параметр multikey выпадающие списки при редактировании поля прямо в таблице не работают.