How to bring the total of each column in Footerrow from a jqGrid?

Asked

Viewed 796 times

11

I’m using the property grouping of jqGrid (4.6.0) with jQuery(1.11.0), but I could only generate the total per column and that’s not what I want, I would like the overall total.
jqGrid contains the property grouping containing the footerrow which would be the footnote row of the Grid (table). Does anyone know how to bring the totals in footerrow?

The properties I’m using on Grid:

$("#respostaRelatorio").jqGrid({
    url: urlRelatorio + "?" + dadosRelatorio,
    colModel: modeloColunas,
    mtype: "POST",
    altRows: true,
    datatype: "json",
    loadonce: true,
    height: "auto",
    width: 1130,
    rowNum: 10,
    rowList: [ 10, 20, 30, 40, 50 ],
    viewrecords: true,
    pager: "#paginacao",
    sortorder: "asc",
    shrinkToFit: false,
    headertitles: true,
    loadui: "disable",
    rownumbers: true,
    autoencode: true,
    caption: "Resultados encontrados",
    deselectAfterSort: true,
    gridview: true,
    idPrefix: "id",
    rowTotal: 4000,
    sortable: true,
    toppager: true,
    resizable: true,
    grouping: true,
    groupingView: {
        groupField: [ 'loginMedico' ],
        groupCollapse: false,
        groupOrder: [ 'asc' ],
        groupSummary: [ true ],
        groupDataSorted: true
    },
    footerrow: true,
    userDataOnFooter: true
});

var modeloColunas = [
    { name: "loginMedico", index: "loginMedico", jsonmap: "loginMedico", label: "Login Médico", sortable: true, sorttype: "text", summaryType: "count", summaryTpl: "total" },
    { name: "nomeMedico", index: "nomeMedico", jsonmap: "nomeMedico", label: "Nome do Médico", sortable: true, sorttype: "text" },
    { name: "perfilMedico", index: "perfilMedico", jsonmap: "perfilMedico", label: "Perfil Médico", sortable: true, sorttype: "text"},
    { name: "tipoSolicitacao", index: "tipoSolicitacao", jsonmap: "tipoSolicitacao", label: "Tipo da Solicitação", sortable: true, sorttype: "text" },
    { name: "cancelada", index: "cancelada", jsonmap: "cancelada", label: "Cancelada", sortable: true, sorttype: "int" },
    { name: "liberada", index: "liberada", jsonmap: "liberada", label: "Liberada", sortable: true, sorttype: "int", summaryType: "sum" },
    { name: "negada", index: "negada", jsonmap: "negada", label: "Negada", sortable: true, sorttype: "int", summaryType: "sum" },
    { name: "pendente", index: "pendente", jsonmap: "pendente", label: "Pendente", sortable: true, sorttype: "int", summaryType: "sum" },
    { name: "total", index: "total", jsonmap: "total", label: "Total", sortable: true, sorttype: "int", summaryTpl: "total"} ];

The image of mine Grid, note that the footerrow appears empty: tabela

javascript jquery jqgrid

  • Put an example on jsfiddle that makes it easier to help you.

  • William, as here as in SOE asked you for a full and functional example, I present to you jsfiddle.net, always seek to post a self-contained and complete example, including sample data to get better answers faster.

  • @Anthonyaccioly I use the jsfidlle.net tool, but it turns out that on this occasion there is no html page, making it not necessary to use jsfidle and what I do there would be basically what I passed to you here.

  • You could create a functional example only with the div jqGrid in the HTML field and all Javascript code (including sample data, which is what was missing here), so it’s easier to play with your example and give you a functional response. The idea isn’t to push jsfiddle, just to help you get more answers (I don’t know if my answer solved your problem).

1 answer

8


At a glance in this example.

Basically you should add a function loadComplete at the jqGrid to feed the summary line: 

loadComplete: function () {
    var $self = $(this);
    var somaCanceladas = $self.jqGrid("getCol", "cancelada", false, "sum");
    var somaLiberadas = $self.jqGrid("getCol", "liberada", false, "sum");
    var somaNegadas = $self.jqGrid("getCol", "negada", false, "sum");
    var somaPendentes = $self.jqGrid("getCol", "pendente", false, "sum");

    $self.jqGrid("footerData", "set", {
        loginMedico: "Total:", 
        cancelada: somaCanceladas, 
        liberada: somaLiberadas, 
        negada: somaNegadas,
        pendente: somaPendentes 
    });
}

Source: SOE - Getting the sum using footerdata on jqgrid

  • Sorry for the delay in gratifying you with the points @Anthonyaccioly, there was a change of design and I went a while without touching this code, I did a quick test and your example worked perfectly, I thank you for your attention and help.

Browser other questions tagged javascript jquery jqgrid

You are not signed in. Login or sign up in order to post.