jEasyUI 创建 CRUD 应用学习笔记

1. 前言

jEasyUI 是一款基于 jQuery 的 UI 插件，提供了丰富的 UI 组件以及易于使用的 API，开发者可以快速构建出漂亮并且功能强大的 Web 应用程序。

在本学习笔记中，我们将学习如何使用 jEasyUI 来创建一个 CRUD 应用，其中：

• Create：创建新的记录
• Read：读取现有记录
• Update：更新现有记录
• Delete：删除现有记录

2. 准备工作

在开始之前，请确保你已经安装了 jQuery 和 jEasyUI。你可以通过在 HTML 中引入以下代码来加载这两个依赖：

htmlCopy Code
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jEasyUI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.10.0/dist/easyui.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.10.0/dist/jquery.easyui.min.js"></script>

3. 创建表格

我们首先需要创建一个 HTML 表格，用于显示我们的数据。这个表格中应该包含我们之前提到的四个操作（Create、Read、Update、Delete）。

htmlCopy Code
<table id="dg" title="用户管理" class="easyui-datagrid"
       url="get_users.php" method="get"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="id" width="50" sortable="true">ID</th>
        <th field="name" width="50">姓名</th>
        <th field="email" width="50">邮箱</th>
        <th field="phone" width="50">电话</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>

4. 编写 JavaScript 代码

接下来，我们需要用 JavaScript 编写前端代码。

4.1 定义表格和工具栏

javascriptCopy Code
var url;
var dg = $('#dg').datagrid({
    onClickRow: function (index, row) {
        $('#toolbar a:eq(1)').linkbutton('enable');
        $('#toolbar a:eq(2)').linkbutton('enable');
    },
    onDblClickRow: function (index, row) {
        editUser();
    }
});
var toolbar = $('#toolbar').toolbar({
    onClick: function (item) {
        if (item.id === 'new') {
            newUser();
        } else if (item.id === 'edit') {
            editUser();
        } else if (item.id === 'destroy') {
            destroyUser();
        }
    }
});

4.2 定义三个操作函数

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

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

function destroyUser() {
    var row = dg.datagrid('getSelected');
    if (row) {
        $.messager.confirm('确认', '您确定要删除该用户吗？', function (r) {
            if (r) {
                $.post('destroy_user.php', {id: row.id}, function (result) {
                    if (result.success) {
                        dg.datagrid('reload');
                    } else {
                        $.messager.alert('错误', result.msg, 'error');
                    }
                }, 'json');
            }
        });
    }
}

4.3 定义对话框和表单

javascriptCopy Code
var dlg = $('#dlg').dialog({
    closed: true, modal: true, width: 400, height: 300,
    buttons: [{
        text: '保存', iconCls: 'icon-save',
        handler: function () {
            $('#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.alert('错误', result.msg, 'error');
                    }
                }
            })
        }
    }, {
        text: '取消', iconCls: 'icon-cancel',
        handler: function () {
            dlg.dialog('close');
        }
    }]
});
var fm = $('#fm').form({
    novalidate: true
});

4.4 加载数据

javascriptCopy Code
dg.datagrid('load');

5. 创建服务器端代码

最后，我们需要创建服务器端代码来处理 CRUD 操作。这里以 PHP 为例。

5.1 新增记录

phpCopy Code
<?php

$conn = mysqli_connect("localhost", "root", "password", "database");

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];

$sql = "INSERT INTO users (name, email, phone) VALUES ('$name', '$email', '$phone')";

if (mysqli_query($conn, $sql)) {
    $result['success'] = true;
} else {
    $result['success'] = false;
    $result['msg'] = mysqli_error($conn);
}

echo json_encode($result);

mysqli_close($conn);

5.2 读取记录

phpCopy Code
<?php

$conn = mysqli_connect("localhost", "root", "password", "database");

$start = $_GET['page'];
$pageSize = $_GET['rows'];

$sql = "SELECT * FROM users LIMIT $start, $pageSize";
$result = mysqli_query($conn, $sql);

$rows = array();
while ($row = mysqli_fetch_array($result)) {
    $rows[] = $row;
}
$data['rows'] = $rows;

$sqlCount = "SELECT COUNT(*) FROM users";
$resultCount = mysqli_query($conn, $sqlCount);
$rowCount = mysqli_fetch_array($resultCount);
$data['total'] = $rowCount[0];

echo json_encode($data);

mysqli_close($conn);

5.3 更新记录

phpCopy Code
<?php

$conn = mysqli_connect("localhost", "root", "password", "database");

$id = $_GET['id'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];

$sql = "UPDATE users SET name='$name', email='$email', phone='$phone' WHERE id=$id";

if (mysqli_query($conn, $sql)) {
    $result['success'] = true;
} else {
    $result['success'] = false;
    $result['msg'] = mysqli_error($conn);
}

echo json_encode($result);

mysqli_close($conn);

5.4 删除记录

phpCopy Code
<?php

$conn = mysqli_connect("localhost", "root", "password", "database");

$id = $_POST['id'];

$sql = "DELETE FROM users WHERE id=$id";

if (mysqli_query($conn, $sql)) {
    $result['success'] = true;
} else {
    $result['success'] = false;
    $result['msg'] = mysqli_error($conn);
}

echo json_encode($result);

mysqli_close($conn);

6. 实例演示

现在，我们已经完成了 jEasyUI 创建 CRUD 应用的学习笔记，并且我们可以通过以下链接访问实例演示：

https://example.com/jEasyUI-CRUD-demo

注意，你需要将 example.com 替换为你自己的域名或 IP。