如何在 JQGrid 列中添加自定义掩码

Question

如何在 JQGrid 列中添加自定义掩码？我关注了documentation，但它不起作用。

在我的代码下面：

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, 
    rowNum : 30, 
    rowList : [30, 50, 100], 
    pager : '#p' + p_gridName, 
    recordpos : 'right', 
    viewrecords : true, 
    sortorder : "desc", 
    width: screen.availWidth - (screen.availWidth * 3 / 100),
    height : screen.availHeight - 250, 
    ignoreCase : true, 
    multiselect : false, 
    shrinkToFit : false, ...


function telefone(cellValue, opts, rowObject) {
    console.log("gri.locale-pt-br.js formatter telefone " + cellValue);
    return "Telefone: " + cellValue;
}

我的 colModel 值...

[
{formatter=integer, index=id, hidden=true, sortable=true, sorttype=integer, width=75, align=center, name=id}, 
{formatter=integer, index=VPD_GEMPI, search=false, hidden=true, sorttype=integer, sortable=true, width=0, align=right, name=VPD_GEMPI, editrules={number=true, required=true}, editable=true}, 
{formatter=date, formatoptions={srcformat=ISO8601Short, newformat=d/m/Y}, index=DT_DIGIT, search=true, hidden=false, sortable=true, width=0, align=right, name=DT_DIGIT, dateFormat=d/m/Y, editrules={required=true, date=true}, editable=true}, 
{formatter=email, index=EMAIL, search=true, hidden=false, sorttype=text, sortable=true, width=0, align=right, name=EMAIL, editrules={text=true, required=false}, editable=true}, 
{formatter=telefone, index=TELCONTATO01, search=true, hidden=false, sorttype=text, sortable=true, width=0, align=right, name=TELCONTATO01, editrules={text=true, required=false}, editable=true}, 
{formatter=function (cellValue, opts, rowObject) { return telefone(cellValue, opts, rowObject); }, index=TELCONTATO02, search=true, hidden=false, sorttype=text, sortable=true, width=0, align=right, name=TELCONTATO02, editrules={text=true, required=false}, editable=true} 
]

只有整数、日期、电子邮件掩码有效。

当我的 colModel 格式化程序属性是整数、货币、电子邮件等时，它可以工作，但当电话是它时，它不会。

在我的模板格式化程序下方

;(function ($) {
    $.extend($.jgrid, {
        formatter :  {
        integer :  {
            thousandsSeparator : " ", 
            defaultValue : '0'
        },
        number :  {
            decimalSeparator : ",", 
            thousandsSeparator : ".", 
            decimalPlaces : 2, 
            defaultValue : '0,00'
        },
        currency :  {
            decimalSeparator : ",", 
            thousandsSeparator : ".", 
            decimalPlaces : 2, 
            prefix : "R$ ", 
            suffix : "", 
            defaultValue : '0,00'
        } ...
})(jQuery);

Answer 1

在 colModel 中查看您的图片，您的格式化电话将永远无法正常工作。 正如我发布的链接中的文档中所述，自定义格式化程序不应该用引号引起来，而只是写出来。

您可以为特定列定义自己的格式化程序。通常 这是一个功能。在格式化程序选项中设置时，这不应该 用引号括起来而不是用 () 输入 - 仅显示名称 函数。

你有

colModel:[
    ....
    {....., foramatter : "telefone",....    }
    ....
 ]

这是错误的：应该是：

colModel:[
    ....
    {....., foramatter : telefone,....    }
    ....
 ]

这是一个很大的区别

更新 ：如果你的系统只能生成字符串，你可以很容易地解决扩展格式化程序的问题，这样你就可以把字符串放在格式化程序属性中。要解决这个问题，您可以“注册”您的自定义格式化程序和取消格式化程序。例如，如果您想注册 formatter: "telefone" 您需要将 $.fn.fmatter.telefone 定义为 formatter 函数，并最终将 $.fn.fmatter.telefone.unformat 定义为 unformatter 函数，如下所示：

$.extend($.fn.fmatter, {
    telefone: function (cellValue, options, rowObject) { 
        // your code here
        ...
        // return a string 
    }
});
$.extend($.fn.fmatter.telefone, {
    unformat: function (cellValue, options, elem) {
        // code for unformatter
        ...
    }
});

希望对您有所帮助。