我们在页面中放置一个“新增”和“删除”按钮，以及表格容器#list(jqGrid生成表格)以及分页条#pager。关于查询功能，我们在上一篇文章有讲解。
新增数据
1、读取数据：调用jqGrid，生成表格，此段代码在本站上一篇文章中有详细讲解，本文不再重复，您可以查看：
2、调用表单:当点击“新增”按钮时，调用fancybox插件，弹出一个新增产品的表单层。
fancybox({
'type':'ajax','href':'addGrid.html'
});
});
可以看出，调用fancybox时，以ajax的方式加载了一个页面：addGrid.html，这个页面用来放置要提交的表单。关于fancybox插件的应用，您可以查看本站文章了解：fancybox丰富的弹出层效果
3、提交表单：我们需要在addGrid.html页面放置一表单。
PHP?action=add" method="post">
...
当点击“提交”按钮时，对表单进行验证，这里我们使用了jquery.form.js完成表单的验证和提交，我们在addGrid.html页面加入以下代码：
fancybox.close(); //
关闭fancybox弹出层
$().message("成功
添加"); //
提示信息
$("#list").trigger("reloadGrid"); //重新载入jqGrid数据
}else{
alert(msg);
}
}
});
});
function validate(formData,jqForm,options) {
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
$().message("请输入完整相关信息");
return false;
}
}
$().message("正在提交...");
}
4、PHP处理数据：表单数据提交给后台do.PHP后，程序需要过滤表单提交的数据，然后将数据插入到数据表中，并将执行结果返回给前端页面。
PHP"); //连接
数据库
$action = $_GET['action'];
switch ($action) {
case 'list' : //列表
... //读取数据列表，
代码省略，请参照
上一篇文章中的
代码
break;
case 'add' : //新增
//过滤输入的字符串
$pro_title = htmlspecialchars(stripslashes(trim($_POST['pro_title'])));
$pro_sn = htmlspecialchars(stripslashes(trim($_POST['pro_sn'])));
$size = htmlspecialchars(stripslashes(trim($_POST['size'])));
$os = htmlspecialchars(stripslashes(trim($_POST['os'])));
$charge = htmlspecialchars(stripslashes(trim($_POST['charge'])));
$price = htmlspecialchars(stripslashes(trim($_POST['price'])));
if (mb_strlen($pro_title) < 1)
die("产品
名称不能为空");
$addtime = date('Y-m-d H:i:s');
//插入数据
$query =
MysqL_query("insert into products(sn,title,size,os,charge,price,addtime)values
('$pro_sn','$pro_title','$size','$os','$charge','$price','$addtime')");
if (
MysqL_affected_rows($link) != 1) {
die("操作失败");
} else {
echo '1';
}
break;
case '' :
echo 'Bad request.';
break;
}
数据的删除也是通过前端和后台的异步交互来完成的，本例中的删除功能可以执行批量删除，js获取jqGrid选中的要删除的行，然后将选中的数据对应的id提交给PHP处理，请看代码：
删除的项！");
}else{
if(confirm("您是否确认
删除？")){
$.ajax({
type: "POST",url: "do.
PHP?action=del",data: "ids="+sels,beforeSend: function() {
$().message("正在请求...");
},error:function(){
$().message("请求失败...");
},success: function(msg){
if(msg!=0){
var arr = msg.split(',');
$.each(arr,function(i,n){
if(arr[i]!=""){
$("#list").jqGrid('delRowData',n);
}
});
$().message("已成功
删除!");
}else{
$().message("操作失败！");
}
}
});
}
}
});
});
看代码，首先通过jqGrid的getGridParam方法获取选中的数据行selarrrow，如果选中多项，则获取到的sels值是一个以逗号隔开的字符串，然后提示是否确认删除，确认后提交ajax请求，如果后台PHP删除数据成功，则返回删除的数据id，前端调用jqGrid的delRowData方法将对应的数据行删除，并提示“以成功删除”。
后台do.PHP获取ajax提交过来的要删除的id，执行删除语句，完成删除操作。
删除
$ids = $_POST['ids'];
delAllSelect($ids,$link);
break;
case '' :
echo 'Bad request.';
break;
}
//批量
删除操作
function delAllSelect($ids,$link) {
if (empty ($ids))
die("0");
MysqL_query("delete from products where id in($ids)");
if (
MysqL_affected_rows($link)) {
echo $ids;
} else {
die("0");
}
}
至此，我们已经完成了对jqGrid的读取、新增、删除和查询数据的基本操作的讲解，希望对您有所帮助。对于jqGrid表格的应用文章的讲解有不对的地方，欢迎大家批评指正。
原文链接：https://www.f2er.com/js/51344.html
