使用易于查询的UI构建CRUD应用程序

使用教程 » 使用易于查询的UI构建CRUD应用程序

web应用程序收集和管理数据已成为一种普遍的需求。CRUD允许我们生成页面来列出和编辑数据库记录。 本教程将向您展示如何使用jQuery EasyUI框架实现CRUD DataGrid。

我们将使用以下插件:

• datagrid:显示用户列表数据。
• dialog: 创建或编辑单个用户信息。
• form: 用于提交表单数据。。
• messager: 显示一些操作消息。

步骤 一: 准备数据

我们将使用MySql数据库存储用户信息。创建数据库和“user”表。

步骤二: 创建DataGrid来显示用户信息

不使用javascript代码创建DataGrid。

<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" url="get_users.php" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="firstname" width="50">First Name</th> <th field="lastname" width="50">Last Name</th> <th field="phone" width="50">Phone</th> <th field="email" width="50">Email</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="destroyUser()">Remove User</a> </div>

我们不需要编写任何javascript代码，我们可以将用户列表显示如下图所示:

DataGrid使用分配给“get_users”的“url”属性。从服务器检索数据。

get_user的代码。php文件

$rs = mysql_query('select * from users'); $result = array(); while($row = mysql_fetch_object($rs)){ array_push($result, $row); } echo json_encode($result);

步骤三: 创建对话框形式

要创建或编辑用户，我们使用相同的对话框。

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <div class="ftitle">user information</div> <form id="fm" method="post" novalidate> <div class="fitem"> <label>fitst name</label> <input name="firstname" class="easyui-textbox" required="true"> </div> <div class="fitem"> <label>last name</label> <input name="lastname" class="easyui-textbox" required="true"> </div> <div class="fitem"> <label>Phone:</label> <input name="phone" class="easyui-textbox"> </div> <div class="fitem"> <label>Email:</label> <input name="email" class="easyui-textbox" validType="email"> </div> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a> </div>

创建对话框时也没有javascript代码。

步骤四: 实现创建和编辑用户

创建用户时，打开对话框并清除表单数据。

function newUser(){ $('#dlg').dialog('open').dialog('setTitle','New User'); $('#fm').form('clear'); url = 'save_user.php'; }

当编辑用户时，我们打开对话框并从选中的datagrid行加载表单数据。

var row = $('#dg').datagrid('getSelected'); if (row){ $('#dlg').dialog('open').dialog('setTitle','Edit User'); $('#fm').form('load',row); url = 'update_user.php?id='+row.id; }

“url”存储保存用户数据时表单将发布到的url地址。

步骤 五: 保存用户数据

为了保存用户数据，我们使用以下代码:

function saveUser(){ $('#fm').form('submit',{ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ var result = eval('('+result+')'); if (result.errorMsg){ $.messager.show({ title: 'Error', msg: result.errorMsg }); } else { $('#dlg').dialog('close'); // close the dialog $('#dg').datagrid('reload'); // reload the user data } } }); }

在提交表单之前，将调用“onSubmit”函数，在该函数中我们可以验证表单字段价值。 成功提交表单字段值后，关闭对话框并重新加载datagrid数据。

步骤六: 移除用户

要删除用户，我们使用以下代码:

function destroyUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){ if (r){ $.post('destroy_user.php',{id:row.id},function(result){ if (result.success){ $('#dg').datagrid('reload'); // reload the user data } else { $.messager.show({ // show error message title: 'Error', msg: result.errorMsg }); } },'json'); } }); } }

在删除一行之前，我们将显示一个确认对话框，让用户确定是否真正删除行数据。 删除数据成功后，调用“reload”方法刷新datagrid数据。

步骤 七: 运行代码

在启动MySQL的浏览器中运行代码。

现在，您已经了解了jQuery EasyUI框架中CRUD的基本知识。按下面的链接开始演示 应用程序。

下载 EasyUI 实例: