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日

相关文章

  • MySQL组合索引(多列索引)使用与优化案例详解

    MySQL组合索引(多列索引)使用与优化案例详解 什么是MySQL组合索引 MySQL组合索引也叫做多列索引,它是将多个列作为一个索引键来创建的索引。与单列索引相比,组合索引可以提高多列匹配查询的性能,同时也可以减少索引数量对数据库性能的影响。 创建组合索引的语法如下: CREATE INDEX index_name ON table_name (colum…

    database 2023年5月19日
    00
  • windwos下使用php连接oracle数据库的过程分享

    下面是Windows下使用PHP连接Oracle数据库的详细攻略: 准备工作 下载并安装Oracle数据库客户端和Instant Client。下载地址:Oracle Instant Client官网,选择相应的版本进行下载安装。安装后还需要将Instant Client的目录添加到系统环境变量中。 下载并安装PHP的OCI8扩展。下载地址:PECL – o…

    database 2023年5月22日
    00
  • Linux下用Nginx作Perl程序服务器及其中Perl模块的配置

    下面为您详细讲解“Linux下用Nginx作Perl程序服务器及其中Perl模块的配置”的完整攻略。 概述 使用 Nginx 作为 Perl 程序服务器,可以极大地提高服务器的效率和稳定性。同时,也可以使用 Perl 模块来增强 Perl 程序的成功率和有效性。 安装Nginx 首先,需要先安装 Nginx。使用命令行工具输入以下命令: $ sudo apt…

    database 2023年5月22日
    00
  • MySQL客户端和服务器架构

    客户端-服务器(Client/Server)结构简称 C/S 结构,是一种网络架构,通常在该网络架构下的软件分为客户端和服务器。 MySQL是一个开源的关系型数据库管理系统,被广泛应用于Web应用开发和数据存储。MySQL的客户端和服务器架构是基于客户端/服务器模型构建的。在这种架构中,客户端通过网络向服务器发送请求,服务器处理请求并将结果返回给客户端。 M…

    MySQL 2023年3月8日
    00
  • mysql 查询指定日期时间内sql语句实现原理与代码

    MySQL 查询指定日期时间内的数据需要用到 SQL 语句中的 WHERE 子句和日期时间函数。具体实现原理和代码步骤如下: 在 SQL 语句中使用 WHERE 子句筛选指定日期时间内的数据。 WHERE 子句基本语法为 WHERE column operator value ,其中 column 表示指定的字段名称,operator 表示比较运算符,val…

    database 2023年5月22日
    00
  • Oracle导dmp出现文件ORA-12154: TNS: 无法解析指定的连接标识符问题的解决方案

    背景介绍 在使用Oracle数据库时,有时需要将数据库中的数据导出到dmp文件中,但在执行导出操作时,可能会出现ORA-12154错误,该错误通常是由于无法解析连接标识符导致的。本文将详细介绍该问题的解决方案。 解决方案 在解决ORA-12154错误时,有以下几种方法可以尝试: 2.1 检查连接标识符 在导出dmp文件时,我们需要指定一个连接标识符,而该标识…

    database 2023年5月18日
    00
  • MySQL自动填充create_time和update_time的两种方式

    MySQL的自动填充 create_time 和 update_time 字段有2种常见方式: 使用触发器自动填充 可以在创建表的时候编写触发器来自动生成时间,以下是示例代码: CREATE TRIGGER `trg_users_created_at` BEFORE INSERT ON `users` FOR EACH ROW SET NEW.created…

    database 2023年5月22日
    00
  • Redis+AOP+自定义注解实现限流

    Redis + AOP + 自定义注解实现限流的攻略分为以下几个步骤: 1. 集成 Redis Redis 是一种基于内存的数据存储系统,它可以高效地存储和操作数据,特别适合用于缓存和限流等场景。我们首先需要将 Redis 集成到项目中。 可以使用官方的 Java 客户端 Jedis 来访问 Redis。在 Maven 中引入 Jedis 的依赖,并配置 R…

    database 2023年5月22日
    00
合作推广
合作推广
分享本页
返回顶部