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 相关文章推荐
模仿OSO的论坛(二)
Oct 09 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
Aug 22 PHP
深入php函数file_get_contents超时处理的方法详解
Jun 03 PHP
php 中文字符串首字母的获取函数分享
Nov 04 PHP
dedecms中使用php语句指南
Nov 13 PHP
PHP框架Laravel插件Pagination实现自定义分页
Apr 22 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
Sep 22 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
Jun 30 PHP
php基于自定义函数记录log日志方法
Jul 21 PHP
详解PHP文件的自动加载(autoloading)
Feb 04 PHP
PHP反射实际应用示例
Apr 03 PHP
PHP如何开启Opcache功能提升程序处理效率
Apr 27 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP 使用memcached简单示例分享
2015/03/05 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python实现k-means算法
2018/02/23 Python
详解python pandas 分组统计的方法
2019/07/30 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
大专应届毕业生求职信
2014/07/15 职场文书
社团活动总结格式
2014/08/29 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
小班上学期个人总结
2015/02/12 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python