使用easyUI创建一个CRUD的应用

crud成为普遍的应用去搜集数据和正常的管理.CRUD允许我们生成页面列表和编辑数据库数据,这个教程将告诉你如何实现CRUD DataGrid 使用easyUI框架.

我们将要使用以下插件:

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

第一步: 准备好数据库

我们将使用mysql存储用户信息,创建数据库和'users'表.

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

创建 DataGrid 没有javascript代码:

[html] view plain copy

1. <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"    
2.         url="get_users.php"    
3.         toolbar="#toolbar"    
4.         rownumbers="true" fitColumns="true" singleSelect="true">    
5.     <thead>    
6.         <tr>    
7.             <th field="firstname" width="50">First Name</th>    
8.             <th field="lastname" width="50">Last Name</th>    
9.             <th field="phone" width="50">Phone</th>    
10.             <th field="email" width="50">Email</th>    
11.         </tr>    
12.     </thead>    
13. </table>    
14. <div id="toolbar">    
15.     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>    
16.     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>    
17.     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>    
18. </div>    

我们不需要写任何的 javascript 代码,我们显示用户列表如以下图片:

使用DataGrid 的url属性,委派给'get_users.php'从服务器检索数据:

get_users.php代码文件:

[javascript] view plain copy

1. $rs = mysql_query('select * from users');    
2. $result = array();    
3. while($row = mysql_fetch_object($rs)){    
4.     array_push($result, $row);    
5. }    
6.     
7. echo json_encode($result);    

第三步: 创建 form对话框

我们使用相同的对话框,创建或者编辑一个用户:

[html] view plain copy

1. <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"    
2.         closed="true" buttons="#dlg-buttons">    
3.     <div class="ftitle">User Information</div>    
4.     <form id="fm" method="post">    
5.         <div class="fitem">    
6.             <label>First Name:</label>    
7.             <input name="firstname" class="easyui-validatebox" required="true">    
8.         </div>    
9.         <div class="fitem">    
10.             <label>Last Name:</label>    
11.             <input name="lastname" class="easyui-validatebox" required="true">    
12.         </div>    
13.         <div class="fitem">    
14.             <label>Phone:</label>    
15.             <input name="phone">    
16.         </div>    
17.         <div class="fitem">    
18.             <label>Email:</label>    
19.             <input name="email" class="easyui-validatebox" validType="email">    
20.         </div>    
21.     </form>    
22. </div>    
23. <div id="dlg-buttons">    
24.     <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>    
25.     <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>    
26. </div>    

这个对话框已经创建也没有任何的javascript代码:

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

当创建一个用户,我们打开一个对话框和清理form数据

[javascript] view plain copy

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

当编辑一个用户,我们打开一个对话框加载form数据从 datagrid选择的行

[javascript] view plain copy

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

'url'存储着URL表单提交地址,当保存用户数据时

第五步: 保存用户数据

我们使用以下代码保存用户数据

[javascript] view plain copy

1. function saveUser(){    
2.     $('#fm').form('submit',{    
3.         url: url,    
4.         onSubmit: function(){    
5.             return $(this).form('validate');    
6.         },    
7.         success: function(result){    
8.             var result = eval('('+result+')');    
9.             if (result.success){    
10.                 $('#dlg').dialog('close');      // close the dialog    
11.                 $('#dg').datagrid('reload');    // reload the user data    
12.             } else {    
13.                 $.messager.show({    
14.                     title: 'Error',    
15.                     msg: result.msg    
16.                 });    
17.             }    
18.         }    
19.     });    
20. }   

提交form之前,'onSubmit'函数将被调用,在那里我们可以验证form字段值当form字段值提交成功,关闭对话框和重新加载datagrid数据;

第6步:删除一个用户

我们使用以下代码,移除一个用户.

[javascript] view plain copy

1. function removeUser(){    
2.     var row = $('#dg').datagrid('getSelected');    
3.     if (row){    
4.         $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){    
5.             if (r){    
6.                 $.post('remove_user.php',{id:row.id},function(result){    
7.                     if (result.success){    
8.                         $('#dg').datagrid('reload');    // reload the user data    
9.                     } else {    
10.                         $.messager.show({   // show error message    
11.                             title: 'Error',    
12.                             msg: result.msg    
13.                         });    
14.                     }    
15.                 },'json');    
16.             }    
17.         });    
18.     }    
19. }    

移除一行之前,我们将显示一个确认confirm对话框让用户决定是否真的移除该行数据,当删除数据成功之后,调用'reload'方法刷新datagrid 数据

第7步: 运行代码

在浏览器运行你的代码和开启 MySQL .

所以,现在你知道在EasyUI的基础的CRUD ,按下下面的连接启动示例应用:

View Demo

下载EasyUI示例代码:

easyui_crud_demo.zip