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 是表格标题。

三、数据导出

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

  1. 定义导出按钮
<button id="exportBtn">导出</button>
  1. 添加导出事件
$("#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() 函数进行导出。

  1. 表格导出函数
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 的文档。

五、总结

本文介绍了如何使用 jqGrid 导出数据表格,同时附带了示例代码来帮助读者更好的理解 jqGrid 的使用。欢迎大家在实践过程中提出问题,我们将竭尽所能给予帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jqgrid 表格数据导出实例 - Python技术站

(0)
上一篇 2023年5月22日
下一篇 2023年5月22日

相关文章

  • SQL 统计一年中有多少个星期一

    要统计一年中有多少个星期一,可以使用SQL中的日期函数和聚合函数。 实例1:使用WEEKDAY函数 下面的SQL查询语句可以统计一年中有多少个星期一: SELECT COUNT(*) AS num_of_mondays FROM ( SELECT DATE(‘2022-01-01’, ‘start of year’) AS first_day_of_year…

    database 2023年3月27日
    00
  • SQL – SELECT 查询

    关于SQL-SELECT查询的完整攻略,我给您详细讲解一下。 1. SQL-SELECT查询的基本语法 SQL语言中,SELECT是用来从数据库中查询/检索数据的指令,它的基本语法如下: SELECT 列名1,列名2,…,列名n FROM 表名 WHERE 条件 GROUP BY 分组条件 HAVING 分组后的筛选条件 ORDER BY 排序条件 其中…

    database 2023年3月27日
    00
  • mysql 显示SQL语句执行时间的代码

    要显示MySQL语句的执行时间,可以通过以下步骤实现: 打开MySQL客户端(如MySQL Workbench)并连接到目标数据库。 在客户端中执行以下语句: SET profiling = 1; 该命令会开启MySQL的性能分析工具,在后续的所有语句执行过程中,都会生成相应的性能分析数据。 执行需要分析的SQL语句: SELECT * FROM users…

    database 2023年5月22日
    00
  • Redis C客户端库Hiredis的应用

    Redis   Redis(REmote DIctionary Server)是一个高性能的key-value数据库。  Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈…

    Redis 2023年4月13日
    00
  • Java实现分页查询功能

    下面是Java实现分页查询功能的完整攻略。 一、分页查询功能说明 分页查询功能是指在查询数据时,将要查询的数据分批返回给用户,每一批数据的大小为一页(page size),以此来减少查询时间和网络传输数据量。分页查询功能在实际开发中很常用,因此在Java中实现这个功能也非常重要。 二、Java实现分页查询功能的步骤 获取数据总量 在执行分页查询之前,需要先获…

    database 2023年5月22日
    00
  • MYSQL如何查看操作日志详解

    MySQL是一种常用的数据库管理系统,而操作日志则是MySQL数据库中一个非常重要的部分,它可以记录MySQL数据库中的所有操作,包括增删改查等等。在MySQL数据库中,我们可以通过以下步骤来查看操作日志: 步骤一:配置MySQL操作日志 MySQL的操作日志有两种类型:二进制日志与慢查询日志。为了方便日后检索,我们通常会开启这两种日志。我们可以按照以下步骤…

    database 2023年5月21日
    00
  • 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器

    针对“在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器”的问题,可以采取以下步骤进行排除: 1. 检查网络连接 首先,需要确保计算机与 SQL Server 数据库服务器之间建立了正确的网络连接。可以使用 ping 命令测试一下是否能够正确地连接到服务器,如下所示: ping servername 其中,ser…

    database 2023年5月19日
    00
  • .net Redis分布式锁,Dictionary,ConcurrentDictionary 介绍

    在计算机世界里,对于锁大家并不陌生,在现代所有的语言中几乎都提供了语言级别锁的实现,为什么我们的程序有时候会这么依赖锁呢?这个问题还是要从计算机的发展说起,随着计算机硬件的不断升级,多核cpu,多线程,多通道等技术把计算机的计算速度大幅度提升,原来同一时间只能执行一条cpu指令的时代已经过去。随着多条cpu指令可以并行执行的原因,原来不曾出现的资源竞争随着出…

    Redis 2023年4月11日
    00
合作推广
合作推广
分享本页
返回顶部