使用easyUI创建一个CRUD的应用

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

我们将要使用以下插件:

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

第一步: 准备好数据库

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

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

创建DataGrid 没有javascript代码:

<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="removeUser()">Remove User</a>  </div>  

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

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

get_users.php代码文件:

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

第三步: 创建 form对话框

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

<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">          <div class="fitem">              <label>First Name:</label>              <input name="firstname" class="easyui-validatebox" required="true">          </div>          <div class="fitem">              <label>Last Name:</label>              <input name="lastname" class="easyui-validatebox" required="true">          </div>          <div class="fitem">              <label>Phone:</label>              <input name="phone">          </div>          <div class="fitem">              <label>Email:</label>              <input name="email" 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>  

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

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

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

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

当编辑一个用户,我们打开一个对话框加载form数据从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.success){                  $('#dlg').dialog('close');      // close the dialog                  $('#dg').datagrid('reload');    // reload the user data              } else {                  $.messager.show({                      title: 'Error',                      msg: result.msg                  });              }          }      });  } 

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

第6步:删除一个用户

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

function removeUser(){      var row = $('#dg').datagrid('getSelected');      if (row){          $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){              if (r){                  $.post('remove_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.msg                          });                      }                  },'json');              }          });      }  }  

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

第7步: 运行代码

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

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

View Demo

下载EasyUI示例代码:

easyui_crud_demo.zip