程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> PHP – EasyUI DataGrid 資料取的方式介紹

PHP – EasyUI DataGrid 資料取的方式介紹

編輯:關於PHP編程

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>一條小龍 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>一條小龍 easyUI datagrid url test</h2>

<table id="tt" class="easyui-datagrid"
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 來幫你測,想想,就還是算了,不要再改了,反正現在系統也都還好好的可以用。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved