1. Python技术站首页
  2. jquery

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

• jquery
yizhihongxing

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中的isPlainObject()使用方法

    详解jQuery中的isPlainObject()使用方法 在jQuery中，isPlainObject()是一个非常常用的方法，用于判断传入参数是否是普通对象。本文将详细讲解isPlainObject()的使用方法。 isPlainObject()方法的语法 jQuery.isPlainObject( obj ) 参数： obj：需要被判断的对象 返回值：…

    jquery 2023年5月28日
    00

  • 原生js实现jquery函数animate()动画效果的简单实例

    下面是“原生js实现jquery函数animate()动画效果的简单实例”的攻略。 一、动画效果简介 在网页中，我们经常使用JS来实现动画效果，而animate()函数则是jQuery中常用的一种实现动画效果的方式。jQuery的animate()函数可以使用链式语法来设置多种动画效果，包括改变DOM元素的位置、尺寸、透明度等等。同时，它也支持一些自定义的动…

    jquery 2023年5月28日
    00

  • JS实现的雪花飘落特效示例

    下面是关于“JS实现的雪花飘落特效示例”的完整攻略，具体如下： 1. 需求分析 首先我们需要了解要实现的效果是什么，我们需要实现一个雪花飘落的特效，我们需要能够在页面上实现雪花飘落的效果。而要实现这个效果，我们需要做如下准备： 在页面中添加一个画布元素，用于绘制雪花 设置画布元素的大小，并且使其充满整个屏幕 随机生成雪花的位置和大小，让雪花飘落 2. 代码实…

    jquery 2023年5月27日
    00

  • jQuery callbacks.fireWith()方法

    在jQuery中，可以使用callbacks.fireWith()方法来触发回调函数列表中的所有回调函数，并指定回调函数中的this关键字。以下是详细攻略，含两个示例演示如何使用callbacks.fireWith()方法： 语法 callbacks.fireWith()方法的语法如下： callbacks.fireWith([上文对象, [参数]]); `…

    jquery 2023年5月9日
    00

  • 如何将一个事件附加到一个元素上，而该元素在JavaScript中只需执行一次

    在JavaScript中，我们可以使用addEventListener()方法将一个事件附加到一个元素上。但是，有时我们只需要在元素上执行一次事件，而不是每次触发事件时都执行。在攻略中，我们将介绍如何将事件附加到一个元上，而该素在JavaScript中只需执行一次。 方法1使用once选项 addEventListener()方法提供了一个名为“once”的…

    jquery 2023年5月9日
    00

  • 围观tangram js库

    围观tangram js库是一项非常有趣的任务，本攻略将会详细介绍如何快速上手使用该js库，以及其中最常用功能的使用方法。 第一步：安装tangram js库 在开始使用tangram js库之前，需要先将其安装到项目中。可以通过npm安装，也可以直接将其下载源码后引入项目中。这里我们以npm安装为例： npm install tangram.js 安装完成…

    jquery 2023年5月18日
    00

  • 如何读取URL中带有&符号的哈希值

    要读取 URL 中带有&符号的哈希值，需要使用JavaScript中的location对象及其相关方法。具体步骤如下： 1. 获取哈希值 首先，可以使用window.location.hash属性来获取当前URL的哈希值，该属性返回的是字符串类型。例如： let hash = window.location.hash; console.log(has…

    jquery 2023年5月12日
    00

  • jQuery设置内容和属性

    jQuery是广受欢迎的JavaScript库，能够帮助开发者更加便捷地操作HTML文档和处理DOM事件。其中，设置内容和属性是jQuery中经常使用的功能，下面将详细讲解它的使用方法。 设置HTML内容和文本内容 设置HTML内容和文本内容的方法分别是html()和text()。其中，html()方法可以设置一个元素的HTML内容，而text()方法则可以…

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