gpt4 book ai didi

jquery - jqgrid蒙版编辑

转载 作者:行者123 更新时间:2023-12-01 00:53:37 33 4
gpt4 key购买 nike

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

非常感谢。

更新:我设法拼凑了我遇到的问题的演示。 S-O 显然去掉了我想要将其包装在其中的 html,以便它可以插入并按原样运行,因此您需要将其包装在一些 html 中才能看到它的工作。再次感谢您的帮助。这是代码:

    <title>Mask Problem</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;

</script>
<script type="text/javascript">

$(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.<br/>Please enter the time in the form <b>hh:mm</b>"];
}
}


</script>

最佳答案

您没有发布任何代码,因此我尝试使用 digitalBush masked jQuery plugin 自己编辑小时数。看起来不错,我收到了

在线编辑或

在表格编辑中。

我通过以下方式实现了这一点。首先,我定义了两个掩码:一个输入 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>"];
}
}}}

将验证错误消息更改为以下内容

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

你可以看到演示 here

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

您代码中的第一个问题是您使用了对象类 SampleJSObject 而不是直接使用函数。从应该如何定义对象的构造函数和方法的语法来看,代码是正确的,但是......
  • 必须在对象构造函数内部进行一些通用的 全局 设置。例如,您使用了 $.mask.definitions['5'] = '[0-5]';。每次创建 SampleJSObject 实例时,都会设置或覆盖全局设置。看起来像是副作用。
  • 您在代码的顶层定义了 function SampleJSObject,而不是在使用它的 $(document).ready 内部,因此您定义了全局类。
  • $(document).ready 内部定义了未初始化的变量 lastSel 并尝试在另一个作用域中定义的 function SampleJSObject 内部初始化它。因此变量 lastSel$(document).ready 中保持未初始化状态,但您在构造函数中设置了另一个全局变量 lastSel
  • minutesToHours 之类的方法与您的类 SampleJSObject 无关。为什么函数或 calculateHoursAndMinutes 应该是类的成员?在我看来,这是设计错误。
  • 方法 init 只设置 jqgridParms 属性。您可以在构造函数中以相同的方式执行此操作,但是在这两种情况下,我都不清楚为什么需要和方法像您一样定义如此具体的参数。 我认为您不会创建多个这样的特定类 的实例。为什么需要有这样的类,您必须覆盖几乎所有方法来创建该类的第二个实例?
  • 在 jqGrid 的参数列表中,您使用 datatype: "local" ,但不使用 gridview: truedata 参数,这允许 与网格 一起创建数据。它多次提高了网格的性能,尤其是对于行数较多的网格。 addRowDataloadGrid 中的用法,以最慢方法为例。此外,在 rowNum: 10 将被忽略并且不会进行本地分页的情况下。
  • 方法 calculateTotal 演示了可能是虚拟 WeekTotal 列最慢的实现。该功能最有效的实现是将 custom formatter 用于 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 */
    }}
  • 如果您需要使用许多具有相同属性的列,您可以定义列模板(请参阅 here ):
    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 }
  • 关于jquery - jqgrid蒙版编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8408104/

    33 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com