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

前端之家收集整理的这篇文章主要介绍了基于PHP和Mysql相结合使用jqGrid读取数据并显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

XHTML@H_301_12@

编号:

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

Javascript@H_301_12@

首先调用jqGrid,我们以本站jqGrid:,调用jqGrid,生成表格,请看代码和注释。

关于jqGrid相关选项设置请参照:

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

PHP?action=list",postData:{'title':title,'sn':sn},//发送数据 page:1 }).trigger("reloadGrid"); //重新载入 }); });

PHP@H_301_12@

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

$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 = "修改";
$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函数进行解码,代码一并奉上:

查询的中文字符串 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; }

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

原文链接:https://www.f2er.com/js/51341.html

猜你在找的JavaScript相关文章