Pelajari pemalam jQuery EasyUI EasyUI dengan mudah untuk mencipta CRUD applications_jquery

Pengumpulan data dan pengurusan data yang betul adalah keperluan biasa untuk aplikasi rangkaian. CRUD membolehkan kami menjana senarai halaman dan mengedit rekod pangkalan data. Tutorial ini akan menunjukkan kepada anda cara untuk melaksanakan CRUD DataGrid menggunakan rangka kerja jQuery EasyUI.
Kami akan menggunakan pemalam berikut:
datagrid: Paparkan data senarai kepada pengguna.
dialog: Buat atau edit satu mesej pengguna.
borang: digunakan untuk menyerahkan data borang.
mesej: Paparkan beberapa maklumat operasi.

1. Cipta aplikasi CRUD dengan EasyUI
Langkah 1: Sediakan pangkalan data

Kami akan menggunakan pangkalan data MySql untuk menyimpan maklumat pengguna. Cipta pangkalan data dan jadual 'pengguna'.

Langkah 2: Cipta DataGrid untuk memaparkan maklumat pengguna

Buat DataGrid tanpa kod 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>

Kami tidak perlu menulis sebarang kod javascript untuk memaparkan senarai kepada pengguna, seperti yang ditunjukkan di bawah:

DataGrid menggunakan atribut 'url' dan diberikan nilai 'get_users.php' untuk mendapatkan semula data daripada pelayan.
Kod untuk fail 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);

Langkah 3: Buat dialog borang

Kami menggunakan kotak dialog yang sama untuk membuat atau mengedit pengguna.

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

Kotak dialog ini telah dibuat tanpa sebarang kod javascript.

Langkah 4: Buat dan edit pengguna

Apabila membuat pengguna, buka kotak dialog dan kosongkan data borang.

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

Apabila mengedit pengguna, membuka dialog dan memuatkan data borang daripada baris yang dipilih dalam grid data.

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' menyimpan alamat URL yang dikembalikan oleh borang apabila menyimpan data pengguna.
Langkah 5: Simpan data pengguna

Kami menggunakan kod berikut untuk menyimpan data pengguna:

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

Sebelum menyerahkan borang, fungsi 'onSubmit' akan dipanggil, yang digunakan untuk mengesahkan nilai medan borang. Apabila nilai medan borang berjaya diserahkan, tutup kotak dialog dan muatkan semula datagrid.
Langkah 6: Padamkan Pengguna

Kami menggunakan kod berikut untuk mengalih keluar pengguna:

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

Sebelum mengalih keluar baris, kami akan memaparkan kotak dialog pengesahan untuk membenarkan pengguna memutuskan sama ada hendak mengalih keluar baris data tersebut. Apabila data berjaya dialih keluar, panggil kaedah 'muat semula' untuk memuat semula datagrid data.
Langkah 7: Jalankan kod

Buka MySQL dan jalankan kod dalam penyemak imbas.

2 EasyUI mencipta aplikasi CRUD yang mengembangkan borang pengeditan butiran baris

Apabila menukar paparan grid data kepada 'detailview', pengguna boleh mengembangkan baris untuk menunjukkan beberapa butiran baris di bawah baris. Ciri ini membolehkan anda menyediakan beberapa susun atur yang sesuai untuk mengedit borang dalam panel perincian. Dalam tutorial ini, kami menggunakan komponen datagrid untuk mengurangkan ruang yang diduduki oleh borang edit.

Langkah 1: Tentukan grid data (DataGrid) dalam teg 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>

Langkah 2: Gunakan paparan terperinci pada 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);
 }
});

为了为数据网格（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应用的七大步骤，分享给大家，希望对大家的学习有所帮助。