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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
js友好的时间返回函数
Aug 24 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
JS实现数组去重的11种方法总结
Apr 04 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
PHP实现变色验证码实例
2014/01/06 PHP
php单例模式的简单实现方法
2016/06/10 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python求列表交集的方法汇总
2014/11/10 Python
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python tkinter控件布局项目实例
2019/11/04 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python3列表List入门知识附实例
2020/02/09 Python
keras打印loss对权重的导数方式
2020/06/10 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
志愿者宣传口号
2014/06/17 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
师范生见习总结范文
2015/06/23 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
MySQL添加索引特点及优化问题
2022/07/23 MySQL