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

作者: 网络应用  发布:2019-09-03

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

jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合。

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

图片 1

图片 2

jqGrid特性:

效果展示    源码下载.rar)

基于jquery UI主题,开发者可以根据客户要求更换不同的主题。
兼容目前所有流行的web浏览器。
Ajax分页,可以控制每页显示的记录数。
支持XML,JSON,数组形式的数据源。
提供丰富的选项配置及方法事件接口。
支持表格排序,支持拖动列、隐藏列。
支持滚动加载数据。
支持实时编辑保存数据内容。
支持子表格及树形表格。
支持多语言。
最关键目前是免费的。

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

如何使用jqGrid

XHTML

1、首先,您需要到jqGrid官网下载最新版本的程序包,您可以从这里下载:
2、在WEB目录下分别新建css和js两个文件夹,放置相关的css和js文件,创建一个index.html页面文件,用你喜欢的文本编辑器打开,录入一下代码:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ 
xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Grid</title> 
<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" /> 
<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> 
</head> 
<body> 
... 
</body> 
</html> 
<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> 

3、在body中加入以下代码:

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

<table id="list"></table> 
<div id="pager"></div> 
<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用来加载数据列表,#page用来显示分页条的。

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

4、调用jqGrid插件,在页面中加入如下js代码

新增数据

$("#list").jqGrid({ 
  caption: '手机产品列表', 
  url:'server.php', 
  datatype: "json", 
    colNames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(¥)','操作'], 
    colModel:[ 
      {name:'sn',index:'sn', width:80,align:'center'}, 
      {name:'title',index:'title', width:180}, 
      {name:'size',index:'size', width:120}, 
    {name:'os',index:'os', width:120}, 
      {name:'charge',index:'charge', width:100,align:'center'}, 
    {name:'price',index:'price', width:80,align:'center'}, 
      {name:'opt',index:'opt', width:80, sortable:false, align:'center'}     
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager', 
    sortname: 'id', 
  autowidth: true, 
  height:280, 
  viewrecords: true, 
  multiselect: true, 
  multiselectWidth: 25, 
  sortable:true, 
  sortorder: "asc" 
 }); 

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

这个时候我们预览index.html发现表格外形已经呈现,就差数据填充了。如果此时你还看不到任何效果,请检查你的文件路径是否正确。

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

5、加载数据。

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

我们采用php读取mysql数据,返回json格式的数据给jqGrid来显示数据。我们准备一张数据表用来记录手机产品信息,结构如下:

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

CREATE TABLE IF NOT EXISTS `products` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `sn` varchar(10) NOT NULL, 
 `title` varchar(60) NOT NULL, 
 `size` varchar(30) NOT NULL, 
 `os` varchar(50) NOT NULL, 
 `charge` varchar(50) DEFAULT NULL, 
 `screen` varchar(50) DEFAULT NULL, 
 `design` varchar(50) DEFAULT NULL, 
 `price` int(10) NOT NULL, 
 `addtime` datetime NOT NULL 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

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

接着,在server.php中读取数据,并输出json数据:

<form id="add_form" action="do.php?action=add" method="post"> 
... 
</form> 
//连接数据库 
include_once ('connect.php'); 
$page = $_GET['page']; 
$limit = $_GET['rows']; 
$sidx = $_GET['sidx']; 
$sord = $_GET['sord']; 
if (!$sidx) 
  $sidx = 1; 
$result = mysql_query("SELECT COUNT(*) AS count FROM products where deleted=0"); 
$row = mysql_fetch_array($result, MYSQL_ASSOC); 
$count = $row['count']; 
if ($count > 0) { 
  $total_pages = ceil($count / $limit); 
} else { 
  $total_pages = 0; 
} 
if ($page > $total_pages) 
  $page = $total_pages; 
$start = $limit * $page - $limit; 
$SQL = "SELECT * FROM products WHERE deleted=0 ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query($SQL) or die("Couldn t execute query." . mysql_error()); 
$responce->page = $page; 
$responce->total = $total_pages; 
$responce->records = $count; 
$i = 0; 
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 
  $responce->rows[$i]['id'] = $row[id]; 
  $opt = "<a href='edit.php'>修改</a>"; 
  $responce->rows[$i]['cell'] = array ( 
    $row[sn], 
    $row[title], 
    $row[size], 
    $row[os], 
    $row[charge], 
    $row[price], 
    $opt 
  ); 
  $i++; 
} 
echo json_encode($responce); 

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

至此,如果你往数据表中录入数据后,就可以在页面上显示数据表了,然后你可以排序、分页操作了。接下来我会将jqGrid的选项说明整理成文,分享给大家,然后从项目实际应用出发,举例讲解增加删除、查看、查找数据等业务的应用。

$(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("正在提交..."); 
} 

您可能感兴趣的文章:

  • jqGrid表格应用之新增与删除数据附源码下载
  • 通过点击jqgrid表格弹出需要的表格数据
  • Jqgrid表格随窗口大小改变而改变的简单实例
  • jqgrid 表格数据导出实例
  • MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
  • jqGrid jQuery 表格插件测试代码
  • jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
  • jQuery中jqGrid分页实现代码
  • jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
  • jQuery插件jqGrid动态获取列和列字段的方法

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表格的应用文章的讲解有不对的地方,欢迎大家批评指正。

您可能感兴趣的文章:

  • Jqgrid之强大的表格插件应用
  • 通过点击jqgrid表格弹出需要的表格数据
  • Jqgrid表格随窗口大小改变而改变的简单实例
  • jqgrid 表格数据导出实例
  • MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
  • jqGrid jQuery 表格插件测试代码
  • jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
  • jQuery中jqGrid分页实现代码
  • jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
  • jQuery插件jqGrid动态获取列和列字段的方法

本文由王中王开奖结果发布于网络应用,转载请注明出处:jqGrid表格应用之新扩展与删除数据附源码下载,

关键词: