Как добавить пользовательскую маску в столбцы JQGrid

Question

Как добавить пользовательскую маску в столбец JQGrid? Я следовал документации , но она не работает.

Ниже моего кода:

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 является целое число, валюта, адрес электронной почты и т. Д. c. это работает, но когда телефон, это не так.

Ниже моего шаблона форматирования

;(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, так что вы можете поместить строку в свойство formatter. Чтобы решить эту проблему, вы можете «зарегистрировать» свой пользовательский форматер и неформатор. Например, если вы хотите зарегистрировать formatter: «telefone», вам нужно определить $ .fn.fmatter.telefone как функцию форматирования и, в конечном итоге, $ .fn.fmatter.telefone.unformat как функцию неформатирования, например:

$.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
        ...
    }
});

Надеюсь, что это поможет.