jqgrid 表格数据导出实例

下面我将为您详细讲解“jqGrid 表格数据导出实例”的完整攻略。

一、简介

jqGrid 是基于 jQuery 的一款能够呈现和编辑数据表格的插件。它可以在网页上方便地实现可分页、可排序、列的过滤等功能，并支持丰富的前端事件和样式定制。本文重点介绍 jqGrid 的数据导出功能实现。

二、环境搭建

使用 jqGrid 前，需要下载 jqGrid 的 JS 和 CSS 文件，并且需要引入 jQuery。

下面是一个简单的页面示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqGrid 示例</title>
    <link rel="stylesheet" href="/path/to/jquery-ui.css">
    <link rel="stylesheet" href="/path/to/ui.jqgrid.css">
    <script src="/path/to/jquery.js"></script>
    <script src="/path/to/jquery-ui.js"></script>
    <script src="/path/to/jquery.jqgrid.js"></script>
</head>
<body>
    <table id="myGrid"></table>
    <div id="myPager"></div>

    <script>
        $(function () {
            $("#myGrid").jqGrid({
                url: '/path/to/data.json',
                datatype: 'json',
                colModel: [
                    {name: 'id', index: 'id', width: 60, sorttype: "int"},
                    {name: 'name', index: 'name', width: 100},
                    {name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float"},
                    {name: 'price', index: 'price', width: 80, align: "right", sorttype: "float"},
                    {name: 'total', index: 'total', width: 80, align: "right", sorttype: "float"},
                    {name: 'note', index: 'note', width: 150, sortable: false}
                ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#myPager',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                caption: "数据表格示例"
            });
        });
    </script>
</body>
</html>

上面的代码中，我们使用 $("#myGrid").jqGrid(options); 初始化了一个数据表格，其中：

url 是 table 的请求地址；
datatype 指定了数据类型，这里为 JSON；
colModel 是列模型，定义了表格的列名和特性；
rowNum 是默认每页行数；
rowList 是每页行数的下拉列表；
pager 是分页工具栏；
sortname 是默认排序列；
viewrecords 显示表格的总记录数；
sortorder 是默认排序方式；
caption 是表格标题。

三、数据导出

在表格上面添加一个“导出”按钮，点击该按钮即可导出表格中的数据。下面是具体实现过程。

定义导出按钮

<button id="exportBtn">导出</button>

添加导出事件

$("#exportBtn").click(function () {
    var postData = $("#myGrid").jqGrid("getGridParam", "postData");
    // 新建表格
    var $table = $("<table>");
    // 添加表头
    var $thead = $("<thead>").append("<tr><th>ID</th><th>名称</th><th>数量</th><th>价格</th><th>总价</th><th>备注</th></tr>").appendTo($table);
    // 添加表身
    $.ajax({
        url: "/path/to/export.php",
        type: "post",
        dataType: "json",
        data: postData,
        success: function (data) {
            var $tbody = $("<tbody>");
            $.each(data.rows, function (i, row) {
                var $tr = $("<tr>");
                $("<td>").text(row.id).appendTo($tr);
                $("<td>").text(row.name).appendTo($tr);
                $("<td>").text(row.amount).appendTo($tr);
                $("<td>").text(row.price).appendTo($tr);
                $("<td>").text(row.total).appendTo($tr);
                $("<td>").text(row.note).appendTo($tr);
                $tr.appendTo($tbody);
            });
            $tbody.appendTo($table);
            // 调用表格导出函数
            exportExcel($table);
        }
    });
});

在上面的代码中，我们通过 $.ajax() 将当前表格的 postData 发送到服务端，获取表体数据，并按“ID”、“名称”、“数量”、“价格”、“总价”、“备注”的顺序填充到表格中。最后将整个表格传递给 exportExcel() 函数进行导出。

表格导出函数

function exportExcel($table) {
    var uri = 'data:application/vnd.ms-excel;base64,';
    // 获取表头和表身数据，按照“ID-名称-数量-价格-总价-备注”的顺序组合
    var ctx = {worksheet: "", table: $table.html()};
    var base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)));
    };
    // 文件名为当前日期
    var today = new Date();
    var name = "Table-" + today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate() + ".xls";
    // 下载表格
    var link = document.createElement("a");
    link.download = name;
    link.href = uri + base64(ctx.table);
    link.click();
}

在上面的代码中，我们通过 window.btoa() 将数据进行 base64 编码，并定义了一个 ctx 变量来存储表头和表身数据。然后创建一个 <a> 标签来下载该表格。

四、示例说明

示例一

假如我们需要按照“名称”来对表格数据进行排序，并导出按照该排序筛选的表格数据，那么代码如下：

$(function () {
    $("#myGrid").jqGrid({
        url: '/path/to/data.json',
        datatype: 'json',
        colModel: [
            {name: 'id', index: 'id', width: 60, sorttype: "int"},
            {name: 'name', index: 'name', width: 100},
            {name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float"},
            {name: 'price', index: 'price', width: 80, align: "right", sorttype: "float"},
            {name: 'total', index: 'total', width: 80, align: "right", sorttype: "float"},
            {name: 'note', index: 'note', width: 150, sortable: false}
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#myPager',
        sortname: 'name',
        viewrecords: true,
        sortorder: "asc",
        caption: "数据表格示例"
    });

    $("#exportBtn").click(function () {
        var postData = $("#myGrid").jqGrid("getGridParam", "postData");
        // 新建表格
        var $table = $("<table>");
        // 添加表头
        var $thead = $("<thead>").append("<tr><th>ID</th><th>名称</th><th>数量</th><th>价格</th><th>总价</th><th>备注</th></tr>").appendTo($table);
        // 添加表身
        $.ajax({
            url: "/path/to/export.php",
            type: "post",
            dataType: "json",
            data: postData,
            success: function (data) {
                var $tbody = $("<tbody>");
                $.each(data.rows, function (i, row) {
                    var $tr = $("<tr>");
                    $("<td>").text(row.id).appendTo($tr);
                    $("<td>").text(row.name).appendTo($tr);
                    $("<td>").text(row.amount).appendTo($tr);
                    $("<td>").text(row.price).appendTo($tr);
                    $("<td>").text(row.total).appendTo($tr);
                    $("<td>").text(row.note).appendTo($tr);
                    $tr.appendTo($tbody);
                });
                $tbody.appendTo($table);
                // 调用表格导出函数
                exportExcel($table);
            }
        });
    });
});

示例二

假如我们需要只显示“名称为 A 或 B”的数据行，并导出该表格数据，那么我们需要修改上述代码中的 postData：

$("#exportBtn").click(function () {
    var postData = $("#myGrid").jqGrid("getGridParam", "postData");
    postData.filters = '{ "groupOp": "OR", "rules": [ { "field": "name", "op": "eq", "data": "A" }, { "field": "name", "op": "eq", "data": "B" } ] }';
    // 新建表格
    var $table = $("<table>");
    // ...
});

注意，filters 是字符串类型的 JSON 数据，它指定了表格数据的过滤规则。示例中，我们将这个值设为了“名称为 A 或 B”的记录。需要注意的是，groupOp 为“OR”表示“或”关系，可以将多个“rules”行程“与”关系或“或”关系组合出不同的过滤条件，具体请参考 jqGrid 的文档。