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 相关文章推荐
在PHP中使用灵巧的体系结构
Oct 09 PHP
PHP简单系统查询模块代码打包下载
Jun 07 PHP
数据库查询记录php 多行多列显示
Aug 15 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
Apr 22 PHP
处理单名多值表单的详解
Jun 08 PHP
thinkphp3.x中display方法及show方法的用法实例
May 19 PHP
php封装的page分页类完整实例
Oct 18 PHP
PHP编程实现csv文件导入mysql数据库的方法
Apr 29 PHP
php生成网页桌面快捷方式
May 05 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
Jan 04 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
Apr 06 PHP
PHP 对象接口简单实现方法示例
Apr 13 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
PHP整合PayPal支付
2015/06/11 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
在Python中使用成员运算符的示例
2015/05/13 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
营销专业应届生求职信
2013/11/26 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
旅游文化节策划方案
2014/06/06 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
复兴之路观后感
2015/06/02 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
党章学习心得体会2016
2016/01/14 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书