Apprenez facilement le plug-in jQuery EasyUI EasyUI pour créer des applications CRUD

La collecte et la gestion appropriée des données sont des nécessités courantes pour les applications réseau. CRUD nous permet de générer des listes de pages et de modifier les enregistrements de la base de données. Ce tutoriel va vous montrer comment implémenter un CRUD DataGrid à l'aide du framework jQuery EasyUI.
Nous utiliserons le plugin suivant :
datagrid : Afficher les données de la liste à l'utilisateur.
boîte de dialogue : Créer ou modifier un message mono-utilisateur.
formulaire : est utilisé pour soumettre les données du formulaire.
messager : Afficher des informations sur l'opération.

1. Créez une application CRUD avec EasyUI
Étape 1 : Préparer la base de données

Nous utiliserons la base de données MySql pour stocker les informations utilisateur. Créez la base de données et la table « utilisateurs ».

Étape 2 : Créer un DataGrid pour afficher les informations utilisateur

Créez un DataGrid sans code 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="destroyUser()">Remove User</a>
</div>

Copier après la connexion

Nous n'avons pas besoin d'écrire de code javascript pour afficher la liste à l'utilisateur, comme indiqué ci-dessous :

DataGrid utilise l'attribut 'url' et se voit attribuer la valeur 'get_users.php' pour récupérer les données du serveur.
Code pour le fichier 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);

Copier après la connexion

Étape 3 : Créer une boîte de dialogue de formulaire

Nous utilisons la même boîte de dialogue pour créer ou modifier des utilisateurs.

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

Copier après la connexion

Cette boîte de dialogue a été créée sans aucun code javascript.

Étape 4 : Créer et modifier des utilisateurs

Lors de la création d'un utilisateur, ouvrez une boîte de dialogue et effacez les données du formulaire.

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

Copier après la connexion

Lors de la modification d'un utilisateur, ouvre une boîte de dialogue et charge les données du formulaire à partir des lignes sélectionnées dans la grille de données.

var row = $('#dg').datagrid('getSelected');
if (row){
 $('#dlg').dialog('open').dialog('setTitle','Edit User');
 $('#fm').form('load',row);
 url = 'update_user.php&#63;id='+row.id;
}

Copier après la connexion

'url' stocke l'adresse URL renvoyée par le formulaire lors de l'enregistrement des données utilisateur.
Étape 5 : Enregistrer les données utilisateur

Nous utilisons le code suivant pour enregistrer les données utilisateur :

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

Copier après la connexion

Avant de soumettre le formulaire, la fonction « onSubmit » sera appelée, qui est utilisée pour vérifier les valeurs des champs du formulaire. Lorsque la valeur du champ de formulaire est soumise avec succès, fermez la boîte de dialogue et rechargez les données de la grille de données.
Étape 6 : Supprimer un utilisateur

Nous utilisons le code suivant pour supprimer un utilisateur :

function destroyUser(){
 var row = $('#dg').datagrid('getSelected');
 if (row){
 $.messager.confirm('Confirm','Are you sure you want to destroy this user&#63;',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');
 }
 });
 }
}

Copier après la connexion

Avant de supprimer une ligne, nous afficherons une boîte de dialogue de confirmation pour permettre à l'utilisateur de décider s'il doit réellement supprimer la ligne de données. Lorsque les données sont supprimées avec succès, appelez la méthode « reload » pour actualiser les données de la grille de données.
Étape 7 : Exécutez le code

Ouvrez MySQL et exécutez le code dans le navigateur.

2. EasyUI crée une application CRUD qui étend le formulaire d'édition des détails des lignes

Lorsque vous passez de la vue de la grille de données à « vue détaillée », l'utilisateur peut développer une ligne pour afficher certains détails de la ligne sous la ligne. Cette fonctionnalité vous permet de fournir une mise en page appropriée pour modifier les formulaires dans le panneau de détail. Dans ce tutoriel, nous utilisons le composant datagrid pour réduire l'espace occupé par le formulaire d'édition.

Étape 1 : Définir la grille de données (DataGrid) dans les balises HTML

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

Copier après la connexion

Étape 2 : Appliquer la vue détaillée au 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&#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);
 }
});

Copier après la connexion

为了为数据网格（DataGrid）应用明细视图，在 html 页面头部引入 'datagrid-detailview.js' 文件。
我们使用 'detailFormatter' 函数来生成行明细内容。在这种情况下，我们返回一个用于放置编辑表单（form）的空的

。当用户点击行展开按钮（'+'）时，'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>

Copier après la connexion

步骤 4：保存或取消编辑

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

function saveItem(index){
 var row = $('#dg').datagrid('getRows')[index];
 var url = row.isNewRecord &#63; 'save_user.php' : 'update_user.php&#63;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
  });
 }
 });
}

Copier après la connexion

决定要回传哪一个 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);
 }
}

Copier après la connexion

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

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