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 相关文章推荐
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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数组的概述及分类与声明代码演示
2013/02/26 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python同步windows和linux文件
2019/08/29 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
智能电子应届生求职信
2013/11/10 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
销售顾问工作计划书
2014/08/15 职场文书
迎新生标语大全
2014/10/06 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
vue动态绑定style样式
2022/04/20 Vue.js