jqGrid表格应用之新增与删除数据附源码下载

$("#add_btn").click(function(){
$.fancybox({
'type':'ajax',
'href':'addGrid.html'
});
});

可以看出，调用fancybox时，以ajax的方式加载了一个页面：addGrid.html，这个页面用来放置要提交的表单。关于fancybox插件的应用，您可以查看本站文章了解：Fancybox丰富的弹出层效果

3、提交表单：我们需要在addGrid.html页面放置一表单。

<form id="add_form" action="do.php?action=add" method="post">
...
</form> 

当点击“提交”按钮时，对表单进行验证，这里我们使用了jquery.form.js完成表单的验证和提交，我们在addGrid.html页面加入以下代码：

$(function(){
 $('#add_form').ajaxForm({
 beforeSubmit: validate, //验证表单
 success: function(msg){
 if(msg==1){ //如果成功提交
 $.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后，程序需要过滤表单提交的数据，然后将数据插入到数据表中，并将执行结果返回给前端页面。

include_once ("connect.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处理，请看代码：