1. Python技术站首页
  2. jquery

ASP 使用jqGrid实现读写删的代码(json)

• jquery

ASP 使用 jqGrid 实现读写删的代码通常分为两部分：前端页面代码及后端处理代码。前端页面代码主要负责 UI 的呈现及和后台数据的交互。后端处理代码是实现 CRUD 操作的关键，并返回对应的响应结果。

一、前端页面代码

前端页面代码主要包括 HTML、CSS 和 JavaScript，以及基于 jQuery 的 jqGrid 插件。其中，jqGrid 用于呈现并管理表格数据，提供了丰富的交互功能和 API 接口，可与后端数据进行交互。

1. 引入 jqGrid 插件

首先，需要在 HTML 页面中引入 jqGrid 的库及相关依赖：

<link rel="stylesheet" href="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdn.bootcss.com/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">

2. 初始化 jqGrid 插件

接下来，需要在 JavaScript 中对 jqGrid 进行初始化及参数配置：

$(function () {
    // 设置表格参数
    var grid = $("#grid").jqGrid({
        url: "backend.php",  // 后台 API 地址
        editurl: "backend.php",  // 后台 API 地址
        mtype: "POST",  // 请求方式
        datatype: "json",  // 数据格式
        colNames: ["ID", "姓名", "性别", "年龄"],  // 列名称
        colModel: [  // 列定义
            {name: "id", index: "id", key: true, hidden: true},
            {name: "name", index: "name", width: 100, editable: true},
            {name: "sex", index: "sex", width: 50, editable: true},
            {name: "age", index: "age", width: 50, editable: true, search: false},
        ],
        jsonReader: { repeatitems: false, id: "id" },  // 数据解析配置
        pager: "#pager",  // 分页器
        rowNum: 10,  // 每页显示行数
        rowList: [10, 20, 30],  // 可选的每页行数
        autowidth: true,  // 自动调整列宽
        shrinkToFit: true,  // 缩放单元格大小
        viewrecords: true,  // 显示记录总数
        height: "auto",  // 表格高度
    });
    // 绑定表格导航条按钮功能
    $("#grid_toppager_left, #grid_toppager_right").remove();
    $("#grid_toppager_center").html($("#grid_toppager_center").html() + "<br>").prepend($("#add"));
    $("#add").click(function () {
        grid.addRowData(undefined, { "id": "", "name": "", "sex": "", "age": "" }, "first");
    });
    $("#edit").click(function () {
        var rows = grid.getGridParam("selarrrow");
        if (rows.length == 1) {
            grid.editRow(rows[0]);
        } else {
            alert("请选择一条记录进行编辑！");
        }
    });
    $("#del").click(function () {
        var rows = grid.getGridParam("selarrrow");
        if (confirm("确认删除选定记录？")) {
            $.each(rows, function (index, value) {
                grid.delRowData(value);
            });
        }
    });
});

上述代码主要对 jqGrid 进行了以下配置：

  • 设置表格数据的请求地址及请求方式；
  • 定义表格中的列名称、列类型、列宽度、数据解析配置；
  • 配置表格的分页器、每页显示行数、自动调整列宽、缩放单元格大小等数据；
  • 绑定表格上方的添加、编辑、删除按钮功能。

其中，主要需要注意的是 editurl 参数，用于定义 jqGrid 的编辑/保存地址，因为 jqGrid 在进行新增、编辑、删除等操作时均需要向后端发起对应的请求，所以需要在后端实现对应的接口。

3. 表格操作按钮

在绑定表格操作按钮时，需要注意操作的数据格式和请求方式。根据 jqGrid 的约定，当前表格中选中的行（或未选中行）将会以数据列表的形式作为请求的参数发送到服务端，后端需要能够解析并处理这些参数，返回对应的响应结果。

例如，定义一个点击”删除“按钮时向后端发送的数据格式如下：

{
    "oper": "del",  // 操作类型：del 表示删除
    "id": ["1", "3", "4"]  // 待删除记录的 ID 数组
}

此时需要注意的是，在 jqGrid 的配置中需要设置 delOptions 和 jsonReader 参数，以供数据的解析和响应结果的处理。例如：

grid.navGrid("#pager", {
    edit: false, add: false, search: false
}, {
    mtype: "POST",
    url: "backend.php",
    delOptions: {
        // 声明删除操作的请求 URL 和数据解析方式
        mtype: "POST",
        url: "backend.php",
        ajaxDelOptions: { contentType: "application/json" },
        serializeDelData: function (postdata) {
            return JSON.stringify({
                oper: "del",
                id: postdata.id
            });
        }
    },
    onclickSubmit: function (params) {
        // 处理响应结果
        var result = JSON.parse(params.responseText);
        if (result.success === true) {
            return [true, ""];
        } else {
            return [false, result.msg];
        }
    }
});

其中，mtype 参数表示请求方式，url 参数表示请求地址，ajaxDelOptions 参数用于设置请求时的 Content-Type 类型，serializeDelData 参数用于序列化请求数据，onclickSubmit 参数用于处理响应结果，并返回处理结果及响应消息。在这些参数中，后台处理 serializeDelData 和 onclickSubmit 参数时都需遵守 JSON 格式。

二、后端处理代码

在后端处理代码中，主要需要实现对指定 API 地址的监听，并对不同的操作类型进行不同的处理。这里以 PHP 代码为例。

1. 初始化 PHP 代码

首先，需要在 PHP 中判断请求方法类型及 MIME 类型，并从请求头信息中获取对应的请求参数。

// 获取请求方法类型
$method = $_SERVER['REQUEST_METHOD'];
// 获取 MIME 类型
if (isset($_SERVER['CONTENT_TYPE'])) {
    $content_type = $_SERVER['CONTENT_TYPE'];
} else {
    $content_type = '';
}
// 根据 MIME 类型针对不同类型的请求获取请求参数
switch ($content_type) {
    case "application/json":
        $data = json_decode(file_get_contents('php://input'), true);
        break;
    case "application/x-www-form-urlencoded":
        $data = $_POST;
        break;
    default:
        $data = array();
        break;
}

2. 实现读、写、删操作

接下来，根据请求中的操作类型 oper，对不同的操作类型进行不同的响应。

// 读操作：返回满足筛选条件的数据列表
if ($method == 'POST' && $data['oper'] == 'read') {
    // 数据库查询等操作...
    // 返回数据的格式需要遵守 jqGrid 的数据格式约定
    echo json_encode(array(
        "page" => 1,
        "total" => 1,
        "records" => count($rows),
        "rows" => $rows
    ));
}

// 写操作：新增或编辑一个记录
if ($method == 'POST' && $data['oper'] == 'add') {
    // $data 中包含了新增/编辑的记录所有属性
    // 数据库插入等操作...
    echo json_encode(array("success" => true));
}
if ($method == 'POST' && $data['oper'] == 'edit') {
    // $data 中包含了需要编辑的记录的所有属性
    // 数据库更新等操作...
    echo json_encode(array("success" => true));
}

// 删操作：删除一个或多个记录
if ($method == 'POST' && $data['oper'] == 'del') {
    // $data 中包含了所有需要删除的记录的 ID 数组
    // 数据库删除等操作...
    echo json_encode(array("success" => true));
}

3. 完整 PHP 后端完整示例

以下为一个标准的 ASP 后端示例代码，可以根据自己需要进行修改：

<?php
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
$conn->set_charset("utf8");

$method = $_SERVER['REQUEST_METHOD'];
if (isset($_SERVER['CONTENT_TYPE'])) {
    $content_type = $_SERVER['CONTENT_TYPE'];
} else {
    $content_type = '';
}
switch ($content_type) {
    case "application/json":
        $data = json_decode(file_get_contents('php://input'), true);
        break;
    case "application/x-www-form-urlencoded":
        $data = $_POST;
        break;
    default:
        $data = array();
        break;
}

if ($method == 'POST' && $data['oper'] == 'read') {
    // 处理读操作请求
    $page = intval($_POST['page']);
    $rows = intval($_POST['rows']);
    $start = ($page - 1) * $rows;
    $sql = "select count(*) from mytable";
    $result = $conn->query($sql);
    $row = $result->fetch_row();
    $count = $row[0];
    $sql = "select * from mytable limit $start, $rows";
    $result = $conn->query($sql);
    $rows = array();
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
    echo json_encode(array(
        "page" => $page,
        "total" => ceil($count / $rows),
        "records" => $count,
        "rows" => $rows
    ));
} else if ($method == 'POST' && $data['oper'] == 'add') {
    // 处理新增操作请求
    $name = $data['name'];
    $sex = $data['sex'];
    $age = intval($data['age']);
    $sql = "insert into mytable (name, sex, age) values ('$name', '$sex', $age)";
    if ($conn->query($sql) === true) {
        echo json_encode(array("success" => true));
    } else {
        echo json_encode(array("success" => false, "msg" => $conn->error));
    }
} else if ($method == 'POST' && $data['oper'] == 'edit') {
    // 处理编辑操作请求
    $id = $data['id'];
    $name = $data['name'];
    $sex = $data['sex'];
    $age = intval($data['age']);
    $sql = "update mytable set name='$name', sex='$sex', age=$age where id=$id";
    if ($conn->query($sql) === true) {
        echo json_encode(array("success" => true));
    } else {
        echo json_encode(array("success" => false, "msg" => $conn->error));
    }
} else if ($method == 'POST' && $data['oper'] == 'del') {
    // 处理删除操作请求
    $ids = join(',', $data['id']);
    $sql = "delete from mytable where id in ($ids)";
    if ($conn->query($sql) === true) {
        echo json_encode(array("success" => true));
    } else {
        echo json_encode(array("success" => false, "msg" => $conn->error));
    }
} else {
    echo '404 Not Found.';
}
$conn->close();
?>

通过以上代码的实现，即可完成基于 jqGrid 的 ASP 数据读写删除操作。其中，多重判断及请求回应需尤为注意。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP 使用jqGrid实现读写删的代码(json) - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 如何在jQuery中为元素附加一个以上的事件处理程序

    在jQuery中，我们可以使用.on()函数为元素附加一个以上的事件处理程序。以下是两个示例，演示如何在jQuery中为元素附加一个以上的事件处理程序： 示例1：附加多个事件处理程序 以下是一个示例，演示如何使用.on()函数为元素附加多个事件处理程序： <!DOCTYPE html> <html> <head> <…

    jquery 2023年5月9日
    00

  • jQWidgets jqxTreeGrid height属性

    以下是关于 jQWidgets jqxTreeGrid 组件中 height 属性的详细攻略。 jQWidgets jqxTreeGrid height 属性 jQWidgets jqxTreeGrid 的 height 属性用于设置 TreeGrid 控件的高度。您可以使用此属性来控制 TreeGrid 控件在页面中的显示大小。 语法 $(‘#treegr…

    jquery 2023年5月12日
    00

  • jquery 使用简明教程

    jQuery 使用简明教程 什么是 jQuery？ jQuery 是一个快速、简洁的 JavaScript 库，它是目前网站开发中最受欢迎和使用最广泛的 JavaScript 库之一，可以协助开发者实现快速、简单的JavaScript编码。 如何引入 jQuery？ 在 HTML 中引入 jQuery 库可以通过以下代码实现： <!–从网上获取 jQ…

    jquery 2023年5月27日
    00

  • Java中使用websocket实现在线聊天功能

    下面我将为您详细讲解如何使用WebSocket实现Java Web应用中的在线聊天功能。 简介 WebSocket是一种协议，它允许客户端与服务端之间建立一个持久性的套接字连接，以实现双方之间的实时通信。 相对于HTTP请求/响应模式，WebSocket的优势在于：- 更少的网络流量。与每次发送HTTP请求并接收响应的通信形式不同，WebSocket允许建立…

    jquery 2023年5月27日
    00

  • 使用cropper.js裁剪头像的实例代码

    使用cropper.js裁剪头像的实例代码教程： Cropper.js是一款基于HTML5 Canvas的图片裁剪插件，可以轻松地实现图片裁剪、缩放等常用的图片处理功能，其使用也很简单。 引入cropper.js文件及其样式代码 首先，在HTML文档中引入cropper.js文件及其样式代码： <link rel="stylesheet&qu…

    jquery 2023年5月28日
    00

  • jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法

    下面是详细讲解“jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法”的完整攻略。 简介 jQuery Uploadify 是一款常用的上传插件，用于实现文件上传功能。但是在使用过程中，会出现 Http Error 302 错误，导致上传失败。那么，该错误出现的原因是什么，如何解决呢？ 出现原因 Http Error 3…

    jquery 2023年5月27日
    00

  • jQuery对html元素的取值与赋值实例详解

    jQuery对HTML元素的取值与赋值实例详解 前言 jQuery 是一款非常流行的 JavaScript 框架，很多网站都会使用它来进行开发，它提供了非常方便的 API 进行 DOM 操作。其中，包括对 HTML 元素的取值与赋值操作，本文就来详细讲解一下。 HTML 元素的取值 text() 我们可以使用 text() 方法获取一个 HTML 元素的纯文…

    jquery 2023年5月28日
    00

  • jQuery addClass()方法

    下面我将详细讲解一下jQuery的addClass()方法，让你完全理解该方法的用法和作用： 一、什么是addClass()方法 在jQuery中，addClass()方法用来为HTML元素添加一个或多个类名。也就是说，它可以为一个元素添加CSS的类选择器，以实现CSS样式的变化。 二、addClass()方法的使用语法 在jQuery中，addClass(…

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