您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關PHP中EasyUI DataGrid取的方式有哪些,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
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>
<h3>一條小龍 easyUI datagrid url test</h3>
<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 來幫你測,想想,就還是算了,不要再改了,反正現在系統也都還好好的可以用。
關于“PHP中EasyUI DataGrid取的方式有哪些”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。