jEasyUI 创建 CRUD 应用

最新推荐文章于 2025-12-17 23:32:33 发布

原创最新推荐文章于 2025-12-17 23:32:33 发布 · 546 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

jEasyUI 创建 CRUD 应用

引言

CRUD（Create, Read, Update, Delete）是数据库操作中常见的一组基本操作，即创建、读取、更新和删除数据。jEasyUI 是一款流行的 jQuery UI 组件库，它提供了丰富的界面组件和功能，可以帮助开发者快速构建丰富的 Web 应用。本文将介绍如何使用 jEasyUI 创建一个基本的 CRUD 应用。

环境准备

在开始之前，请确保您的开发环境已经安装了以下工具：

jQuery: jEasyUI 是基于 jQuery 的，因此需要先引入 jQuery 库。
jEasyUI: 下载并引入 jEasyUI 库。
数据库: 本文以 MySQL 为例，创建一个简单的数据库和表。

创建数据库和表

以下是一个简单的示例，用于创建一个名为 users 的数据库表，包含 id、name 和 email 三个字段。

CREATE DATABASE users;

USE users;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL
);

引入 jEasyUI 库

在您的 HTML 文件中引入 jQuery 和 jEasyUI 库：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI CRUD 应用</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- CRUD 应用代码 -->
</body>
</html>

创建 CRUD 应用

以下是使用 jEasyUI 创建 CRUD 应用的步骤：

1. 创建表单

创建一个表单，用于添加和编辑用户信息。

<div id="editForm" style="padding:10px;">
    <form id="userForm">
        <table>
            <tr>
                <td>ID:</td>
                <td>
                    <input id="id" class="easyui-numberbox" data-options="required:true">
                </td>
            </tr>
            <tr>
                <td>Name:</td>
                <td>
                    <input id="name" class="easyui-textbox" data-options="required:true">
                </td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input id="email" class="easyui-textbox" data-options="required:true, validType:'email'">
                </td>
            </tr>
        </table>
    </form>
</div>

2. 创建 CRUD 控件

创建一个表格，用于显示用户信息。

<div id="userGrid" style="padding:10px;">
    <table id="dg" title="User List" class="easyui-datagrid" style="width:100%;height:250px"
        url="data/users.datagrid" pagination="true" rownumbers="true">
        <thead>
            <tr>
                <th field="id" width="50">ID</th>
                <th field="name" width="100">Name</th>
                <th field="email" width="150">Email</th>
            </tr>
        </thead>
    </table>
</div>

3. 添加 CRUD 功能

为 CRUD 控件添加添加、编辑、删除和搜索功能。

$(function(){
    $('#dg').datagrid({
        toolbar: [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function(){
                $('#editForm').form('clear');
                $('#editForm').dialog('open');
            }
        }, {
            text: 'Edit',
            iconCls: 'icon-edit',
            handler: function(){
                var row = $('#dg').datagrid('getSelected');
                if (row){
                    $('#editForm').form('load', row);
                    $('#editForm').dialog('open');
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: 'Please select a row to edit.'
                    });
                }
            }
        }, {
            text: 'Delete',
            iconCls: 'icon-remove',
            handler: function(){
                var row = $('#dg').datagrid('getSelected');
                if (row){
                    $.messager.confirm('Confirm', 'Are you sure you want to delete this user?', function(r){
                        if (r){
                            $.ajax({
                                type: 'POST',
                                url: 'data/users.delete',
                                data: {id: row.id},
                                success: function(data){
                                    if (data.success){
                                        $('#dg').datagrid('reload');
                                    } else {
                                        $.messager.show({
                                            title: 'Error',
                                            msg: data.message
                                        });
                                    }
                                }
                            });
                        }
                    });
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: 'Please select a row to delete.'
                    });
                }
            }
        }, {
            text: 'Search',
            iconCls: 'icon-search',
            handler: function(){
                var name = $('#searchName').val();
                $('#dg').datagrid('load', {name: name});
            }
        }]
    });

    $('#editForm').dialog({
        title: 'Edit User',
        width: 300,
        closed: true,
        buttons: [{
            text: 'Save',
            iconCls: 'icon-ok',
            handler: function(){
                $('#userForm').form('submit', {
                    url: 'data/users.save',
                    onSubmit: function(){
                        return $(this).form('validate');
                    },
                    success: function(data){
                        var data = $.parseJSON(data);
                        if (data.success){
                            $('#editForm').dialog('close');
                            $('#dg').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: 'Error',
                                msg: data.message
                            });
                        }
                    }
                });
            }
        }, {
            text: 'Cancel',
            iconCls: 'icon-cancel',
            handler: function(){
                $('#editForm').dialog('close');
            }
        }]
    });
});

4. 数据处理

创建 data/users.datagrid、data/users.save 和 data/users.delete 文件，用于处理 CRUD 操作。

// data/users.datagrid
{
    "total": 2,
    "rows": [
        {"id": 1, "name": "John", "email": "john@example.com"},
        {"id": 2, "name": "Jane", "email": "jane@example.com"}
    ]
}

// data/users.save
{
    "success": true,
    "message": "User saved successfully."
}

// data/users.delete
{
    "success": true,
    "message": "User deleted successfully."
}