With jqxGrid, export your data to Excel, XML, CSV, TSV, JSON, PDF and HTML.

是小景呀

于 2021-05-13 11:09:04 发布

阅读量301

点赞数

分类专栏：软件架构文章标签： jquery

本文链接：https://blog.youkuaiyun.com/ss7xz/article/details/116643986

版权

软件架构专栏收录该内容

6 篇文章

订阅专栏

With jqxGrid, export your data to Excel, XML, CSV, TSV, JSON, PDF and HTML.

Part1:Html

<html>
<head>
</head>
<body>
        <div id="grid"></div>
        <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
                <br /><br />
                <input type="button" value="Export to XML" id='xmlExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to CSV" id='csvExport' />
                <br /><br />
                <input type="button" value="Export to TSV" id='tsvExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to HTML" id='htmlExport' />
                <br /><br />
                <input type="button" value="Export to JSON" id='jsonExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to PDF" id='pdfExport' />
            </div>
        </div>
</body>
</html>

Part2:Javascript
(1)Prepare the data

$(document).ready(function (rowscount,hasNullValues) {
    // prepare the data
    var data = new Array();
	if (rowscount == undefined) rowscount = 10;
    var firstNames =
        [
           "Wenqing","Nancy", "Regina", "Yoshi", "Antoni", "Mayumi", "Petra", "Martin", "Elio", "Michael"
        ];
        var lastNames =
        [
            "Shen","Fuller", "Burke", "Murphy", "Devling", "Wilson","Vileid", "Saylor", "Nodier"
        ];
        var productNames =
        [
            "Black Tea", "Green Tea", "Doubleshot Espresso", "White Chocolate Mocha", "Caffe Americano", "Espresso con Panna", "Peppermint Mocha Twist"
        ];
        var priceValues =
        [
            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "2.5", "3.25", "4.0"
        ];
        for (var i = 0; i < 10; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);

        row["id"] = i;
        row["available"] = productindex % 2 == 0;
         if (hasNullValues == true) {
             if (productindex % 2 != 0) {
                var random = Math.floor(Math.random() * 10);
                 row["available"] = i % random == 0 ? null : false;
             }
         }
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"]; 
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;

        var date = new Date();
        date.setFullYear(date.getFullYear(), Math.floor(Math.random() * 12), Math.floor(Math.random() * 27));
        date.setHours(0, 0, 0, 0);
        row["date"] = date;
       
        data[i] = row;
    }
    var source =
    {
        localdata: data,
        datatype: "array",
        datafields:
        [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'productname', type: 'string' },
            { name: 'available', type: 'bool' },
            { name: 'date', type: 'date' },
            { name: 'quantity', type: 'number' },
            { name: 'price', type: 'number' }
        ] 
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

(2)Initialize jqxGrid

 $("#grid").jqxGrid(
    {
        width: 850,
        source: dataAdapter,                
        altrows: true,
        sortable: true,
        selectionmode: 'multiplecellsextended',
        columns: [
          { text: 'First Name', datafield: 'firstname', width: 130 },
          { text: 'Last Name', datafield: 'lastname', width: 130 },
          { text: 'Product', datafield: 'productname', width: 200 },
          { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
          { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
          { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
          { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
        ]
    });

(3)Export the data

$("#excelExport").jqxButton();
$("#xmlExport").jqxButton();
$("#csvExport").jqxButton();
$("#tsvExport").jqxButton();
$("#htmlExport").jqxButton();
$("#jsonExport").jqxButton();
$("#pdfExport").jqxButton();
//导出
    $("#excelExport").click(function() {
        $("#grid").jqxGrid('exportdata', 'xls', 'jqxGrid');
    });
    $("#xmlExport").click(function () {
        $("#grid").jqxGrid('exportdata', 'xml', 'jqxGrid');
    });
    $("#csvExport").click(function () {
        $("#grid").jqxGrid('exportdata', 'csv', 'jqxGrid');
    });
    $("#tsvExport").click(function () {
        $("#grid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
    });
    $("#htmlExport").click(function () {
        $("#grid").jqxGrid('exportdata', 'html', 'jqxGrid');
    });
    $("#jsonExport").click(function () {
        $("#grid").jqxGrid('exportdata', 'json', 'jqxGrid');
    });
    $("#jsonExport").click(function () {
        $("#grid").jqxGrid('exportdata', 'pdf', 'jqxGrid');
    });
});