jqgrid掩码编辑

Question

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

非常感谢提前.

更新:我设法凑齐了我正在解决的问题的演示.所以显然删除了我想要包装它的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>

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}以防止进入时间之类的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中成功使用掩码插件.

你可以在这里看到演示.

已更新:对不起罗恩,为的是写作,但你发布的代码确实是很好的例子,一个应该怎么不写程序,一个应该如何不使用的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: true和data参数,它允许与网格一起创建数据.它可以多次提高网格性能,特别是对于行数较多的网格.在一个最慢的方法的例子中使用addRowDatain 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 calculatedWeekTotalvalue 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 }