jqgrid掩码编辑

我正在使用jqgrid，我想使用内联编辑并屏蔽条目，以便提示用户输入hh：mm，其中hh =小时和mm =分钟。 我正在使用digitalBush蒙面jquery插件。 问题是，当我从initData调用它时，它会覆盖该字段中的当前数据。 我注意到当您使用模式表单进行编辑时，此行为会有所不同。 有没有人有这个问题的解决方案？ 我将从任何事件中调用掩码，我很乐意使用任何可用的插件。 据我所知，jqgrid格式化程序不提供自定义掩码，以我需要的格式引导用户输入。 也很高兴错误（当然还有一小段代码来支持它）。

非常感谢提前。

更新：我设法凑齐了我正在解决的问题的演示。 所以显然删除了我想要包装它的html，以便它可以插入并按原样运行，所以你需要将它包装在一些html中才能看到它的工作原理。 再次感谢您的帮助。 这是代码：

         $.jgrid.no_legacy_api = true; $.jgrid.useJSON = true;   $(function () { var lastSel = -1; var mydata = [ { HoursWorked: "0:00" }, ]; $.mask.definitions['5'] = '[0-5]'; $.mask.definitions['2'] = '[0-2]'; var $grid = $("#MyGrid"); $grid.jqGrid({ datatype: "local", data: mydata, height: 'auto', width: 700, colNames: ["Hours Worked"], colModel: [ { name: "HoursWorked", index: "HoursWorked", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30, dataInit: function (elem) { $(elem).mask("29:59"); } }, align: "center", editrules: { custom: true, custom_func: validHourEntry } } ], multiselect: false, caption: "My sample grid with Mask", rowNum: 10, cellEdit: true, rowList: [5, 10, 20], pager: '#MyGridpager', gridview: true, beforeSelectRow: function (rowid) { if (rowid !== lastSel) { $(this).jqGrid('restoreRow', lastSel); lastSel = rowid; } return true; }, cellsubmit: "clientArray" }).jqgrid("navGrid", "#MyGrid", { add: false, del: false }); ; }); function validHourEntry(value, colname) { var editSuccess = true; var errorMsg = ""; if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])$/.test(value)) { return [true, ""]; } else { return [false, "is wrong time.
Please enter the time in the form hh:mm"]; } }  

Answer 1

你没有发布任何代码，所以我尝试使用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}时间validationeditrules: {time: true}以防止输入时间如27:20 。 增加标准时间validation显示不完美的错误警告

我们可以使用自定义validation来改进结果：

 {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.
Please enter the time in the form hh:mm"]; } }}} 

这会将validation错误消息更改为以下内容

我确信您可以通过另一个自定义掩码插件和validation来提高可见性。 无论如何，我的实验表明，可以在jqGrid中成功使用掩码插件。

你可以在这里看到演示。

更新 ：对不起罗恩，为了写这个，但你发布的代码是一个很好的例子，如何不应该编写程序以及如何不使用jqGrid。 一开始我不想写任何评论，但后来我决定向你描述代码中的错误并解释如何修改代码。

代码中的第一个问题是您使用了对象类SampleJSObject而不是直接使用函数。 从语法中如何定义构造函数和对象的方法，代码是正确的，但是……

• 在对象构造函数中进行一些通用的全局设置有哪些意义呢？ Yo使用$.mask.definitions['5'] = '[0-5]'; 例如。 每次创建SampleJSObject实例时，都将设置或覆盖全局设置。 它看起来像副作用。
• 您在代码的顶层定义了function SampleJSObject ，而不是在$(document).ready中使用它，因此您定义了全局类。
• 在$(document).ready你定义了未初始化的变量lastSel并尝试在另一个范围内定义的function SampleJSObject初始化它。 所以变量lastSel在$(document).ready保持未初始化，但是你在构造函数中设置了另一个全局变量lastSel 。
• SampleJSObject等方法与您的SampleJSObject类SampleJSObject 。 为什么函数或calculateHoursAndMinutes应该是该类的成员？ 我认为这是设计上的错误。
• 方法init仅设置jqgridParms属性。 您可以在构造函数中以相同的方式执行此操作，但在这两种情况下，我都不清楚为什么需要和方法来定义像您这样的特定参数。 我认为你不会创建这样一个特定类的一个实例 。 为什么需要这样的类，你必须覆盖几乎任何方法来创建类的第二个实例？
• 在jqGrid的参数列表中，您使用datatype: "local" ，但不使用gridview: true和data参数，它允许与网格一起创建数据 。 它可以多次提高网格性能，特别是对于行数较多的网格。 在最慢的方法示例中，在loadGrid中使用addRowData 。 此外，在rowNum: 10将被忽略的情况下，将不会进行本地分页。

• 方法calculateTotal可能是虚拟WeekTotal列最慢的实现。 该function最有效的实现是使用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 }