web-dev-qa-db-fra.com

Comment activer jQgrid pour exporter des données au format PDF / Excel

Je suis nouveau dans le codage jQuery/jQgrid. J'utilise la version jQgrid 4.4.4 & jQuery 1.8.3. Je souhaite activer la fonctionnalité d'exportation vers PDF/Excel dans mon jQgrid. Pour cela, j'ai fait référence aux liens suivants - Cliquez ici et Cliquez ici . Sur la base de ces liens, j'ai développé quelques lignes de code en jquery qui sont les suivantes:

   .jqGrid('navGrid', topPagerSelector, { edit: false, add: false, del: false, search: false, pdf: true}, {}, {}, {}, {}
   }).jqGrid('navButtonAdd',topPagerSelector,{
    id:'ExportToPDF',
    caption:'',
    title:'Export To Pdf',
    onClickButton : function(e)
    {
        try {
            $("#tbPOIL").jqGrid('excelExport', { tag: 'pdf', url: sRelativePath + '/rpt/poil.aspx' });
        } catch (e) {
            window.location = sRelativePath + '/rpt/poil.aspx&oper=pdf';
        }
    },
    buttonicon: 'ui-icon-print'
});

Mais ce code ne fonctionne pas correctement. J'ai beaucoup cherché sur internet google mais je n'obtiens pas d'informations utiles et pertinentes pour accomplir ma tâche. Est-ce que quelqu'un sait comment faire ça ???

MISE À JOUR: Je n'utilise pas la version payante de jqgrid.

jqueryjqgridexport-to-excelexport-to-pdf
10
Rahul

fonction à appeler à l'intérieur de votre événement onclick.

function exportGrid(){
  mya = $("#" + table).getDataIDs(); // Get All IDs
var data = $("#" + table).getRowData(mya[0]); // Get First row to get the
// labels
var colNames = new Array();
var ii = 0;
for ( var i in data) {
    colNames[ii++] = i;
} // capture col names

var html = "<html><head>"
        + "<style script=&quot;css/text&quot;>"
        + "table.tableList_1 th {border:1px solid black; text-align:center; "
        + "vertical-align: middle; padding:5px;}"
        + "table.tableList_1 td {border:1px solid black; text-align: left; vertical-align: top; padding:5px;}"
        + "</style>"
        + "</head>"
        + "<body style=&quot;page:land;&quot;>";


for ( var k = 0; k < colNames.length; k++) {
    html = html + "<th>" + colNames[k] + "</th>";
}
html = html + "</tr>"; // Output header with end of line
for (i = 0; i < mya.length; i++) {
    html = html + "<tr>";
    data = $("#" + table).getRowData(mya[i]); // get each row
    for ( var j = 0; j < colNames.length; j++) {
     html = html + "<td>" + data[colNames[j]] + "</td>"; // output each Row as
                // tab delimited
    }
    html = html + "</tr>"; // output each row with end of line
}
html = html + "</table></body></html>"; // end of line at the end
alert(html);
html = html.replace(/'/g, '&apos;');
//  var form = "<form name='pdfexportform' action='generategrid' method='post'>";
//  form = form + "<input type='hidden' name='pdfBuffer' value='" + html + "'>";
//  form = form + "</form><script>document.pdfexportform.submit();</sc"
//      + "ript>";
//  OpenWindow = window.open('', '');
//  OpenWindow.document.write(form);
//  OpenWindow.document.close();
}
5
Vinoth Krishnan

Voici une solution intelligente pour enregistrer les données jqGrid sous forme de feuille Excel: (Il vous suffit d'appeler cette fonction avec GridID et une option Filename)

var createExcelFromGrid = function(gridID,filename) {
    var grid = $('#' + gridID);
    var rowIDList = grid.getDataIDs();
    var row = grid.getRowData(rowIDList[0]); 
    var colNames = [];
    var i = 0;
    for(var cName in row) {
        colNames[i++] = cName; // Capture Column Names
    }
    var html = "";
    for(var j=0;j<rowIDList.length;j++) {
        row = grid.getRowData(rowIDList[j]); // Get Each Row
        for(var i = 0 ; i<colNames.length ; i++ ) {
            html += row[colNames[i]] + ';'; // Create a CSV delimited with ;
        }
        html += '\n';
    }
    html += '\n';

    var a         = document.createElement('a');
    a.id = 'ExcelDL';
    a.href        = 'data:application/vnd.ms-Excel,' + html;
    a.download    = filename ? filename + ".xls" : 'DataList.xls';
    document.body.appendChild(a);
    a.click(); // Downloads the Excel document
    document.getElementById('ExcelDL').remove();
}

Nous créons d'abord une chaîne CSV délimitée par ;. Une balise anchor est ensuite créée avec certains attributs. Enfin click est appelé sur a pour télécharger le fichier.

7
Suhail Gupta

Si vous utilisez PHP, essayez phpGrid . Ensuite, il vous suffit d'appeler

$dg->enable_export('PDF'); // for Excel: $dg->enable_export('Excel');

consultez http://phpgrid.com/example/export-datagrid-to-Excel-or-html . Il génère jqGrid javascript requis pour la grille de rendu.

5
devXen