jquery – jqgrid掩码编辑

我正在使用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>

$.mask.deFinitions['2']='[0-2]';
$.mask.deFinitions['5']='[0-5]';

{name: 'time',index: 'time',width: 70,editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }},editrules: {time: truE}}

{name: 'time',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>"];
        }
    }}}