Does jqgrid support line break formatting?

Asked

Viewed 505 times

3

I’m developing an application where I use Jquery(1.11) with Jqgrid(4.54). This application has already been developed in ASP, where in its contents there is a login data totalizer along with the data displayed as a result in the table. I do not know if in the Jqgrid would have to apply this line break to display the totals. Can anyone tell me if it is possible or any other way to display these totals using Jqgrid?

Below is the table of the code in ASP:

Tabela em ASP

Logo the table using Jqgrid:

Tabela JqGrid

and here the Grid code:

     var modeloColunas = [
            { name : "login", index : "login", label: "Login", sortable: true, sorttype: "text", jsonmap: "login" },
            { name : "nome", index : "nome", label: "Nome", sortable: true, sorttype: "text", jsonmap: "nome" },             
            { name : "canal", index : "canal", label: "Canal", sortable: true, sorttype: "text", jsonmap: "canal" },
            { name : "tipoSolicitacao", index : "tipoSolicitacao", label: "Tipo Solicitação", sortable: true, sorttype: "text", jsonmap: "tipoSolicitacao" },
            { name : "totalAnalise", index : "totalAnalise", label: "Total Analise", sortable: true, sorttype: "int", jsonmap: "totalAnalise" },
            { name : "totalAtendimento", index : "totalAtendimento", label: "Total Atendimento", sortable: true, sorttype: "text", jsonmap: "totalAtendimento" },           
            { name : "mediaAtendimento", index : "mediaAtendimento", label: "Média Atendimento", sortable: true, sorttype: "text", jsonmap: "mediaAtendimento" }];

          var subGridHabilitado = true;

        // We pass two parameters: subgrid_id is an id of the div tag created within a        table. The row_id is the id of the row.
        // If we want to pass additional parameters to the url we can use the method getRowData(row_id) - which returns associative array in type
        // name-value here we can easy construct the following.
        var gridInterno = function(subgrid_id, row_id) {
            var rowData = $("#respostaRelatorio").jqGrid("getRowData", row_id);
            var urlParametrosFormularioInterno = "?" + $("form .filtroRelatorioInterno").fieldSerialize() + "&filtro.tipoSolicitacao=" + retornaValorTipoSolicitacao(rowData.tipoSolicitacao) + "&filtro.login=" + rowData.login;
            var subgrid_table_id = subgrid_id + "_t";
            var idPaginacao = "#paginacaoSub" + row_id;
            $("#" + subgrid_id).html("<table id=\"" + subgrid_table_id + "\" class=\"scroll\"></table><div id=\"paginacaoSub" + row_id + "\"></div>");
            $("#" + subgrid_table_id).jqGrid({
                url: urlRelatorioInterno + urlParametrosFormularioInterno,
                colModel: [
                    { name: "solicitacao", index: "solicitacao", jsonmap: "solicitacao", label: "Solicita&ccedil;&atilde;o", sortable: true, sorttype: "int" },
                    { name: "dataInicioAnalise", index: "dataInicioAnalise", jsonmap: "dataInicioAnalise", label: "Data In&iacute;cio da An&aacute;lise", sortable: true, sorttype: "dataInicioAnalise", formatter: "date" },
                    { name: "dataFinalAnalise", index: "dataFinalAnalise", jsonmap: "dataFinalAnalise", label: "Data Final da An&aacute;lise", sortable: true, sorttype: "date", formatter: "date"  },
                    { name: "tipoAnalise", index: "tipoAnalise", jsonmap: "tipoAnalise", label: "Tipo An&aacute;lise", sortable: true, sorttype: "text" },
                    { name: "tempoAnalise", index: "tempoAnalise", jsonmap: "tempoAnalise", label: "Tempo An&aacute;lise", sortable: true, sorttype: "text" },
                    { name: "fila", index: "fila", jsonmap: "fila", label: "Fila", sortable: true, sorttype: "text" }],
                pager: idPaginacao,
                width: 1073,
                height: "auto",
                rowNum: 10,
                rowList: [10, 20, 30, 40, 50],
                loadonce: true,
                beforeRequest: function() { $.blockUI(); },
                gridComplete: function() { $.unblockUI(); }
            }).jqGrid("navGrid", idPaginacao, { add: false, edit: false, del: false, search: false, refresh: false
            }).jqGrid("navButtonAdd", idPaginacao, {
                caption: "Exportar Excel",
                onClickButton: function() {
                    $.blockUI();
                    $("#botaoExportarXLS").downloadArquivo(urlExportarExcelInterno, urlParametrosFormularioInterno.substring(1));
                },
                id: "botaoExportarXLS"
            }).jqGrid("navButtonAdd", idPaginacao, {
                caption: "Exportar PDF",
                onClickButton: function() {
                    $.blockUI();
                    $("#botaoExportarPDF").downloadArquivo(urlExportarPdfInterno, urlParametrosFormularioInterno.substring(1));
                },
                id: "botaoExportarPDF"
            });
        };

1 answer

1

All you have to do is insert <br/> in the text you want to break into lines. Whether on the server, before sending, or on the client, before you populate the grid (I couldn’t find in your code the moment you populate, so I can’t give a more specific instruction). Here it is an example in jsFiddle which confirms that this method works. Note the line breaks inserted inside the strings to be displayed:

var data = [[48803, "DSK1", "", "0220<br/>0220", "OPEN"], 
            [48769, "APPR", "", "7773<br/>3337", "ENTERED"]];

Browser other questions tagged

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