Приложение jQuery EasyUI -Создание CRUD-приложения
Сбор данных и правильное управление данными — распространённые потребности веб-приложений. CRUD позволяет нам генерировать списки страниц и редактировать записи базы данных. В этом руководстве будет показано, как использовать фреймворк jQuery EasyUI для реализации CRUD DataGrid.
Мы будем использовать следующие плагины:
- datagrid: отображение данных списка пользователям.
- dialog: создание или редактирование информации отдельного пользователя.
- form: используется для отправки данных формы.
- messager: отображение некоторых сообщений об операциях.
Шаг 1: Подготовка базы данных
Мы будем использовать базу данных MySQL для хранения информации о пользователях. Создайте базу данных и таблицу 'users'.
Шаг 2: Создание 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="../index.html" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a> <a href="../index.html" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="../index.html" 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="../index.html" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="../index.html" 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 и выполните код в браузере.
Скачать примеры jQuery EasyUI
jeasyui-app-crud1.zip
Другие расширения