PHP – EasyUI DataGrid 资料存取标准化

延续上篇 PHP – EasyUI DataGrid 资料存的方式 ，本篇将上篇其中资料存取的 dal_user.php 予以标准化，藉由标准化的 dal 才能将知识传承下去并可将程式撰写的方式标准化下来。

一般我们要将程式撰写的方式标准化，都会撰写程式撰写规范文件的方式，来告诉开发人员要如何来撰写程式。

接下来，要来定义 DAL 的 interface，也就是设定 DAL 标准该有的介面有哪些（有关本文所讲述 DAL 的概念，读者 可参阅 PHP – 架構設計 Data Access Layer 篇，看过以后会更容易了解本文所说的概念），介面说明如下。

首先，要能实现之前在 PHP – EasyUI DataGrid 资料存的方式 中 type 所定义的四个动作
add 新增
mod 修改
del 删除
data 取得资料

这些 都要能有对应的资料处理介面，而这四个动作，也都跟业务逻辑没有关联，所以算是很单纯的资料存取，很容易就能写出，标准化介面如下所示：

IDAL.php

View Code 
 1 <?php
 2  
 3 /**
 4     * @file IDAL.php
 5     * @brief 設定 DAL 標準該有的介面
 6     * @author watson
 7     * @version 1.0
 8     * @date 2012-10-05
 9  */
10 interface IDAL
11 {
12     /**
13         * @brief 設定要操作的資料庫
14         *
15         * @param $id    要操作的資料庫
16         *
17         * @return 無回傳值
18      */
19     public function setDB($fdb);
20      
21     /**
22         * @brief 藉由table 的唯一主 key 來刪除特定資料
23         *
24         * @param $id    要刪除資料的 key 值
25         *
26         * @return 成功回傳 'true', 失敗回傳 錯誤信息
27      */
28     public function delete($id);
29      
30     /**
31         * @brief 更新資料，資料從 $_REQUEST 取得，索引名稱需與 資料庫 table 的欄位名稱一致
32         *
33         * @return 成功回傳 'true', 失敗回傳 錯誤信息
34      */
35     public function update();
36      
37     /**
38         * @brief 新增資料，資料從 $_REQUEST 取得，索引名稱需與 資料庫 table 的欄位名稱一致
39         *
40         * @return 成功回傳 'true', 失敗回傳 錯誤信息
41      */
42     public function insert();
43      
44     /**
45         * @brief 取得目前資料的總筆數
46         *
47         * @return 回傳資料的總筆數
48      */
49     public function getTotalCount();
50      
51     /**
52         * @brief 藉由查詢條件 criValues 來取得資料
53         *
54         * @param $criValues 該網頁資料處理對應的 DAL
55         *
56         * @return 回傳資料集陣列
57      */
58     public function getData($criValues);
59 }
60  
61 ?>

接下来，当然就是 要对上面定义的介面来实现 各个 table 对应的 DAL 来处理资料。
这部分的实现，并不复杂，但跟技术比较有关西，为了避免偏离原先要讲架购的主题，还请读者自行去实做，只要能实现上述界面所要功能就可以了。

DAL 这部分用好后，在来就是思考，如何来应用在 UI 层了，这部分需要思考几个问题，第一，是希望程式的档案数要能减少，最好是一支程式就能完成。
第二，UI 层 牵涉到 DAL 的呼叫，也就是 MVC 中的控制部分，也要能标准化起来，如此后面每一支系统程式，就不用每一支都要来去控制 DAL 的呼叫，尽量把会重复使用的控制跟操作的方法，封装起来，藉此简化，后面应用时的复杂度，而能在应用时专心该系统要解决的问题上就好。

在这，一條小龍 把控制 DAL 的程式码，封装成一个 DG_Page 的 class 来处理，如此， UI 层 就只需要在简单来呼叫使用即可。
这部分程式码，如下所示：

DG_Page.php

View Code 
  1 <?php
  2  
  3 /**
  4     * @file DG_Page.php
  5     * @brief 基本檔網頁的資料處理
  6     * @author watson
  7     * @version 1.0
  8     * @date 2012-10-05
  9  */
 10 class DG_Page 
 11 {
 12     var $db;
 13     var $dal;
 14      
 15     /**
 16         * @brief 建構式
 17         *
 18         * @param $fdal  該網頁資料處理對應的 DAL
 19         *
 20         * @return 
 21      */
 22     public function __construct(IDAL $fdal)
 23     {
 24         require_once("..\..\db\DB_config.php");
 25         require_once("..\..\db\DB_class.php");
 26          
 27         //if (!empty($fdal))
 28         //{
 29             //return die(get_class($this)."->".__FUNCTION__." => DAL not define");
 30         //}
 31          
 32         $this->db = new DB();
 33         $this->db->connect_db($_DB['host'], $_DB['username'], $_DB['password'], $_DB['dbname']);
 34          
 35         $this->dal = $fdal;
 36         $this->dal->setDB($this->db);
 37     }
 38      
 39     /**
 40         * @brief 處理 Post 回來的資料，$_REQUEST['type'] 不能為空
 41         *
 42         * @return Type=Insert, Update 成功 回傳 array('success'=>true)
 43         *   Type=Data 回傳 EasyUI 用的資料集
 44         *   Type=Qry 回傳 JSON 資料集
 45      */
 46     public function dealPost()
 47     {
 48         $result = false;
 49              
 50         $type = $_REQUEST['type'];
 51         $msg = "";
 52          
 53         if (!empty($_REQUEST["forKey"]))
 54         {
 55             $_REQUEST[$this->dal->Foreignkey] = $_REQUEST["forKey"];
 56         }
 57          
 58         if($type == "del")
 59         {
 60             $id = $_REQUEST['id'];
 61             $result = $this->dal->delete($id);
 62          
 63         }else if($type == "data"){
 64              
 65             $res = array();
 66              
 67             $res["total"] = $this->dal->getTotalCount();
 68              
 69             $items = $this->dal->getData($_REQUEST);
 70  
 71             $res["rows"] = $items;
 72              
 73             echo json_encode($res); 
 74         }else if($type == "qry"){
 75  
 76             $items = $this->dal->getData($_REQUEST);
 77  
 78             echo json_encode($items); 
 79      
 80         }else{
 81              
 82             if (!empty($_REQUEST['id']) ) {
 83                 $result = $this->dal->update();
 84             }else{ // is add
 85                 $result = $this->dal->insert();
 86             }
 87         }
 88          
 89         if($type != "data" && $type != "qry")
 90         {
 91             if ($result == "true"){
 92                 echo json_encode(array('success'=>true));
 93             } else {
 94                  
 95                 echo json_encode(array('msg'=>'had errors occured. ' . $result));
 96             }
 97         }
 98     }
 99 }
100 ?>

由程式码，可以看到一條小龍，把 在 PHP – EasyUI DataGrid 资料存的方式 中 type 所定义的四个动作，DG_Page 在实做一次，跟 DAL 层不同的是这边重点，主要在把 DAL 取出的资料，予以处理，将其格式调整成 UI 控件，在这范例中，也就是 EasyUI DataGrid 能接受的资料格式。

如此，后面需要更换 控件时，就只需改写 这个 class 即可，而且 DAL 的部分，它的功能也比在前篇的 dal_user class 更加明确，如此一来，本文的 dal 只单纯在做资料处理，应用范围就会更宽广。

最后，为了应用，前面写的两支程式，需在改写 datagrid.php 这支程式，让其在后面应用上，EasyUI DataGrid 都只需要呼叫自己本身来处理即可，不需在像前篇PHP – EasyUI DataGrid 资料存的方式 中所述，还需要 呼叫另外一支 dal_user.php 的程式，如此一来，可大大 减少后须维护的程式相关档案的数量，不用为了维护一支程式要找好几支档案来处理。

datagrid.php

View Code 
  1 <?php
  2     require_once("..\..\db\DAL\STDAL.php");
  3  
  4     $prgName = "User";  
  5     $dal = DALFactory::getInstance($prgName);
  6      
  7     $LoginPath = "datagrid.php";
  8      
  9     if (!empty($_REQUEST['type']) )
 10     {
 11         require_once("..\..\util\DG_Page.php");
 12          
 13         $myPage = new DG_Page($dal);
 14          
 15         $myPage->dealPost();
 16     }else{
 17 ?>
 18 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 19 <html>
 20 <head>
 21     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 22     <title>一條小龍 easyUI datagrid</title>
 23      
 24  
 25     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/JS/EasyUI/themes/default/easyui.css">
 26     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/JS/EasyUI/themes/icon.css">
 27      
 28     <script type="text/javascript" src="http://www.cnblogs.com/JS/jquery.js"></script>
 29     <script type="text/javascript" src="http://www.cnblogs.com/JS/EasyUI/jquery.easyui.min.js"></script>
 30     <script type="text/javascript" src="http://www.cnblogs.com/JS/EasyUI/easyui-lang-zh_CN.js"></script>
 31      
 32     <style type="text/css">
 33         #fm{
 34             margin:0;
 35             padding:10px 30px;
 36         }
 37         .ftitle{
 38             font-size:14px;
 39             font-weight:bold;
 40             color:#666;
 41             padding:5px 0;
 42             margin-bottom:10px;
 43             border-bottom:1px solid #ccc;
 44         }
 45         .fitem{
 46             margin-bottom:5px;
 47         }
 48         .fitem label{
 49             display:inline-block;
 50             width:80px;
 51         }
 52     </style>
 53      
 54     <script type="text/javascript">
 55         <?php
 56             echo "post_prg = '$LoginPath';";
 57             echo "primay_key = '$dal->PrimaryKey';";
 58         ?>
 59         var url;
 60          
 61         $(function(){
 62             furl = post_prg+ '?type=data';
 63             $('#myDG').datagrid({
 64                 url:furl
 65             });
 66         });
 67  
 68         function newUser(){
 69             $('#dlg').dialog('open').dialog('setTitle','New User');
 70             $('#fm').form('clear');
 71             url = post_prg + '?type=add';
 72         }
 73         function editUser(){
 74             var row = $('#myDG').datagrid('getSelected');
 75             if (row){
 76                  
 77                 if(typeof(row.UNum) !== 'undefined')
 78                 {
 79                     $('#dlg').dialog('open').dialog('setTitle','Edit User');
 80                     $('#fm').form('load',row);
 81                     url = post_prg + '?type=mod&id='+row.UNum;
 82                 }else{
 83                     alert("undefined");
 84                 }
 85             }
 86         }
 87         function saveUser(){
 88             $('#fm').form('submit',{
 89                 url: url,
 90                 onSubmit: function(){
 91                     //alert('sub :'+ url);
 92                     return $(this).form('validate');
 93                 },
 94                 success: function(result){
 95                     var result = eval('('+result+')');
 96                     //alert(result.success);
 97                     if (result.success){
 98                         $('#dlg').dialog('close');      // close the dialog
 99                         $('#myDG').datagrid('reload');  // reload the user data
100                     } else {
101                         $.messager.show({
102                             title: 'Error',
103                             msg: result.msg
104                         });
105                     }
106                 }
107             });
108         }
109         function removeUser(){
110             var row = $('#myDG').datagrid('getSelected');
111             if (row){
112                 $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
113                     if (r){
114                         //alert(row.UNum);
115                         $.post(post_prg, {type:'del', id:row.UNum}, function(result){
116                             if (result.success){
117                                 $('#myDG').datagrid('reload');  // reload the user data
118                             } else {
119                                 $.messager.show({   // show error message
120                                     title: 'Error',
121                                     msg: result.msg
122                                 });
123                             }
124                         },'json');
125                     }
126                 });
127             }
128         }
129     </script>
130 </head>
131 <body>
132     <h2>一條小龍 easyUI datagrid url 存取測試2</h2>
133      
134     <table id="myDG" class="easyui-datagrid" style="width:700px;height:450px"
135             toolbar="#toolbar"
136             title="Load Data" iconCls="icon-save" pagination="true"
137             toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">
138         <thead>
139             <tr>
140                 <th field="STUID" width="120">User ID</th>
141                 <th field="Password" width="80" align="right">Password</th>
142                 <th field="Birthday" width="80" align="right">Birthday</th>
143                 <th field="Nickname" width="200">Nickname</th>
144                 <th field="DBSTS" width="60" align="center">DBSTS</th>
145             </tr>
146         </thead>
147     </table>
148     <div id="toolbar">
149         <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
150         <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
151         <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
152     </div>
153      
154     <div id="dlg" class="easyui-dialog" style="width:400px;height:350px;padding:10px 20px"
155             closed="true" buttons="#dlg-buttons">
156         <div class="ftitle">User Information</div>
157         <form id="fm" method="post" novalidate>
158             <div class="fitem">
159                 <label>User ID:</label>
160                 <input name="STUID" class="easyui-validatebox" required="true">
161             </div>
162             <div class="fitem">
163                 <label>Password:</label>
164                 <input name="Password" class="easyui-validatebox" required="true">
165             </div>
166             <div class="fitem">
167                 <label>Nickname:</label>
168                 <input name="Nickname">
169             </div>
170             <div class="fitem">
171                 <label>Birthday:</label>
172                 <input name="Birthday" class="easyui-validatebox" validType="email">
173             </div>
174         </form>
175     </div>
176     <div id="dlg-buttons">
177         <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
178         <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
179     </div>
180      
181 </body>
182 </html>
183  
184 <?php
185  
186     }
187      
188 ?>

在这支程式中，UI 层还可以在用一个 Layout 来处理，把 整各画面的排版方式，用一支 Layout 的 php or html 档，来描述好再给这支程式来呼叫使用即可，如此就可让 程式人员减少接触太多的 HTML，并把 Layout 可以给专业网页开发人员来处理，来达到前后台分离开发的目的。

结果画面，如下所示：

posted @ 2012-11-09 07:14  一条小龙  阅读(3372)  评论(5)  编辑  收藏  举报