web-dev-qa-db-ja.com

jQgridがPDF / Excelにデータをエクスポートできるようにする方法

私はjQuery/jQgridコーディングの初心者です。 jQgridバージョン4.4.4およびjQuery 1.8.3を使用しています。 jQgridでPDF/Excelへのエクスポート機能を有効にしたい。そのために、次のリンクを参照しました- ここをクリック および ここをクリック 。このリンクに基づいて、次のようなjqueryのコードを数行開発しました。

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

しかし、このコードは適切に機能していません。インターネットgoogleで頻繁に検索しましたが、タスクを達成するのに役立つ情報は得られません。誰もこれを行う方法を知っていますか？？？

UPDATE：私はjqgridの有料版を使用していません。

jqueryjqgridexport-to-excelexport-to-pdf
10
Rahul

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

jqGridデータをExcelシートとして保存するための賢い解決策は次のとおりです（GridIDとオプションの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();
}

最初に、;で区切られたCSV文字列を作成します。次に、特定の属性を持つanchorタグが作成されます。最後に、clickでaが呼び出され、ファイルがダウンロードされます。

7
Suhail Gupta

PHPを使用している場合は、 phpGrid を試してください。それからあなただけを呼び出す必要があります

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

http://phpgrid.com/example/export-datagrid-to-Excel-or-html を確認してください。グリッドのレンダリングに必要なjqGrid javascriptを生成します。

5
devXen