jEasyUI 创建 CRUD 应用

最新推荐文章于 2025-11-23 18:41:31 发布

原创最新推荐文章于 2025-11-23 18:41:31 发布 · 160 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

jEasyUI 创建 CRUD 应用

jEasyUI 是一个基于 jQuery 的框架，用于帮助开发者快速构建交互式的网页应用程序。它提供了一系列的组件，如表格（datagrid）、窗口（window）、布局（layout）等，可以轻松实现 CRUD（创建、读取、更新、删除）操作。本文将指导您如何使用 jEasyUI 创建一个基本的 CRUD 应用。

1. 环境准备

在开始之前，请确保您的开发环境中已安装以下软件：

HTML 编辑器（如 Visual Studio Code、Sublime Text 等）
最新版本的 jQuery 库
jEasyUI 框架

您可以从 jEasyUI 的官方网站下载这些资源。

2. 创建项目结构

创建一个名为 jeasyui-crud 的文件夹，并在其中创建以下文件和文件夹：

index.html：主页文件
css/：存放样式文件的文件夹
js/：存放 JavaScript 文件的文件夹
images/：存放图片文件的文件夹

将下载的 jEasyUI 文件夹中的 easyui.css、easyui.js 和 icons.png 文件分别复制到 css/、js/ 和 images/ 文件夹中。

3. 创建 HTML 文件

在 index.html 文件中，创建一个基本的 HTML 结构，并引入 jEasyUI 相关的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jEasyUI CRUD 应用</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>jEasyUI CRUD 应用</h2>
    <div style="margin:20px 0;"></div>
    <!-- 数据网格 -->
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
            url="get_users.php"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field="id" width="50">ID</th>
                <th field="name" width="50">Name</th>
                <th field="email" width="50">Email</th>
            </tr>
        </thead>
    </table>
    <!-- 工具栏 -->
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
    </div>
    <!-- 用户对话框 -->
    <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" novalidate>
            <div class="fitem">
                <label>Name:</label>
                <input name="name" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="email" class="easyui-validatebox" validType="email">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" οnclick="saveUser()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    <script type="text/javascript">
        var url;
        function newUser(){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
            $('#