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


Posted in Javascript onDecember 02, 2015

jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用。

下面给大家展示了效果图,喜欢的朋友可以直接下载源码哦。

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

效果展示    源码下载

在上一篇文章中,我们提到过jqGrid自身有强大的单元格操作模块,但是这些模块操作起来不太适合用户的习惯,在本文中,我们使用fancybox,以及表单插件来完成jqGrid数据的添加以及删除操作。

XHTML

首先需要在head中引入相关js和css文件。

<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" href="css/fancybox.css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="js/jquery.fancybox.js" type="text/javascript"></script> 
<script src="js/jquery.form.js" type="text/javascript"></script> 
<script src="js/jquery.message.js" type="text/javascript"></script>

其中,fancybox是用来显示弹出层效果的插件,form和message是用来处理表单和提示信息的插件,然后在body里加入以下代码:

<div id="opt"> 
 <div id="query"> 
 <label>编号:</label><input type="text" class="input" id="sn" /> 
 <label>名称:</label><input type="text" class="input" id="title" /> 
 <input type="submit" class="btn" id="find_btn" value="查 询" /> 
 </div> 
 <input type="button" class="btn" id="add_btn" value="新 增" /> 
 <input type="button" class="btn" id="del_btn" value="删 除" /> 
</div> 
<table id="list"></table> 
<div id="pager"></div>

我们在页面中放置一个“新增”和“删除”按钮,以及表格容器#list(jqGrid生成表格)以及分页条#pager。关于查询功能,我们在上一篇文章有讲解。

新增数据

1、读取数据:调用jqGrid,生成表格,此段代码在本站上一篇文章中有详细讲解,本文不再重复,您可以查看:jqGrid表格应用——读取与查询数据

2、调用表单:当点击“新增”按钮时,调用fancybox插件,弹出一个新增产品的表单层。

$(function(){ 
 $("#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处理,请看代码:

$(function(){ 
 $("#del_btn").click(function(){ 
 var sels = $("#list").jqGrid('getGridParam','selarrrow'); 
 if(sels==""){ 
 $().message("请选择要删除的项!"); 
 }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,执行删除语句,完成删除操作。

switch ($action) { 
 case 'del' : //删除 
 $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表格的应用文章的讲解有不对的地方,欢迎大家批评指正。

Javascript 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 #Javascript
日常收藏的jquery技巧
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 #Javascript
jquery密码强度校验
Dec 02 #Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 #Javascript
You might like
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
jQuery动画animate方法使用介绍
2013/05/06 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js登录弹出层特效
2014/03/07 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
总务岗位职责
2013/11/19 职场文书
公司活动策划方案
2014/01/13 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
鸿星尔克广告词
2014/03/21 职场文书
写景作文评语集锦
2014/12/25 职场文书
委托书格式范文
2015/01/28 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android