PHP ? EasyUI DataGrid 资料取的方式介绍


Posted in PHP onNovember 07, 2012

EasyUI DataGrid 是一个用 Jquery 写的 DataGrid,由此可知,是一个 前端 Web UI 技术,一般大家在产生 DataGrid 比较常见的应该就是使用后台 PHP 等后台语言,来直接产生 HTML 语法,来显示 DataGrid,当要对该 DataGrid 操作时,在传递参数到后端,重新产生整各网页。

而 EasyUI DataGrid 支援两种做法,一个是,上述,后台 server 把显示的 HTML 产生好,在给前端显示。另一种是,利用 AJAX 的方式来产生,就只是单纯喂 JSON 格式资料给前端,前端接收到资料后,在自己分析资料利用 JQuery 来刷新 DataGrid 该部分的画面。

这边介绍的是第二种做法,利用 AJAX 技术来做,这样的好处,是可以把 资料层-> 控制层-> 展示层 三层独立来运作,达到我在之前 多层次架构设计前言 所讲的精神,不会像老方法,把 HTML 的产生都放在 PHP 中来产生,造成 PHP 开发人员本身,也要对 HTML 等前端技术也要了解很深才能进行开发的问题。

在来如此作法,为带来另一种好处,就是你前端的 UI 是可以更换,而后台程式却不用来大幅修改。目前支援 JSON 资料格式的 JavaScript DataGrid 有很多各,大家也可以多去参考其他的公司所提供的 DataGrid ,从中选择一个最适合的来使用。

介绍到此,接下来直接看程式码,会更加了解我上述的意思:

首先,需要先设计 HTML UI 介面,定义要显示哪些栏位,栏位的显示名称等,关于这部分的栏位定义,EasyUI DataGrid 也是有提供,使用 JavaScript 来动态定义,而我习惯用 HTML 直接定义,这样 也不复杂,后面在分工上,也比较容易来直接交给 Web 美工人员来直接操作。

这部分重点在 URL 的设定。
DataGrid2.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="keywords" content="jquery,ui,easy,easyui,web"> 
<meta name="description" content="easyui help you build your web page easily!"> 
<title>一?l小? easyUI datagrid</title> 
<link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/icon.css"> <script type="text/javascript" src="./JS/jquery.js"></script> 
<script type="text/javascript" src="./JS/EasyUI/jquery.easyui.min.js"></script> 
</head> 
<body> 
<h2>一?l小? easyUI datagrid url test</h2> 
<table id="tt" class="easyui-datagrid" style="width:750px;height:300px" 
url="datagrid2_getdata.php" title="Load Data" pagination="true"> 
<thead> 
<tr> 
<th field="UNum" width="80">UNum</th> 
<th field="STUID" width="120">User ID</th> 
<th field="Password" width="80" align="right">Password</th> 
<th field="Birthday" width="80" align="right">Birthday</th> 
<th field="Nickname" width="200">Nickname</th> 
<th field="DBSTS" width="60" align="center">DBSTS</th> 
</tr> 
</thead> 
</table> 
</body> 
</html>

在来定义资料取得的后台介面
datagrid2_getdata.php
<?php 
$page = isset($_POST['page']) ? intval($_POST['page']) : 1; 
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; 
$offset = ($page-1)*$rows; 
$result = array(); $tablename = "STUser"; 
// ... 
require_once(".\db\DB_config.php"); 
require_once(".\db\DB_class.php"); 
$db = new DB(); 
$db->connect_db($_DB['host'], $_DB['username'], $_DB['password'], $_DB['dbname']); 
$db->query("select count(*) As Total from $tablename"); 
$row = $db->fetch_assoc(); 
$result["total"] = $row["Total"]; 
$db->query("select * from $tablename limit $offset,$rows"); 
$items = array(); 
while($row = $db->fetch_assoc()){ 
array_push($items, $row); 
} 
$result["rows"] = $items; 
echo json_encode($result); 
?>

由上述,可以看出,这是一个很单纯的资料取得的动作。
一开始 DataGrid 会传进来 两个参数,
$_POST['page']) 目前是在第几页
$_POST['rows']) 每页要显示几笔资料

然后,要使用一个阵列 $result ,存放两个资讯,
$result["total"] 有几笔资料
$result["rows"] 存放实际的资料阵列集
最后要将 $result 阵列,产生将 JSON 资料格式来输出,DataGrid 接收到以后就会来处理、刷新画面了。

后面,在更进一步,可以将 datagrid2_getdata.php 在抽象化一层,也就是将属于 EasyUI DataGrid 特有的资料格式处理的部分与资料库存取的的部分分离,各自独立出来成为 两个 class 来处理。

一个好的架构 以及 class 设计,其实都是靠经验的累积而生成的,不断演进改良,原有的框架,其中最重要的精神就是,每个 Class 的分工要清楚而且精确,这是为了应付上述,不断演进 这各问题来做的对应措施,这样在未来才更容易去做修改调整。

否则更容易变成,你想改却不知从何下手,因为一改就有几十支,甚至上百支程式等着你,要一起修改,从而延伸出,稳定性问题,也就是大家反对去修改原有系统,就是因为 太多要改了,少改一支也不行,问题几十支一起改,就算都改完,谁来测试有没有改好,难道叫你的 user 来帮你测,想想,就还是算了,不要再改了,反正现在系统也都还好好的可以用。

PHP 相关文章推荐
一个改进的UBB类
Oct 09 PHP
为IP查询添加GOOGLE地图功能的代码
Aug 08 PHP
php class类的用法详细总结
Oct 17 PHP
php实现excel中rank函数功能的方法
Jan 20 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
May 11 PHP
Discuz!X中SESSION机制实例详解
Sep 23 PHP
PHP使用mkdir创建多级目录的方法
Dec 22 PHP
常用PHP数组排序函数归纳
Aug 08 PHP
phpstudy默认不支持64位php的解决方法
Feb 20 PHP
PHP实现负载均衡session共享redis缓存操作示例
Aug 22 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
Jun 12 PHP
TP5框架实现的数据库备份功能示例
Apr 05 PHP
PHP正确解析UTF-8字符串技巧应用
Nov 07 #PHP
nginx+php-fpm配置文件的组织结构介绍
Nov 07 #PHP
使用 PHPMAILER 发送邮件实例应用
Nov 07 #PHP
PHP数据集构建JSON格式及新数组的方法
Nov 07 #PHP
php动态实现表格跨行跨列实现代码
Nov 06 #PHP
对象失去焦点时自己动提交数据的实现代码
Nov 06 #PHP
php语言流程控制中的主动与被动
Nov 05 #PHP
You might like
Php部分常见问题总结
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
出纳岗位职责范本
2013/12/01 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
旅游市场营销方案
2014/03/09 职场文书
经典禁毒标语
2014/06/16 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
复活读书笔记
2015/06/29 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis