PHP – EasyUI DataGrid 资料存的方式

haixin3036 · 发表于 2015-8-24 16:01:04

　　继上篇文章 PHP – EasyUI DataGrid 资料取的方式，本篇一條小龍继续讲述，如何操作 DataGrid，把资料存入资料库，并实现 MVC 架构，将资料层分离、独立运作。
　　本篇文章主要是改良，原 EasyUI DataGrid 的范例  Build CRUD Application with jQuery EasyUI。
　　在官方范例中已经示范如何操作资料，但其中有个问题就是，你要操作资料的每个动作都需要一支对应的程式才能动作，像是新增、删除、修改以及取得资料，总共至少要有四支对应程式才能运作。
　　读者可以想想，这还只是一支单档使用者的基本资料维护而已，一般系统光基本资料都有十几支甚至几十支程式在运作，所以这样的方式，势必要改良才能运作在实务上。
　　在来按造多层次架构设计前言的精神，大家可以发现这四支程式其实对每一个基本资料的操作来说，都是大同小异的，所以是可以把他标准化，用成一个固定框架，供后面类似程式来使用。
　　这部分，一條小龍会分几篇文章来逐渐完成这各过程，藉由这逐渐演进的过程，来了解框架是如何成形的。
　　首先本篇，先来介绍，如何把分散的四支程式集中成为一支程式来呼叫，在读者往下阅读之前，可先在了解 PHP – EasyUI DataGrid 资料取的方式以及官方范例 Build CRUD Application with jQuery EasyUI 的运作方式，至少要能把范例 Run 起来，run 这个动作是很重要的，不要光看而已，亲身去测试才能了解其中的问题点。
　　要能实现将四支程式改成一支程式来运作，其实关键很简单，就是去改每个操作动作时呼叫的 url，改成都呼叫 DAL 端的程式 dal_user.php，接下来在呼叫前，都要传递一个 type 参数告诉 dal 你要进行何种动作。
　　目前 type 定义了下面四个动作
add 新增
mod 修改
del 删除
data 取得资料
　　了解想要 dal 作哪些动作后，就可以开始来撰写 dal 程式了，当然现在这各 dal 还是一个非标准化的程式，但是他已经做到 MVC 的精神，把资料存取层跟表现层分离开了，后面的文章，一條小龍会再来介绍，如何把本篇介绍的程式来标准化 dal 以及 UI 表现层。
　　dal_user.php

1 <?php
2    $result = false;
3
4    if (!empty($_REQUEST['type']) )
5    {
6       require_once(".\..\db\DB_config.php");
7       require_once(".\..\db\DB_class.php");
8
9       $db = new DB();
10       $db->connect_db($_DB['host'], $_DB['username'], $_DB['password'], $_DB['dbname']);
11
12       $tablename = "STUser";
13
14       $type = $_REQUEST['type'];
15       if($type == "del")
16       {
17          $id = $_REQUEST['id'];
18          $sql = "delete from STUser where UNum=$id";
19          $result = $db->query($sql);
20       }else if($type == "data"){
21          $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
22          $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
23          $offset = ($page-1)*$rows;
24          $result = array();
25
26          $db->query("select count(*) As Total from $tablename");
27          $row = $db->fetch_assoc();
28
29
30
31
32          $result["total"] = $row["Total"];
33
34
35
36
37          $db->query("select * from $tablename limit $offset,$rows");
38
39
40
41
42          $items = array();
43          while($row = $db->fetch_assoc()){
44                array_push($items, $row);
45          }
46          $result["rows"] = $items;
47
48
49
50
51          echo json_encode($result);
52       }else{
53          $STUID = $_REQUEST['STUID'];
54          $Password = $_REQUEST['Password'];
55          $Nickname = $_REQUEST['Nickname'];
56          $Birthday = $_REQUEST['Birthday'];
57
58          if (!empty($_REQUEST['id']) ) {
59                $id = $_REQUEST['id'];
60                $sql = "update $tablename set STUID='$STUID',Password='$Password',Nickname='$Nickname' where UNum=$id";
61          }else{ // is add
62                $sql = "insert into $tablename (STUID, Password, Nickname, DBSTS) values('$STUID','$Password','$Nickname', 'A')";
63          }
64          $result = $db->query($sql);
65       }
66    }
67
68    if($type != "data")
69    {
70       if ($result == "true"){
71          echo json_encode(array('success'=>true));
72       } else {
73
74          echo json_encode(array('msg'=>'had errors occured. ' . $result));
75       }
76    }
77 ?>
　　dal 资料存取层定义完了以后，就可以来实现 UI 介面来呼叫 dal，因为是使用 AJAX 的方式来存取资料，所以 MVC 中的控制层有一部分是放在介面层中，这部分，后面可以在用 JavaScript 将这部分的控制层标准化，在藉由 php 后端来传递参数呼叫，如此一来，则还是将所有控制大权集中在一支程式中，这些后面文章一條小龍会再来介绍，这边先暂时打住。
　　datagrid.php

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

　　
　　下一篇 PHP – EasyUI DataGrid 资料存取标准化

账号		自动登录	找回密码
密码			立即注册

c++ size_t 和 int 的区别

HERE 使用 AWS EF 和 JFrog Artifactory 打

C++ 指针大全：从基础到进阶，一篇快速上手

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] PHP – EasyUI DataGrid 资料存的方式

浏览过的版块

扫码加入运维网微信交流群