Цикл статей «Документация jqGrid на русском».
Следующая статья — «Пользовательское форматирование в jqGrid».
Предыдущая статья — «Пользовательские кнопки в jqGrid».
Для того чтобы использовать возможность форматирования, убедитесь, что вы отметили галочкой Formatter module при скачивании jqGrid.
Настройки языка
Настройки по умолчанию для языка определены в языковых файлах (grid.locale-xx (где xx — это двухсимвольный код вашего языка, en — английский).
Это означает, что настройки форматирования загружаются при загрузке Javascript-файлов.
Настройки форматирования по умолчанию различны для каждого языка.
Вот настройки форматирования по умолчанию для английского файла:
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
jQuery.jgrid = { ... formatter : { integer : {thousandsSeparator: " ", defaultValue: '0'}, number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'}, currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'}, date : { dayNames: [ "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], monthNames: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], AmPm : ["am","pm","AM","PM"], S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'}, srcformat: 'Y-m-d', newformat: 'd/m/Y', parseRe: /[Tt\\\/:_;.,\t\s-]/, masks : { ISO8601Long:"Y-m-d H:i:s", ISO8601Short:"Y-m-d", ShortDate: "n/j/Y", LongDate: "l, F d, Y", FullDateTime: "l, F d, Y g:i:s A", MonthDay: "F d", ShortTime: "g:i A", LongTime: "g:i:s A", SortableDateTime: "Y-m-d\\TH:i:s", UniversalSortableDateTime: "Y-m-d H:i:sO", YearMonth: "F, Y" }, reformatAfterEdit : false }, baseLinkUrl: '', showAction: '', target: '', checkbox : {disabled:true}, idName : 'id' } ... |
Здесь вы можете найти все настройки, которые вы можете посмотреть и изменить перед использованием предопределённого форматирования. Эти настройки могут быть переопределены для конкретных колонок с помощью свойства formatoptions в colModel.
Следующим шагом будет установка желаемого форматирования в colModel. Для этого используется свойство formatter. Например:
1 2 3 4 5 6 7 8 9 |
jQuery("#grid_id").jqGrid({ ... colModel : [ ... {name:'myname', ... formatter:'number', ...}, ... ], ... }); |
Пример выше форматирует содержимое колонки
'myname'
в соответствиями с правилами форматирования для чисел
'number' в языковом файле. Например, если исходное значение
"1234.1" , то значение в таблице будет «1 234.10» при использовании настроек выше.
Настройки, специфичные для колонок
Настройки форматирования могут быть определены для конкретных колонок. В этом случае они будут переопределять настройки из файла локализации. Для этого используется свойство formatoptions в colModel. Пример:
1 2 3 4 5 6 7 8 9 |
jQuery("#grid_id").jqGrid({ ... colModel : [ ... {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } , ... ], ... }); |
Код выше переопределит настройки из файла локализации. В formatoptions должны быть указаны значения, подходящие для используемого типа форматирования
Предопределённые типы форматирования
Ниже представлен список предопределённых типов форматирования.
Все предопределённые типы совместимы с модулями редактирования. Это означает что числа, ссылки. e-mail и другие — все они конвертируются так, чтобы редактироваться правильно.
Тип: integer
Свойство: thousandsSeparator, defaulValue
thousandsSeparator устанавливает разделитель для тысяч, defaultValue устанавливает значения по умолчанию, если ничего не указано в данных.
Тип: number
Свойства: decimalSeparator, thousandsSeparator, decimalPlaces, defaulValue
thousandsSeparator устанавливает разделитель тысяч, decimalSeparator устанавливает разделитель целой и дробной части, decimalPlaces устанавливает количество знаков после запятой, defaultValue устанавливает значение по умолчанию при отсутствии данных.
Тип: currency
Свойства: decimalSeparator, thousandsSeparator, decimalPlaces, defaulValue, prefix, suffix
Так же как и number, но с двумя дополнительными свойствами : prefix — текст, который будет вставлен перед числом, и suffix — текст, который будет вставлен после числа.
Тип: date
Свойства: srcformat, newformat, parseRe
srcformat — исходный формат, из которого будет происходить преобразование, newformat — конечный формат. Определение формата date использует соглашения PHP. Также вы можете указать предопределённый формат даты, для чего используется свойство mask в форматировании даты по умолчанию. Свойство parseRe — это выражение для разбора строк с датами.
Свойство: email
Свойства: нет
Используется для вставки
"mailto:" перед e-mail.
Тип: link
Свойства: target
Значение по умолчанию для свойства target — это null. При установке этого свойства создаётся ссылка на target, и ячейка использует это значение как href в теге ссылки.
Тип: showlink
Свойства: baseLinkUrl, showAction, addParam, target, idName
baseLinkUrl — это ссылка.
showAction — дополнительное значение, добавляемое к baseLinkUrl.
addParam — дополнительный параметр, который может быть добавлен после параметра idName.
target — если указан, то добавляется как дополнительный атрибут.
idName — первый параметр, добавляемый после showAction. По умолчанию — id.
Тип: checkbox
Свойства: disabled
Значение по умолчанию для disabled — true. Это свойство определяет, может ли значение в checkbox быть изменёно пользователем. Если установлено в false, то значение в checkbox может быть изменено.
Тип: select
Свойства: нет
Это не настоящий элемент select, но имеет специальное значение. Смотрите ниже.
Тип: actions
Свойства: {
keys: false,
editbutton : true,
delbutton : true,
editformbutton: false,
onEdit : null,
onSuccess: null,
afterSave:null,
onError: null,
afterRestore: null,
extraparam: {oper:’edit’},
url: null,
delOptions: {},
editOptions : {}
}
Этот тип форматирование является лёгким способом добавить кнопки в определённую колонку для редактирования в строке. Мы добавляем два типа действий: редактирование и удаление. Если свойство editformbutton установлено в true, то форма редактирования появляется вместо редактирования в строке. Свойство editOptions используется только для редактирования в форме.
Тип форматирования Select
Это не настоящий элемент select. Это используется при использовании модуля редактирования с edittype:'select'. До этого мы передавали значение select-а в таблицу, а не ключ. Пример:
1 2 3 4 5 6 7 |
<script> jQuery("#grid_id").jqGrid({ ... colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ], ... }); </script> |
В этом случае данные в таблице должны содержать "One" или "Two" для установки в колонку myname.
Теперь с этим свойством:
1 2 3 4 5 6 7 |
<script> jQuery("#grid_id").jqGrid({ ... colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ] ... }); </script> |
данные должны содержать ключи ( "1" или "2" ), но значения ( "One" или "Two" ) будут отображены в таблице.
Пример с showlink
Давайте предположим, что мы имеем следующее определение в colModel для типа форматирования showlink:
1 2 3 4 5 6 7 8 9 |
<script> jQuery("#grid_id").jqGrid({ ... colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...} ... ] ... }); </script> |
В результате получим:
1 |
http://localhost/someurl.php?id=123&action=edit |
Если вы хотите переопределить свойство id в ссылке или заменить своим myid, то следует сделать так:
1 2 3 4 5 6 7 8 9 |
<script> jQuery("#grid_id").jqGrid({ ... colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...} ... ] ... }); </script> |
В результате:
1 |
http://localhost/someurl.php?myid=123&action=edit |
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Пользовательское форматирование в jqGrid».
Предыдущая статья — «Пользовательские кнопки в jqGrid».