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