jQuery EasyUI 应用 - 创建 CRUD 应用

简介

jQuery EasyUI 是基于 jQuery 的 UI 库，支持常见的 UI 组件以及简单的数据处理。其中，CRUD（增删改查）操作是每个Web应用程序的基础，本文将介绍如何通过 jQuery EasyUI 来创建一个简单的 CRUD 应用。

准备工作

在开始创建 CRUD 应用之前，我们需要确保已经包含了 jQuery 和 jQuery EasyUI 的库文件。可以通过以下链接获取：

在 HTML 页面中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CRUD Application</title>
  <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="themes/icon.css">
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
  <!-- YOUR CODE HERE -->
</body>
</html>

创建表格

首先，我们需要创建一个表格来显示数据。可以使用以下代码创建一个简单的表格：

<table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:250px"
       url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true">
    <thead>
        <tr>
            <th field="id" width="50">ID</th>
            <th field="name" width="50">Name</th>
            <th field="email" width="50">Email</th>
            <th field="phone" width="50">Phone</th>
            <th field="address" width="50">Address</th>
        </tr>
    </thead>
</table>

其中，id、name、email、phone、address 为表格中的列名，width 表示列宽。

在表格中，我们设置了以下属性：

title：表格标题
class：表格样式
url：获取数据的地址
toolbar：工具栏
pagination：分页
rownumbers：行号
fitColumns：自适应列宽

添加工具栏和操作按钮

我们需要在表格上方添加一个工具栏，以方便用户进行 CRUD 操作。可以使用以下代码添加工具栏：

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除用户</a>
</div>

iconCls：图标样式
plain：是否使用平面样式

其中，通过 onclick 函数来触发相关操作。

定义 CRUD 操作

接下来，我们需要定义 CRUD 操作的相关函数。

新增用户

function newUser() {
    $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增用户');
    $('#fm').form('clear');
    url = 'save_user.php';
}

这个函数会弹出一个模态对话框，用户可以在对话框中输入新增用户的信息。可以使用以下代码来定义对话框：

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">用户信息</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>姓名:</label>
            <input name="name" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>邮箱:</label>
            <input name="email" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>电话:</label>
            <input name="phone" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>地址:</label>
            <input name="address" class="easyui-textbox" required="true">
        </div>
    </form>
</div>

编辑用户

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

这个函数会弹出一个模态对话框，用户可以在对话框中修改用户的信息。并将用户的 ID 作为参数传递到 update_user.php 页面。可以使用以下代码来定义对话框：

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">Edit User</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>Name:</label>
            <input name="name" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Phone:</label>
            <input name="phone" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>Address:</label>
            <input name="address" class="easyui-textbox" required="true">
        </div>
    </form>
</div>

删除用户

function destroyUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row) {
        $.messager.confirm('Confirm', 'Are you sure you want to delete this user?', function (r) {
            if (r) {
                $.post('destroy_user.php', {id: row.id}, function (result) {
                    if (result.success) {
                        $('#dg').datagrid('reload');
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }, 'json');
            }
        });
    }
}

保存用户

function saveUser() {
    $('#fm').form('submit', {
        url: url,
        onSubmit: function () {
            return $(this).form('validate');
        },
        success: function (result) {
            var result = eval('(' + result + ')');
            if (result.success) {
                $('#dlg').dialog('close');
                $('#dg').datagrid('reload');
            } else {
                $.messager.show({
                    title: 'Error',
                    msg: result.msg
                });
            }
        }
    });
}

这个函数会将用户输入的信息作为参数，发送到 save_user.php 页面，并在保存成功后刷新表格。

完整代码

以上就是创建 CRUD 应用的全部步骤。以下是完整的代码供参考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CRUD Application</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="用户列表" class="easyui-datagrid" style="width:700px;height:250px"
       url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true">
    <thead>
    <tr>
        <th field="id" width="50">ID</th>
        <th field="name" width="50">Name</th>
        <th field="email" width="50">Email</th>
        <th field="phone" width="50">Phone</th>
        <th field="address" width="50">Address</th>
    </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除用户</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">用户信息</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>姓名:</label>
            <input name="name" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>邮箱:</label>
            <input name="email" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>电话:</label>
            <input name="phone" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>地址:</label>
            <input name="address" class="easyui-textbox" required="true">
        </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>

<script type="text/javascript">
    var url;

    function newUser() {
        $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增用户');
        $('#fm').form('clear');
        url = 'save_user.php';
    }

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

    function destroyUser() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('Confirm', 'Are you sure you want to delete this user?', function (r) {
                if (r) {
                    $.post('destroy_user.php', {id: row.id}, function (result) {
                        if (result.success) {
                            $('#dg').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: 'Error',
                                msg: result.msg
                            });
                        }
                    }, 'json');
                }
            });
        }
    }

    function saveUser() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success) {
                    $('#dlg').dialog('close');
                    $('#dg').datagrid('reload');
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: result.msg
                    });
                }
            }
        });
    }
</script>
</body>
</html>

总结

通过简单的几步，我们就可以使用 jQuery EasyUI 来创建一个简单的 CRUD 应用。借助 EasyUI 提供的丰富组件和 API，我们可以创建更加强大的应用程序。对于具有复杂数据关系的应用，我们可以使用 EasyUI 的树形表格、表单验证等组件，方便实现功能丰富又美观的应用程序。

jQuery EasyUI 布局 - 添加自动播放标签页（Tabs） jQuery EasyUI 应用 - 创建 CRUD 数据网格（DataGrid）