轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

前端技术 2023/09/05 JavaScript

数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表，并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。
我们将使用下面的插件：
datagrid：向用户展示列表数据。
dialog：创建或编辑一条单一的用户信息。
form：用于提交表单数据。
messager：显示一些操作信息。

一、EasyUI创建CRUD应用
步骤 1：准备数据库

我们将使用 MySql 数据库来存储用户信息。创建数据库和 \'users\' 表。

步骤 2：创建 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 使用 \'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);

步骤 3：创建表单对话框

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

<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 代码。

步骤 4：实现创建和编辑用户

当创建用户时，打开一个对话框并清空表单数据。

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 地址。
步骤 5：保存用户数据

我们使用下面的代码保存用户数据：

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 数据。
步骤 6：删除一个用户

我们使用下面的代码来移除一个用户：

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 数据。
步骤 7：运行代码

开启 MySQL，在浏览器运行代码。

二、EasyUI创建展开行明细编辑表单的CRUD 应用

当切换数据网格视图（datagrid view）到 \'detailview\'，用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板（panel）中的编辑表单（form）提供一些合适的布局（layout）。在本教程中，我们使用数据网格（datagrid）组件来减小编辑表单（form）所占据空间。

步骤 1：在 HTML 标签中定义数据网格（DataGrid）

<table id=\"dg\" title=\"My Users\" style=\"width:550px;height:250px\"
 url=\"get_users.php\"
 toolbar=\"#toolbar\"
 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=\"newItem()\">New</a>
 <a href=\"#\" class=\"easyui-linkbutton\" iconCls=\"icon-remove\" plain=\"true\" onclick=\"destroyItem()\">Destroy</a>
</div>

步骤 2：为数据网格（DataGrid）应用明细视图

$(\'#dg\').datagrid({
 view: detailview,
 detailFormatter:function(index,row){
 return \'<div class=\"ddv\"></div>\';
 },
 onExpandRow: function(index,row){
 var ddv = $(this).datagrid(\'getRowDetail\',index).find(\'div.ddv\');
 ddv.panel({
  border:false,
  cache:true,
  href:\'show_form.php?index=\'+index,
  onLoad:function(){
  $(\'#dg\').datagrid(\'fixDetailRowHeight\',index);
  $(\'#dg\').datagrid(\'selectRow\',index);
  $(\'#dg\').datagrid(\'getRowDetail\',index).find(\'form\').form(\'load\',row);
  }
 });
 $(\'#dg\').datagrid(\'fixDetailRowHeight\',index);
 }
});

为了为数据网格（DataGrid）应用明细视图，在 html 页面头部引入 \'datagrid-detailview.js\' 文件。
我们使用 \'detailFormatter\' 函数来生成行明细内容。 在这种情况下，我们返回一个用于放置编辑表单（form）的空的 <div>。 当用户点击行展开按钮（\'+\'）时，\'onExpandRow\' 事件将被触发，我们将通过 ajax 加载编辑表单（form）。 调用 \'getRowDetail\' 方法来得到行明细容器，所以我们能查找到行明细面板（panel）。 在行明细中创建面板（panel），加载从 \'show_form.php\' 返回的编辑表单（form）。
步骤 3：创建编辑表单（Form）

编辑表单（form）是从服务器加载的。
show_form.php

<form method=\"post\">
 <table class=\"dv-table\" style=\"width:100%;background:#fafafa;padding:5px;margin-top:5px;\">
 <tr>
  <td>First Name</td>
  <td><input name=\"firstname\" class=\"easyui-validatebox\" required=\"true\"></input></td>
  <td>Last Name</td>
  <td><input name=\"lastname\" class=\"easyui-validatebox\" required=\"true\"></input></td>
 </tr>
 <tr>
  <td>Phone</td>
  <td><input name=\"phone\"></input></td>
  <td>Email</td>
  <td><input name=\"email\" class=\"easyui-validatebox\" validType=\"email\"></input></td>
 </tr>
 </table>
 <div style=\"padding:5px 0;text-align:right;padding-right:30px\">
 <a href=\"#\" class=\"easyui-linkbutton\" iconCls=\"icon-save\" plain=\"true\" onclick=\"saveItem(<?php echo $_REQUEST[\'index\'];?>)\">Save</a>
 <a href=\"#\" class=\"easyui-linkbutton\" iconCls=\"icon-cancel\" plain=\"true\" onclick=\"cancelItem(<?php echo $_REQUEST[\'index\'];?>)\">Cancel</a>
 </div>
</form>

步骤 4：保存或取消编辑

调用 \'saveItem\' 函数来保存一个用户或者调用 \'cancelItem\' 函数来取消编辑。

function saveItem(index){
 var row = $(\'#dg\').datagrid(\'getRows\')[index];
 var url = row.isNewRecord ? \'save_user.php\' : \'update_user.php?id=\'+row.id;
 $(\'#dg\').datagrid(\'getRowDetail\',index).find(\'form\').form(\'submit\',{
 url: url,
 onSubmit: function(){
  return $(this).form(\'validate\');
 },
 success: function(data){
  data = eval(\'(\'+data+\')\');
  data.isNewRecord = false;
  $(\'#dg\').datagrid(\'collapseRow\',index);
  $(\'#dg\').datagrid(\'updateRow\',{
  index: index,
  row: data
  });
 }
 });
}

决定要回传哪一个 URL，然后查找表单（form）对象，并调用 \'submit\' 方法来提交表单（form）数据。当保存数据成功时，折叠并更新行数据。

function cancelItem(index){
 var row = $(\'#dg\').datagrid(\'getRows\')[index];
 if (row.isNewRecord){
 $(\'#dg\').datagrid(\'deleteRow\',index);
 } else {
 $(\'#dg\').datagrid(\'collapseRow\',index);
 }
}

当取消编辑动作时，如果该行是新行而且还没有保存，直接删除该行，否则折叠该行。

以上就是关于EasyUI创建CRUD应用的七大步骤，分享给大家，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/13893

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案