Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI zum Erstellen von CRUD-Anwendungen_jquery

Datenerfassung und ordnungsgemäße Datenverwaltung sind allgemeine Anforderungen für Netzwerkanwendungen. Mit CRUD können wir Seitenlisten erstellen und Datenbankeinträge bearbeiten. Dieses Tutorial zeigt Ihnen, wie Sie ein CRUD DataGrid mithilfe des jQuery EasyUI-Frameworks implementieren.
Wir werden das folgende Plugin verwenden:
Datagrid: Listendaten für den Benutzer anzeigen.
Dialog: Eine einzelne Benutzernachricht erstellen oder bearbeiten.
Formular: wird zum Übermitteln von Formulardaten verwendet.
Nachricht: Einige Betriebsinformationen anzeigen.

1. Erstellen Sie eine CRUD-Anwendung mit EasyUI
Schritt 1: Bereiten Sie die Datenbank vor

Wir werden die MySQL-Datenbank verwenden, um Benutzerinformationen zu speichern. Erstellen Sie die Datenbank und die Tabelle „Benutzer“.

Schritt 2: DataGrid erstellen, um Benutzerinformationen anzuzeigen

Erstellen Sie ein DataGrid ohne Javascript-Code.

<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>

Wir müssen keinen Javascript-Code schreiben, um dem Benutzer die Liste anzuzeigen, wie unten gezeigt:

DataGrid verwendet das Attribut „url“ und erhält den Wert „get_users.php“, um Daten vom Server abzurufen.
Code für die get_users.php-Datei

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

Schritt 3: Formulardialog erstellen

Wir verwenden dasselbe Dialogfeld zum Erstellen oder Bearbeiten von Benutzern.

<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>

Dieses Dialogfeld wurde ohne Javascript-Code erstellt.

Schritt 4: Benutzer erstellen und bearbeiten

Öffnen Sie beim Erstellen eines Benutzers ein Dialogfeld und löschen Sie die Formulardaten.

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

Öffnet beim Bearbeiten eines Benutzers ein Dialogfeld und lädt Formulardaten aus den ausgewählten Zeilen im Datenraster.

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' speichert die URL-Adresse, die das Formular beim Speichern von Benutzerdaten zurückgibt.
Schritt 5: Benutzerdaten speichern

Wir verwenden den folgenden Code, um Benutzerdaten zu speichern:

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
 }
 }
 });
}

Vor dem Absenden des Formulars wird die Funktion „onSubmit“ aufgerufen, die zur Überprüfung der Formularfeldwerte verwendet wird. Wenn der Formularfeldwert erfolgreich übermittelt wurde, schließen Sie das Dialogfeld und laden Sie die Datagrid-Daten neu.
Schritt 6: Einen Benutzer löschen

Wir verwenden den folgenden Code, um einen Benutzer zu entfernen:

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');
 }
 });
 }
}

Bevor wir eine Zeile entfernen, zeigen wir ein Bestätigungsdialogfeld an, damit der Benutzer entscheiden kann, ob die Datenzeile wirklich entfernt werden soll. Wenn die Daten erfolgreich entfernt wurden, rufen Sie die Methode „reload“ auf, um die Datagrid-Daten zu aktualisieren.
Schritt 7: Führen Sie den Code aus

Öffnen Sie MySQL und führen Sie den Code im Browser aus.

2. EasyUI erstellt eine CRUD-Anwendung, die das Bearbeitungsformular für Zeilendetails erweitert

Wenn der Benutzer die Datagrid-Ansicht auf „Detailansicht“ umstellt, kann er eine Zeile erweitern, um einige Zeilendetails unterhalb der Zeile anzuzeigen. Mit dieser Funktion können Sie ein geeignetes Layout für die Bearbeitung von Formularen im Detailbereich bereitstellen. In diesem Tutorial verwenden wir die Datagrid-Komponente, um den vom Bearbeitungsformular belegten Platz zu reduzieren.

Schritt 1: Definieren Sie das Datenraster (DataGrid) in HTML-Tags

<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>

Schritt 2: Detailansicht auf das DataGrid anwenden

$('#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&#63;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）的空的 dc6dce4a544fdca2df29d5ac0ea9906b。 当用户点击行展开按钮（'+'）时，'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(<&#63;php echo $_REQUEST['index'];&#63;>)">Save</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<&#63;php echo $_REQUEST['index'];&#63;>)">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应用的七大步骤，分享给大家，希望对大家的学习有所帮助。