PHP – EasyUI DataGrid 资料存的方式介绍

继上篇文章 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

代码如下:

<?php
$result = false;

if (!empty($_REQUEST['type']) )
{
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']);

$tablename = "STUser";

$type = $_REQUEST['type'];
if($type == "del")
{
$id = $_REQUEST['id'];
$sql = "delete from STUser where UNum=$id";
$result = $db->query($sql);
}else if($type == "data"){
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$result = array();

$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);
}else{
$STUID = $_REQUEST['STUID'];
$Password = $_REQUEST['Password'];
$Nickname = $_REQUEST['Nickname'];
$Birthday = $_REQUEST['Birthday'];

if (!empty($_REQUEST['id']) ) {
$id = $_REQUEST['id'];
$sql = "update $tablename set STUID='$STUID',Password='$Password',Nickname='$Nickname' where UNum=$id";
}else{ // is add
$sql = "insert into $tablename (STUID, Password, Nickname, DBSTS) values('$STUID','$Password','$Nickname', 'A')";
}
$result = $db->query($sql);
}
}

if($type != "data")
{
if ($result == "true"){
echo json_encode(array('success'=>true));
} else {

echo json_encode(array('msg'=>'had errors occured. ' . $result));
}
}
?>

dal 资料存取层 定义完了以后，就可以来实现 UI 介面来呼叫 dal，因为是使用 AJAX 的方式 来存取资料，所以 MVC 中的控制层有一部分是放在 介面层中，这部分，后面可以在用 JavaScript 将这部分的控制层标准化，在藉由 php 后端来传递参数呼叫，如此一来，则还是将所有控制大权集中在一支程式中，这些后面文章会再来介绍，这边先暂时打住。

datagrid.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">
<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>
<script type="text/javascript" src="./../JS/EasyUI/easyui-lang-zh_CN.js"></script>

<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
color:#666;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>

<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'dal_user.php?type=add';
}
function editUser(){
var row = $('#myDG').datagrid('getSelected');
if (row){

if(typeof(row.UNum) !== 'undefined')
{
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'dal_user.php?type=mod&id='+row.UNum;
}else{
alert("undefined");
}
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
//alert('sub :'+ url);
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
//alert(result.success);
if (result.success){
$('#dlg').dialog('close'); // close the dialog
$('#myDG').datagrid('reload'); // reload the user data
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
function removeUser(){
var row = $('#myDG').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
if (r){
//alert(row.UNum);
$.post('dal_user.php', {type:'del', id:row.UNum}, function(result){
if (result.success){
$('#myDG').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.msg
});
}
},'json');
}
});
}
}
</script>
</head>
<body>
<h2>easyUI datagrid url 存取測試</h2>

<table id="myDG" class="easyui-datagrid" style="width:700px;height:450px"
url="dal_user.php?type=data" toolbar="#toolbar"
title="Load Data" iconCls="icon-save" pagination="true"
toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<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>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:350px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>User ID:</label>
<input name="STUID" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Password:</label>
<input name="Password" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Nickname:</label>
<input name="Nickname">
</div>
<div class="fitem">
<label>Birthday:</label>
<input name="Birthday" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>

</body>
</html>

运作结果画面如下所示：

赞 (0)

相关推荐

  • EasyUI中datagrid在ie下reload失败解决方案

    问题 最近使用EasyUI开发后台系统,测试时发现个奇葩的问题,$('dg').datagrid('reload'); 重新加载表格数据时,ie下一点反应都没有.后来发现其实并不是没有反应,而是浏览器使用了缓存. 解决方案 网上网友总结出来的解决方案有以下几种: 1.在url后加时间戳,使第一次加载和reload中访问的url不一致,使系统无法使用IE缓存.通过测试发现,EasyUI请求时后面已经自带一串随机数_145232xxx,但是ie还是会使用缓存.后来我在请求的js中为url加上rand

  • jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以参考. 运行效果图: 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分: <link href="../Js/jQueryEasyUI/them

  • jQuery EasyUI datagrid实现本地分页的方法

    jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • ASP.NET MVC使用EasyUI的datagrid多选提交保存教程

    需要实现EasyUI的datagrid组件加入选择checkbox列,并提交后台批量添加的功能,页面代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(function() { //searchbox $('#selectgoods-keywords').searchbox({ searcher: function(val, name) { searchInfo

  • jQuery easyui datagrid动态查询数据实例讲解

    jQuery easyui datagrid动态查询数据实例讲解

    该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu

  • JQueryEasyUI datagrid框架的基本使用

    JQueryEasyUI datagrid框架的基本使用

    今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码 代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引

  • Jquery EasyUI Datagrid右键菜单实现方法

    Jquery EasyUI Datagrid右键菜单实现方法

    最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能 用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键就可以. 下面上HTML 代码 <div id="menu" class="

  • Jquery下EasyUI组件中的DataGrid结果集清空方法

    Jquery下EasyUI组件中的DataGrid结果集清空方法

    我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是

  • 扩展easyui.datagrid，添加数据loading遮罩效果代码

    在使用的过程中,发现easyui目前还缺少一些小功能或是未开放出来 拿datagrid插件来说,数据加载提供了两种方式远程和本地数据加载,但只有远程数据加载时才会显示数据加载的遮罩层,在数据加载完成后隐藏遮罩层:而本地数据加载时则不会出现遮罩,这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 不过呢,在实际的项目开发过程中使用时,没有考虑使用url方式加载数据,则采用了loadData方法来异步加载数据,这个时候就很有必要显示遮罩层来提示用户当前正在加载数据,分析easyui的datag

随机推荐