给jqGrid数据行添加修改和删除操作链接（之一）
前言
jqGrid是一个强大、灵活且易于使用的jQuery表格插件。在开发Web应用程序时，经常需要使用表格来显示并操作数据。在此过程中，我们经常需要在表格中添加编辑、删除等操作，以便用户对数据进行操作。
本篇攻略将介绍如何给jqGrid数据行添加修改和删除操作链接。
步骤
1. 准备工作
在添加操作链接之前，我们需要先创建一个jqGrid，以便渲染数据。具体操作如下：
- 引入jQuery和jqGrid的相关文件：
<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 引入jqGrid CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<!-- 引入jqGrid JS -->
<script src="https://cdn.bootcss.com/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
- 创建一个table标签，并为其设置一个id：
<table id="grid"></table>
- 在JavaScript中，完成jqGrid的配置和数据加载：
// jqGrid 配置选项
var gridOptions = {
colModel: [
{ name: "name", label: "姓名", width: 200, align: "center" },
{ name: "email", label: "邮箱", width: 200, align: "center" },
{ name: "lang", label: "语言", width: 200, align: "center" },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager",
sortname: "name",
sortorder: "asc",
};
// 加载数据
$("#grid").jqGrid(gridOptions);
2. 给数据行添加操作链接
有了一个可用的jqGrid之后，我们就可以开始添加操作链接了。下面是具体步骤：
- 在colModel中，添加一个自定义的column，用于显示操作链接。例如，我们可以添加一个名为oper的column，它的formatter函数返回一个包含操作链接的HTML字符串。
var gridOptions = {
colModel: [
{ name: "name", label: "姓名", width: 200, align: "center" },
{ name: "email", label: "邮箱", width: 200, align: "center" },
{ name: "lang", label: "语言", width: 200, align: "center" },
{
name: "oper",
label: "操作",
width: 200,
formatter: function(cellvalue, options, rowObject) {
var editUrl = '<a href="/edit?id=' + rowObject.id + '">编辑</a>';
var delUrl = '<a href="/delete?id=' + rowObject.id + '">删除</a>';
return editUrl + " | " + delUrl;
}
},
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager",
sortname: "name",
sortorder: "asc",
};
-
在formatter函数中，我们可以使用rowObject对象获取当前数据行的值。在此例中，我们假设每一行的数据都包含一个id字段，用于标识数据的唯一性。
-
完成配置之后，重新加载jqGrid即可：
$("#grid").trigger("reloadGrid");
现在，我们的jqGrid中已经添加了修改和删除操作链接。
示例说明
下面我们来看两个具体的示例。
示例1：使用jQueryUI的Dialog组件来显示编辑表单
假设我们的表格中的数据包含如下字段：
{name: "Tom", email: "tom@example.com", lang: "en", id: 1},
{name: "Jerry", email: "jerry@example.com", lang: "en", id: 2}
当用户点击“编辑”链接时，我们希望使用jQueryUI的Dialog组件来显示一个编辑表单，以便用户修改数据。
首先，我们需要添加一个具有唯一ID的DIV，用作Dialog的页面容器：
<div id="formDialog" title="编辑数据">
<form action="/update" method="post">
<input type="hidden" name="id" id="idInput">
<label for="nameInput">姓名：</label>
<input type="text" name="name" id="nameInput">
<label for="emailInput">邮箱：</label>
<input type="text" name="email" id="emailInput">
<label for="langInput">语言：</label>
<input type="text" name="lang" id="langInput">
<input type="submit" value="提交">
</form>
</div>
然后，我们可以添加一个click事件处理函数，用于处理“编辑”链接的点击事件。此处，我们假设我们已经封装了一个getFormData函数，它可以从表单中获取数据并将其返回为一个对象：
$("#grid").on("click", "a.editLink", function(e) {
e.preventDefault();
var $td = $(this).parent();
var $tr = $td.parent();
var rowData = $("#grid").jqGrid("getRowData", $tr.attr("id"));
var $form = $("#formDialog form");
var data = getFormData($form);
// 填充表单数据
$form.find("#idInput").val(rowData.id);
$form.find("#nameInput").val(rowData.name);
$form.find("#emailInput").val(rowData.email);
$form.find("#langInput").val(rowData.lang);
// 打开Dialog
$("#formDialog").dialog({
resizable: false,
modal: true,
width: 400
});
});
另外，我们需要在Dialog的初始化函数里，添加代码来处理表单提交事件：
$("#formDialog form").submit(function(e) {
e.preventDefault();
var $form = $(this);
var data = $form.serialize();
$.post($form.attr("action"), data, function(response) {
if (response.success) {
// 提交成功，重新加载jqGrid
$("#grid").trigger("reloadGrid");
// 关闭Dialog
$("#formDialog").dialog("close");
} else {
alert("提交失败：" + response.message);
}
}, "json");
});
这个示例利用Dialog组件生成了一个编辑表单，并使用了jQuery的Ajax函数来提交表单数据。
示例2：使用SweetAlert2插件来删除数据
在Web应用程序中，我们经常需要在列表中删除数据记录。下面这个示例展示了如何使用SweetAlert2插件来带有确认提示的删除操作。
首先，我们需要将“删除”链接替换为一个button，以便使用SweetAlert2插件：
{
name: "oper",
label: "操作",
width: 200,
formatter: function(cellvalue, options, rowObject) {
var delButton = '<button type="button" class="btn btn-danger" data-id="' + rowObject.id + '">删除</button>';
return delButton;
}
}
在页面中引入SweetAlert2相关的文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.12/dist/sweetalert2.min.css" integrity="sha384-E5k6GvKwqrN2QzfE+Ku8ZVjQBTjix/ZydDvaHvqcHW1InWvyzef9bmN8tynz8WdD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.12/dist/sweetalert2.all.min.js" integrity="sha384-ikDZqMeD7Fjnt7b0P+/Ok7uYBN3m5d2QK14M/545MdTftg04SrPDI50X6f+92tHz" crossorigin="anonymous"></script>
然后，我们需要添加一个click事件处理函数，用于处理“删除”按钮的点击事件。在这个处理函数中，我们可以使用SweetAlert2来显示一个确认提示框，并在用户确认之后，使用jQuery的Ajax函数来发送请求到服务器上，完成删除操作：
$("#grid").on("click", "button.deleteButton", function(e) {
var id = $(this).data("id");
Swal.fire({
title: "确认删除？",
text: "此操作将永久删除该数据记录！",
icon: "warning",
showCancelButton: true,
confirmButtonText: "是的，我要删除！",
cancelButtonText: "取消",
}).then((result) => {
if (result.isConfirmed) {
$.post("/delete", { id: id }, function(response) {
if (response.success) {
Swal.fire({
title: "删除成功",
text: "数据记录已经成功删除。",
icon: "success"
});
// 重新加载jqGrid
$("#grid").trigger("reloadGrid");
} else {
Swal.fire({
title: "删除失败",
text: response.message,
icon: "error"
});
}
}, "json");
}
});
});
在这个处理函数中，我们首先获取到行数据的ID，然后使用SweetAlert2显示一个确认提示框。当用户点击确认时，我们使用jQuery的Ajax函数来发送一个POST请求到服务器上，完成删除操作。最后，如果删除操作成功，我们使用SweetAlert2显示一个成功提示框，并重新加载jqGrid。
结论
本篇攻略介绍了如何给jqGrid数据行添加修改和删除操作链接。我们使用了jqGrid的formatter函数来生成操作链接，并且使用了两个示例来演示了如何使用Dialog和SweetAlert2插件来完成编辑和删除操作。
如果你有更好的方案，欢迎在评论中分享。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：给jqGrid数据行添加修改和删除操作链接（之一） - Python技术站
微信扫一扫 
支付宝扫一扫 