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

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

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

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表格相关应用会持续给大家介绍,敬请关注。

(0)

相关推荐

  • Jqgrid设置全选(选择)及获取选择行的值示例代码

    1.添加multiselect: true 2.获取选择行的值 复制代码 代码如下: var rowData = jQuery('#List').jqGrid('getGridParam','selarrrow');    if(rowData.length)     {        for(var i=0;i<rowData.length;i++)        {           var name= jQuery('#List').jqGrid('getCell',rowData[i]

  • jqGrid表格应用之新增与删除数据附源码下载

    jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用. 下面给大家展示了效果图,喜欢的朋友可以直接下载源码哦. 效果展示    源码下载 在上一篇文章中,我们提到过jqGrid自身有强大的单元格操作模块,但是这些模块操作起来不太适合用户的习惯,在本文中,我们使用fancybox,以及表单插件来完成jqGrid数据的添加以及删除操作. XHTML 首先需要在he

  • jqGrid用法汇总(全经典)

    支持多种类型的数据集合作为数据源 jqGrid可以绑定三种类型的数据:XML,JSON和数组.使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组) $("#grid1").jqgrid( ........ datatype: "xml", ........ ); 下面则列举各种数据类型的格式 XML格式: <rows> <page></page> <total>

  • Jqgrid之强大的表格插件应用

    jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合. jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数

  • Bootstrap嵌入jqGrid,使你的table牛逼起来

    Bootstrap原生的table组件只能满足简单的数据展示,满足不了更富有操作性的要求.当然了,你可以找到一款叫做"DataTables-1.10.11"的基于bootstrap的table组件,但如果你对API看得不甚了解的话,用起来可就痛苦了,但是如果你选择使用jqGrid,那么本篇教程就给你带来了解决这种富操作性table的解决方案. 一.效果展示 OK,就展示这一张图片,相信你已经爱上了bootstrap版的jqGrid,和bootstrap很兼容,简直完美,当然了,这需要我

  • jqGrid中文文档之选项设置

    jqGrid提供了大量的选项设置,开发者可以通过设置选项对应值来控制jqGrid,比如表格的宽度.高度.数据类型以及列名称等等都是通过选项设置来完成的.jqGrid的选项一般是名称:值(name:value)的形式,也可以是对象(object)及数组(array)的形式配置. jqGrid选项(Option) 调用jqGrid只需要执行以下代码: jQuery("#grid_id").jqGrid(options); options即jqGrid的选项设置,请参照以下表格. 属性 类型

  • Java中jqGrid 学习笔记整理——进阶篇(二)

    相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

  • jqGrid 学习笔记整理——进阶篇(一 )

    在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

  • jqGrid读取选择的多行的某个属性代码

    复制代码 代码如下: var selrow =articleTable.getGridParam('selarrrow');//获取多行的id var columnCodes=[];//初始化一个数组 $(selrow).each(function (index, yu) {//遍历每个id 找到每个data 并把属性加到初始化数组里 var rowData = articleTable.jqGrid("getRowData", yu); columnCodes.push(rowDat

  • jqgrid 编辑添加功能详细解析

    ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 用法: Java代码 : 复制代码 代码如下: jQuery("#gridid").jqGrid({   ...      colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],   ..   }); 属性  数据类型  备注  默认值  align  string  定义单元格对齐方式:可选值:left, center, right.  left 

  • jqGrid随窗口大小变化自适应大小的示例代码

    第一种: jqGrid随窗口大小变化自适应宽度 复制代码 代码如下: $(function(){            $(window).resize(function(){            $("#listId").setGridWidth($(window).width());        });       }); 第二种: 复制代码 代码如下: window.onresize = function  _doResize() {  var ss = pageSize()

  • 通过点击jqgrid表格弹出需要的表格数据

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及删除资料等功能. 自定义的工具列 预设的Navigator工具列,可以很容易的使用新增.删除.编辑.检视及搜寻等功能. 完整的分页功能 按下任一栏位的标头,皆可以该栏位为排序项目.无论是升序或降序皆可. 预设的action formatter,可以快速而直觉地对每笔资料做运算. 支持多种数据格式.比如json.xm

  • JQGrid的用法解析(列编辑,添加行,删除行)

    复制代码 代码如下: <script> $(document).ready(function(){ initPlsfList();});//初始化grid列表function initPlsfList(){ //缓存表列数组,key 为页面元素的name ,value 对应数据库中的字段 var cellArray = new Array(); cellArray["zoneID"] ="ZONE_ID";  cellArray["factor

随机推荐