在编辑行的 jqGrid 列中添加掩码答案

【问题标题】：Adding mask in jqGrid colum on editing line在编辑行的 jqGrid 列中添加掩码
【发布时间】：2020-03-10 13:07:12
【问题描述】：

当我使用 jqGrid 添加或编辑记录时，我需要为某些列创建电话掩码（我的 jqGrid 版本是 4.5.4）。

在我的代码下面：

this.montarGRID = function (p_gridName, p_dados, p_header, p_descriptor, p_contentName, p_primaryKey, p_filtroGrid) {
jQuery("#" + p_gridName).jqGrid( {
    data : p_dados, 
    datatype : "local", 
    sortable : true, 
    colNames : p_header, 
    colModel : p_descriptor,
...

这个网格是动态生成的。我传递了一个带有 colModel 内容的 json。

[
{"formatter":"integer","index":"id","hidden":true,"sortable":true,"sorttype":"integer","width":75,"align":"center","name":"id"},
{"formatter":"telefone","index":"TELCONTATO01","search":true,"hidden":false,"sorttype":"text","sortable":true,"width":0,"align":"right","name":"TELCONTATO01","editoptions":{"text":true,"required":false,"dataInit":"function (elem) {  return mostra_telefone(elem); }"},"editrules":{"text":true,"required":false,"dataInit":"function (elem) {  return mostra_telefone(elem); }"},"editable":true},
{"formatter":"telefone","index":"TELCONTATO02","search":true,"hidden":false,"sorttype":"text","sortable":true,"width":0,"align":"right","name":"TELCONTATO02","editoptions":{"text":true,"required":false,"dataInit":"function (elem) {  return mostra_telefone(elem); }"},"editrules":{"text":true,"required":false,"dataInit":"function (elem) {  return mostra_telefone(elem); }"},"editable":true}
]

生成电话掩码的方法...

(function($) {
    'use strict';
    $.extend($.fn.fmatter, {
        mostra_telefone : function (elem) {
            $(elem).mask("(99)9999-9999?");
        }
    });
})(jQuery);

但当我选择、更改或添加记录时，它永远不会被调用。

【问题讨论】：

让我问一些问题。将电话源数据传递到网格时如何看待它？您希望如何在网格中显示？您希望在编辑时如何显示和检查。 示例答案：源电话字段是这样的：12345678。在网格中，我希望显示为“电话：12345678”，在内联编辑中编辑时，我希望显示为 (12)-345 -678 并检查是否输入正确。
源电话字段是 2899695910，在网格中我希望显示为 (28)9969-5910，并且在在线编辑中编辑时我希望显示为 (28)9969-5910，并且用户不能输入字母或超过 10 个数字

标签： javascript jquery jqgrid

【解决方案1】：

这是执行所需行为的一段代码。为此，我们使用 inputpask 插件。 $("#jqGrid").jqGrid({ ... col型号：[

                {
                    name: 'Telephone',
                    width: 100,
                    formatter: function(cellvalue, options, rowObject) {
                        var re = new RegExp("([0-9]{3})([0-9]{3})([0-9]{4,6})", "g");
                        return cellvalue.replace(re, "($1) $2-$3"); 
                    },
                    unformat : function(cellvalue, options, rowObject) {
                        return cellvalue.replace("(",'').replace(") ",'').replace("-",'');
                    },
                    editable: true,
                    edittype: "custom",
                    editoptions :{
                        custom_element : function(value, options) {
                            var el = document.createElement("input");
                            el.type="text";
                            el.value = value;
                            $(el).addClass('inline-edit-cell ui-widget-content ui-corner-all').inputmask({"mask": "(999) 999-9999"});
                            return el;                              
                        },
                        custom_value : function(elem, operation, value) {
                            if(operation === 'get') {
                                return $(elem).val().replace("(",'').replace(") ",'').replace("-",'').replace(/\_/g,'');;
                            } else if(operation === 'set') {
                                $(elem).val(value);
                            }                               
                        }
                    },
                    editrules : {
                        requiered : true,
                        custom : true,
                        custom_func : function(val, name) {
                            // special replace mask at end
                            var cel  = val.replace("(",'').replace(") ",'').replace("-",'').replace(/\_/g,'');
                            if(cel.length !== 10) {
                                return [false,"Please, enter correct phone number"];
                            } 
                            return [true,""];
                        }
                    }   
                },                  

          ....
       ],
    ....
});

此代码也应该适用于您的版本。这里还有一个link to the demo。

【讨论】：

托尼，我按照说明操作，它成功了！谢谢！但现在我需要将此代码包含在 JSON 中，因为我需要动态生成 colModel 值。我什至设法将格式化程序作为字符串传递并执行 jquery 方法来格式化和取消格式化掩码。是否可以对“custom_value”、“custom_func”和“custom_element”方法做同样的事情？
很遗憾没有。并非所有事件都可以设置为字符串。如果您通过 json 自动生成模型，这意味着您将参数存储在数据库中。为此，Guriddo jqGrid 版本 5 及更高版本具有用于导出和导入的内置方法，这与事件的定义方式无关（事件函数被正确处理）。这是在 Guriddo jqGrid 中 - 我不记得这个功能在你的版本中是否可用，因为它很旧。
在 Guriddo jqGrid 上查看 here for more info。请阅读到最后以查看可用的方法。
我终于设法解决了托尼的问题。我浏览了生成的 JSON 并将字符串更改为触发“custom_value”、“custom_func”和“custom_element”方法的“保留字”。我将解决方案代码放在新答案中

【解决方案2】：

我解决了这个问题：

function custom_element_telefone(value, options){
    var el = document.createElement("input");
    el.type="text";
    el.value = value;
    $(el).addClass('inline-edit-cell ui-widget-content ui-corner-all').inputmask({"mask": "(99)9999-9999#"});
    return el;
};

this.montarGRID = function (p_gridName, p_dados, p_header, p_descriptor, p_contentName, p_primaryKey, p_filtroGrid) {

    p_descriptor.forEach(col => {
        if (!col.editoptions) return;
        if (!col.editoptions.custom_element) return;

        switch (col.editoptions.custom_element) {
            case "custom_element_telefone":
                col.editoptions.custom_element = custom_element_telefone;
                break;            
        }
    });

    jQuery("#" + p_gridName).jqGrid( {
        data : p_dados, 
        datatype : "local", 
        sortable : true, 
        colNames : p_header, 
        colModel : p_descriptor,
...

【讨论】：