Jqgrid put phone masks in column output in JQGRiD?

Question

Jqgrid put phone masks in column output in JQGRiD?

Navigation

#1 by (1 votes)

1

Code of the table that mounts JQGRID:

var grid = $("#jqGrid").jqGrid({
    url:'/Portaria/Agenda/Listar',
    mtype: 'GET',
    datatype: 'json',
    colModel: [
        { label: 'Id', name: 'id', width: 50 },
        { label: 'Nome', name: 'nome', width: 250 },         
        { label: 'Telefone1', name: 'telefone1', width: 80 },         
        { label: 'Telefone2', name: 'telefone2', width: 80 },         
        { label: 'Telefone3', name: 'telefone3', width: 80 },         

    ],

    loadonce: true,
    pager: '#jqGridPager',
    rowNum: 10,
    rowList: [10, 20, 30, 50],
    viewrecords: true,
    height: 250

});
$("#jqGrid").jqGrid('navGrid', 'jqGridPager', { edit: false, add: false, del: false })

o Return

How to format the fields Phone1, Phone2, Phone3, putting the mask on?

exemplo: (99)9999-9999?9

javascript jquery jqgrid

asked by anonymous 18.04.2018 / 15:46

1 answer

Change CSS in element that contains certain text Is it possible to create a column in LINQ?

score 1 · Accepted Answer

 var grid = $("#jqGrid").jqGrid({
        url: url,
        datatype: 'json',
        mtype: 'GET',  

        postData: {
                  nome: function () { return jQuery("#nome").val(); }
        }, 
        colModel: [
            { label: 'Id', name: 'id', width: 50 },
            { label: 'Nome', name: 'nome', width: 250 },         
            { label: 'Telefone1', name: 'telefone1', width: 180, formatter: colocaMascara },         
            { label: 'Telefone2', name: 'telefone2', width: 180, formatter: colocaMascara },         
            { label: 'Telefone3', name: 'telefone3', width: 180, formatter: colocaMascara }         
        ],

        viewrecords: true,
            rowNum: 20,
            rowList: [20, 40, 100],
            height: "auto",
            //height: 400,
            emptyrecords: "Nenhum Cliente",
            loadtext: "Buscando e carregando...",
            //rowNum: 20,
            pager: "#jqGridPager",
            loadonce: true

    });

Call the function:

function colocaMascara(cellvalue, options, rowObject) {
    var length = cellvalue.length;
    var telefoneFormatado;


if (length === 0) {
    telefoneFormatado = "";
}
if (length === 10) {
    telefoneFormatado = '(' + cellvalue.substring(0, 2) + ') ' + cellvalue.substring(2, 6) + '-' + cellvalue.substring(6, 10);
} else if (length === 11) {
    telefoneFormatado = '(' + cellvalue.substring(0, 2) + ') ' + cellvalue.substring(2, 6) + '-' + cellvalue.substring(6, 11);
}
return telefoneFormatado;

}