在删除时覆盖jqGrid发送的id参数,可以通过以下步骤实现:
下面是一个完整的实现示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jqGrid Delete Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.5/js/jquery.jqgrid.min.js"></script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
<script>
$(function() {
$("#grid").jqGrid({
url: "data.json",
datatype: "json",
colModel: [
{ name: "id", label: "ID", width: 50 },
{ name: "name", label: "Name", width: 150 },
{ name: "email", label: "Email", width: 200 }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#pager",
sortname: "id",
viewrecords: true,
sortorder: "asc",
caption: "User Data"
});
$("#grid").jqGrid("navGrid", "#pager", {
edit: false,
add: false,
del: true,
search: false
}, {}, {}, {
// Delete button click event
onclickSubmit: function(params, postdata) {
// Get the selected row id
var selectedRowId = $("#grid").jqGrid("getGridParam", "selrow");
// Modify the id parameter value
params.url += "/" + selectedRowId;
// Return modified params
return params;
}
});
});
</script>
</body>
</html>
const express = require("express");
const app = express();
// Delete user by id
app.delete("/users/:id", (req, res) => {
const userId = req.params.id;
// Perform delete operation using the userId
// ...
res.send("User deleted successfully");
});
app.listen(3000, () => {
console.log("Server started on port 3000");
});
在上述示例中,前端页面使用jqGrid插件创建了一个表格,并配置了删除按钮的点击事件。在点击删除按钮时,通过$("#grid").jqGrid("getGridParam", "selrow")
获取选中行的id值,并将其添加到删除请求的URL中。后端服务器使用Express框架创建了一个路由,处理接收到的删除请求,并根据id执行相应的删除操作。
这样,当点击删除按钮时,jqGrid会发送带有选中行id的删除请求到后端服务器进行处理。
领取专属 10元无门槛券
手把手带您无忧上云