基于PHP和Mysql相结合使用jqGrid读取数据并显示


Posted in Javascript onDecember 02, 2015

jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程。

下面给大家展示效果图,喜欢的朋友可以阅读全文哦。

基于PHP和Mysql相结合使用jqGrid读取数据并显示

jqGrid本身带有search和edit表格模块,但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成相关功能,符合项目的实际应用。

XHTML

<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>

我们在建立一个可供查询编号和名称的两个输入框,以及“新增”和“删除”按钮,新增和删除功能在接下来的文章中会专门讲解。此外xhtml中还有一个放置表格的#list(jqGrid生成表格)以及分页条#pager。

Javascript

首先调用jqGrid,我们以本站jqGrid:强大的表格插件的应用一文中的数据为例,调用jqGrid,生成表格,请看代码和注释。

$("#list").jqGrid({ 
 url:'do.php?action=list', //请求数据的url地址 
 datatype: "json", //请求的数据类型 
 colNames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(¥)','操作'], //数据列名称(数组) 
 colModel:[ //数据列各参数信息设置 
  {name:'sn',index:'sn', editable:true, width:80,align:'center', title:false}, 
  {name:'title',index:'title', width:180, title:false}, 
  {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', //表格数据关联的分页条,html元素 
 autowidth: true, //自动匹配宽度 
 height:275, //设置高度 
 gridview:true, //加速显示 
 viewrecords: true, //显示总记录数 
 multiselect: true, //可多选,出现多选框 
 multiselectWidth: 25, //设置多选列宽度 
 sortable:true, //可以排序 
 sortname: 'id', //排序字段名 
 sortorder: "desc", //排序方式:倒序,本例中设置默认按id倒序排序 
 loadComplete:function(data){ //完成服务器请求后,回调函数 
 if(data.records==0){ //如果没有记录返回,追加提示信息,删除按钮不可用 
  $("p").appendTo($("#list")).addClass("nodata").html('找不到相关数据!'); 
  $("#del_btn").attr("disabled",true); 
 }else{ //否则,删除提示,删除按钮可用 
  $("p.nodata").remove(); 
  $("#del_btn").removeAttr("disabled"); 
 } 
 } 
});

关于jqGrid相关选项设置请参照:jqGrid中文说明文档——选项设置。

此外,当我们点击“查询”按钮的时候,向后台php程序发送查询关键字请求,jqGrid根据服务端返回的结果进行响应,请看代码。

$(function(){ 
 $("#find_btn").click(function(){ 
 var title = escape($("#title").val()); 
 var sn = escape($("#sn").val()); 
 $("#list").jqGrid('setGridParam',{ 
  url:"do.php?action=list", 
  postData:{'title':title,'sn':sn}, //发送数据 
  page:1 
 }).trigger("reloadGrid"); //重新载入 
 }); 
});

PHP

在上两段JS代码代码中,可以看到读取列表和查询业务请求的后台url地址都是do.php?action=list,后台php代码负责根据条件查询mysql数据表中的数据,并将数据以JSON格式返回给前端jqGrid,请看php代码:

include_once ("connect.php"); 
$action = $_GET['action']; 
switch ($action) { 
 case 'list' : //列表 
 $page = $_GET['page']; //获取请求的页数 
 $limit = $_GET['rows']; //获取每页显示记录数 
 $sidx = $_GET['sidx']; //获取默认排序字段 
 $sord = $_GET['sord']; //获取排序方式 
 if (!$sidx) 
  $sidx = 1; 
 
 $where = ''; 
 $title = uniDecode($_GET['title'],'utf-8'); //获取查询关键字:名称 
 if(!empty($title)) 
  $where .= " and title like '%".$title."%'"; 
 $sn = uniDecode($_GET['sn'],'utf-8'); //获取查询关键字:编号 
 if(!empty($sn)) 
  $where .= " and sn='$sn'"; 
 //执行SQL 
 $result = mysql_query("SELECT COUNT(*) AS count FROM products where deleted=0".$where); 
 $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; 
 if ($start < 0 ) $start = 0; 
 //执行分页SQL 
 $SQL = "SELECT * FROM products WHERE deleted=0".$where." 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); //输出JSON数据 
 break; 
 case '' : 
 echo 'Bad request.'; 
 break; 
}

值得一提的是,我们在进行中文查询时,即输入中文关键字进行查询时,需要用js进行escape编码,然后php接收中文关键字时相应的进行解码,否则会出现无法识别中文字符串的现象,本例中采用uniDecode函数进行解码,代码一并奉上:

/处理接收jqGrid提交查询的中文字符串 
function uniDecode($str, $charcode) { 
 $text = preg_replace_callback("/%u[0-9A-Za-z]{4}/", toUtf8, $str); 
 return mb_convert_encoding($text, $charcode, 'utf-8'); 
} 
function toUtf8($ar) { 
 foreach ($ar as $val) { 
 $val = intval(substr($val, 2), 16); 
 if ($val < 0x7F) { // 0000-007F 
  $c .= chr($val); 
 } 
 elseif ($val < 0x800) { // 0080-0800 
  $c .= chr(0xC0 | ($val / 64)); 
  $c .= chr(0x80 | ($val % 64)); 
 } else { // 0800-FFFF 
  $c .= chr(0xE0 | (($val / 64) / 64)); 
  $c .= chr(0x80 | (($val / 64) % 64)); 
  $c .= chr(0x80 | ($val % 64)); 
 } 
 } 
 return $c; 
}

以上所述就是本文给大家介绍的基于PHP和Mysql相结合使用jqGrid读取数据并显示的全部内容,关于jqgrid表格相关应用会持续给大家介绍,敬请关注。

Javascript 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Jqgrid之强大的表格插件应用
Dec 02 #Javascript
整理Javascript事件响应学习笔记
Dec 02 #Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 #Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 #Javascript
日常收藏的jquery技巧
Dec 02 #Javascript
You might like
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
Python中类型检查的详细介绍
2017/02/13 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Django分页功能的实现代码详解
2019/07/29 Python
python django中8000端口被占用的解决
2019/12/17 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
大气污染防治方案
2014/05/19 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
婚前协议书标准版
2014/10/19 职场文书
运动会闭幕词
2015/01/28 职场文书
小学生暑假安全公约
2015/07/14 职场文书