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 相关文章推荐
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
js选择器全面解析
Jun 27 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
JS如何定义用字符串拼接的变量
Jul 11 Javascript
js canvas实现五子棋小游戏
Jan 22 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Python中的闭包实例详解
2014/08/29 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
对Python中的@classmethod用法详解
2018/04/21 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Django使用rest_framework写出API
2020/05/21 Python
python处理写入数据代码讲解
2020/10/22 Python
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
优秀的茶餐厅创业计划书
2014/01/03 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
高一军训决心书
2015/02/05 职场文书
小学家长意见怎么写
2015/06/03 职场文书
新闻稿件写作范文
2015/07/18 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电
如何利用python实现列表嵌套字典取值
2022/06/10 Python