jqgrid 编辑添加功能详细解析

标题：jqgrid 编辑添加功能详细解析

概述

jqgrid 是一款基于 jQuery 的表格插件，支持多种功能扩展。其中编辑添加功能是使用 jqgrid 的重要功能之一，本文将详细解析如何在 jqgrid 中实现编辑添加功能。

步骤

安装和引入 jqgrid 插件

在使用 jqgrid 前必须先安装插件包并引入样式和 JS 文件。可以从 jqgrid 官方网站 http://www.trirand.com/blog 下载并解压 jqgrid，然后将需要的文件复制到项目中。

<link rel="stylesheet" href="/path/to/css/ui.jqgrid.min.css">
<script src="/path/to/js/jquery.min.js"></script>
<script src="/path/to/js/jquery.jqgrid.min.js"></script>

创建 jqgrid 表格

首先需要创建一个包含表格数据的 JSON 文件。示例数据：

{
   "rows":[
      {"id":1, "name":"John", "age":30},
      {"id":2, "name":"Jane", "age":25},
      {"id":3, "name":"Bob", "age":40},
      {"id":4, "name":"Alice", "age":35},
      {"id":5, "name":"Mike", "age":20}
   ]
}

然后在 HTML 页面中创建表格元素，并初始化 jqgrid 设置：

<table id="mygrid"></table>
<div id="mypager"></div>

$(function() {
    var grid = $("#mygrid");
    grid.jqGrid({
        url: "/path/to/json/data.json",
        datatype: "json",
        colModel: [
            {name:'id', index:'id', width:60, sorttype:'int', editable:true},
            {name:'name', index:'name', width:100, editable:true},
            {name:'age', index:'age', width:60, sorttype:'int', editable:true}
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#mypager",
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        caption: "My Grid",
        editurl: "/path/to/editurl"
    });
});

在以上示例中，我们定义了表格的 url，datetype，colModel 等属性，同时还定义了 editurl，这个属性是用于指定表格提交编辑和添加数据的地址。

激活编辑和添加功能

在上面的代码示例中，我们设置了 colModel 中每一列都是可编辑的（editable:true），现在我们需要为表格添加编辑和添加按钮，使得用户能够在表格中添加和编辑数据。

grid.jqGrid('navGrid', '#mypager',
    {
        edit: true,
        add: true,
        del: true,
        search: false,
        refresh: true,
        view: false,
        edittext: "Edit",
        addtext: "Add",
        deltext: "Delete",
        refreshtext: "Refresh",
        ajaxEditOptions: { contentType: "application/json" },
        editData: { key: getSelectedKey },
        errorTextFormat: function (data) {
            return 'Error: ' + JSON.parse(data.responseText).error;
        }
    },
    {
        savekey: [true, 13],
        closeAfterEdit: true,
        reloadAfterSubmit: true,
        ajaxEditOptions: { contentType: "application/json" },
        errorTextFormat: function (data) {
            return 'Error: ' + JSON.parse(data.responseText).error;
        }
    },
    {
        closeAfterAdd: true,
        reloadAfterSubmit: true,
        ajaxEditOptions: { contentType: "application/json" },
        errorTextFormat: function (data) {
            return 'Error: ' + JSON.parse(data.responseText).error;
        }
    }
);

通过使用 navGrid 方法，我们添加了添加、编辑、删除、刷新等按钮，并设置了相应的属性和参数。其中，ajaxEditOptions 用于设置提交表格数据时的 content-type，这里设置为 application/json，表示提交 JSON 数据。

编写服务器端处理程序

最后一步是编写服务器端的处理程序，处理客户端提交的表单数据。由于我们设置了 editurl 属性，jqgrid 会将编辑和添加的表单数据提交到该 URL。我们需要在服务器端实现该 URL 的处理程序。

示例 PHP 处理程序：

<?php
header('Content-type: application/json');
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents("php://input"));
    // 这里可以根据需要将数据存储到数据库中
    echo json_encode(array('result' => 'success'));
} else {
    echo json_encode(array('error' => 'Invalid Request'));
}
?>

以上示例代码中，我们先获取客户端提交的表单数据，然后根据需要将其存储到数据库中，并返回处理结果，本示例中仅返回固定的成功信息。

示例说明

以下是两个示例说明：

示例1：添加数据

用户在表格中点击添加按钮后，表格会弹出一个添加数据的对话框，用户可以在对话框中输入要添加的数据，并提交到服务器保存。如果保存成功，表格会自动刷新并显示新的数据。

示例2：编辑数据

用户在表格中选中一条数据并点击编辑按钮后，表格会弹出一个编辑数据的对话框，用户可以在对话框中修改数据并提交到服务器保存。如果保存成功，表格会自动刷新并显示修改后的数据。

结论

通过以上步骤，我们可以实现 jqgrid 的编辑添加功能。这些操作是通过 jqgrid 插件提供的 API 和服务器端的处理程序完成的。在实际应用中，我们还可以根据需要进行更加细致的定制化操作。