jqgrid面具编辑 [英] jqgrid mask edit

问题描述

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

I am using a jqgrid where I'd like to use inline editing and mask the entry such that the user is prompted to enter hh:mm where hh = hours and mm = minutes. I'm using the digitalBush masked jquery plugin. The issue is that when I call it from initData, it overwrites the current data in that field. I noticed that this behavior is different when you use a modal form to do the editing. Does anyone have a solution for this issue? I'll call the mask from any event, and I'm happy to use any available plugin. As far as I can tell, the jqgrid formatter does not provide a custom mask that guides the user entry in the format in which I need it. Also happy to be wrong about that (with a snippet of code to support it of course).

非常感谢.

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

Update: I managed to cobble together a demo of the problem I'm having. S-O obviously strips out the html that I wanted to wrap this in so that it could be plugged in and run as-is, so you'll need to wrap this in some html to see it work. Thanks again for the assistance. Here's the code:

    <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>

推荐答案

您没有发布任何代码，因此我尝试使用带遮罩的jQuery插件用于编辑我几个小时.看起来不错，我收到了

You don't posted any code, so I tried to use digitalBush masked jQuery plugin for editing of hours myself. It seems good work and I received

直接编辑或

在表单编辑中.

我以以下方式实现了这一点.首先，我定义了两个掩码:一个掩码输入0-2的数字，下一个掩码输入0-5的数字:

I implemented this in the following way. First of all I defined two masks: one to enter digits from 0-2 and the next mask to enter digits from 0-5:

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

，并在网格中使用了以下时间"列的定义:

and used the following definition of 'time' column in the grid:

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

我添加了关于editrules: {time: true}的时间验证，以防止输入类似于27:20的时间.因为标准时间验证显示不完美错误警告

I added time validation with respect of editrules: {time: true} to prevent to enter the time like 27:20. Becease the standard time validation display not perfect error warning

我们可以使用自定义验证来改善结果:

we can improve the results using custom 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.<br/>Please enter the time in the form <b>hh:mm</b>"];
        }
    }}}

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

which changes the validation error message to the following

我确信，可以通过另一种自定义遮罩插件和验证来提高可见性.我的实验以任何方式表明，可以成功使用jqGrid中的mask插件.

I am sure that you can improve the visibility with another customization of the mask plugin and validation. In any way my experiments show that one can do use successfully mask plugin in jqGrid.

您可以在此处观看演示.

更新:抱歉，Ron编写了该代码，但是您发布的代码确实是一个很好的示例，说明如何不编写程序以及如何编写程序>不使用jqGrid.一开始我不想写任何评论，但后来我确实决定向您描述代码中的错误，并解释如何修改代码.

UPDATED: Sorry Ron, for writing of that, but the code which you posted is really good example how one should not write the program and how one should not use jqGrid. At the beginning I don't wanted to write any comments, but later I do decided to describe you what is wrong in the code and explain how one should modify the code.

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

The first problem in your code is that you used object class SampleJSObject instead of direct usage of functions. From the syntax how the constructor and the methods of an object should be defined the code is correct, but ...

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

• 方法calculateTotal可能说明了虚拟WeekTotal列的最慢实现.该功能最有效的实现是使用自定义格式化程序 WeekTotal列

• Which sense hast to make some general global settings inside of the object constructor. Yo used $.mask.definitions['5'] = '[0-5]'; for example. Every create of the instance of SampleJSObject the global settings will be set or overwritten. It looks like side effects.
• You defined function SampleJSObject on the top level of your code and not inside of $(document).ready where you use it, so you defined global class.
• Inside of $(document).ready you defined uninitialized variable lastSel and try to initialize it inside of function SampleJSObject defined in another scope. So the variable lastSel stay uninitialized in $(document).ready, but you set another global variable lastSel inside of the constructor.
• The methods like minutesToHours has nothing to do with your class SampleJSObject. Why the function or calculateHoursAndMinutes should be member of the class? It's error in design in my opinion.
• The method init set only the jqgridParms property. You can do it in the same way in the constructor, but in both cases it is not clear for me why one need and method which defines so specific parameters like you do. I don't think that you will be create more then one instance of such specific class. Why one need have such class where you will have to overwrite almost any method to create the second instance of the class?
• In the list of parameters of jqGrid you use datatype: "local", but not use gridview: true and data parameter which allows to create the data together with grid. It improve the performance of grid in many times especially for grids with the large number of rows. The usage of addRowData in loadGrid in an example of the most slow method. Moreover in the case the rowNum: 10 will be ignored and no local paging will be done.

• the method calculateTotal demonstrate probably the most slowest implementation of the virtual WeekTotal column. The most effective implementation of the feature would be the usage of custom formatter for the WeekTotal column

{ 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 */ }}

{ 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 */ }}

如果您需要使用许多具有相同属性的列，则可以定义列模板(请参见此处 ):

If you nee to use many columns with the same properties you can define the column template (see here):

var myTimeTemplate = {width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30, dataInit: function (elem) { $(elem).mask("29:59"); }}

，然后将列SundayMinutes的定义减少为

and then reduce the definition of the column SundayMinutes for example to

{name: "SundayMinutes", template: myTimeTemplate }

这篇关于jqgrid面具编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！