Вы не разместили никакого кода, поэтому я попытался использовать digitalBush маскированный плагин jQuery для редактирования часов самостоятельно. Кажется, хорошая работа, и я получил
во встроенном редактировании или
в редактировании формы.
Я реализовал это следующим образом. Сначала я определил две маски: одну для ввода цифр от 0 до 2, а следующую маску для ввода цифр от 0 до 5:
$.mask.definitions['2']='[0-2]';
$.mask.definitions['5']='[0-5]';
и использовал следующее определение столбца «время» в сетке:
{name: 'time', index: 'time', width: 70, editable: true,
editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }},
editrules: {time: true}}
Я добавил проверку времени в отношении editrules: {time: true}, чтобы запретить ввод времени, например 27:20. Поскольку стандартное отображение времени проверки не является идеальным, ошибка появляется
мы можем улучшить результаты, используя пользовательскую проверку:
{name: 'time', index: 'time', width: 70, editable: true,
editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }},
editrules: {custom: true, custom_func: function (value) {
if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])$/.test(value)) {
return [true, ""];
} else {
return [false, "is wrong time.<br/>Please enter the time in the form <b>hh:mm</b>"];
}
}}}
, который изменяет сообщение об ошибке проверки на следующее
Я уверен, что вы можете улучшить видимость с помощью другой настройки плагина маски и проверки. В любом случае мои эксперименты показывают, что можно успешно использовать плагин mask в jqGrid.
Вы можете увидеть демо здесь .
ОБНОВЛЕНО : Извините, Рон, что написал это, но код, который вы разместили, действительно хороший пример того, как нужно не писать программу и как нет использовать jqGrid. Вначале я не хотел писать какие-либо комментарии, но позже я решил описать вам, что не так в коде, и объяснить, как нужно модифицировать код.
Первая проблема в вашем коде состоит в том, что вы использовали объектный класс SampleJSObject вместо прямого использования функций. Из синтаксиса, как конструктор и методы объекта должны быть определены, код корректен, но ...
- Какой смысл иметь общие настройки global внутри конструктора объекта. Йо использовал
$.mask.definitions['5'] = '[0-5]'; например. При каждом создании экземпляра SampleJSObject глобальные настройки будут установлены или перезаписаны. Похоже, побочные эффекты.
- Вы определили
function SampleJSObject на верхнем уровне вашего кода, а не внутри $(document).ready, где вы его используете, поэтому вы определили global class.
- Внутри
$(document).ready вы определили неинициализированную переменную lastSel и попытаетесь инициализировать ее внутри function SampleJSObject, определенной в другой области видимости. Таким образом, переменная lastSel остается неинициализированной в $(document).ready, но вы устанавливаете другую глобальную переменную lastSel внутри конструктора.
- Методы типа
minutesToHours не имеют ничего общего с вашим классом SampleJSObject. Почему функция или calculateHoursAndMinutes должна быть членом класса? На мой взгляд, это ошибка в дизайне.
- Метод
init устанавливает только свойство jqgridParms. Вы можете сделать это таким же образом в конструкторе, но в обоих случаях мне не ясно, зачем нужен метод и метод, который определяет такие специфические параметры, как вы. Не думаю, что вы создадите более одного экземпляра такого специфического класса . Зачем нужен такой класс, где вам придется переписать практически любой метод для создания второго экземпляра класса?
- В списке параметров jqGrid вы используете
datatype: "local", но не используете параметр gridview: true и data, который позволяет создавать данные вместе с сеткой . Это улучшает производительность сетки во много раз, особенно для сеток с большим количеством рядов. Использование addRowData в loadGrid в качестве примера самого медленного метода. Более того, в случае rowNum: 10 будет проигнорировано, и локальная подкачка не будет выполнена.
метод calculateTotal демонстрирует, пожалуй, самую медленную реализацию виртуального столбца WeekTotal. Наиболее эффективной реализацией этой функции будет использование пользовательского форматера для столбца WeekTotal
{ name: "WeekTotal", index: "WeekTotal", width: 55, align: "center" ,
formatter: function (cellvalue, options, rowObject) {
/* here you can access the other columns of the same row just as rowObject.SundayMinutes and return from the function the calculated WeekTotal value as string of HTML fragment */
}}
Если вам нужно использовать много столбцов с одинаковыми свойствами, вы можете определить шаблон столбца (см. здесь ):
var myTimeTemplate = {width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30, dataInit: function (elem) { $(elem).mask("29:59"); }}
и затем уменьшите определение столбца SundayMinutes, например, до
{name: "SundayMinutes", template: myTimeTemplate }