注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

使用easyUI创建一个CRUD的应用  

2013-10-25 11:41:42|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

我们将要使用以下插件:

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

第一步: 准备好数据库

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


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

创建DataGrid 没有javascript代码:

  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 plaincopy
  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对话框

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

  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 plaincopy
  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 plaincopy
  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 plaincopy
  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 plaincopy
  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 ,按下下面的连接启动示例应用:

下载EasyUI示例代码:

easyui_crud_demo.zip

  评论这张
 
阅读(156)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016