以下是以资深软件开发工程师的视角，对“jQuery EasyUI 应用 – 创建 CRUD 应用”的专业回答。我将详细讲解如何使用 jQuery EasyUI 构建一个基本的 CRUD（创建、读取、更新、删除）应用，使用对话框（Dialog）和表单（Form）实现数据的增删改查操作，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 jQuery EasyUI v1.10.x（最新稳定版）为基准。

jQuery EasyUI 应用 – 创建 CRUD 应用

目录

  1. 引言
  2. CRUD 应用概述
  1. 实现 CRUD 应用
  1. 完整示例
  2. 最佳实践与注意事项
  3. 结论

1. 引言

jQuery EasyUI 是一个基于 jQuery 的 UI 框架，提供丰富的组件，适合快速构建交互式 Web 应用。本教程将指导您使用 jQuery EasyUI 的 datagrid、dialog 和 form 组件，创建一个基本的 CRUD 应用，用户可以通过对话框表单管理数据，并在表格中查看结果。

2. CRUD 应用概述

2.1 什么是 CRUD 应用？

  • 定义：CRUD 代表创建（Create）、读取（Read）、更新（Update）和删除（Delete），是一种常见的应用程序模式，用于管理数据记录。
  • 功能：
  • 显示数据列表。
  • 通过表单添加新记录。
  • 编辑或删除现有记录。

2.2 jQuery EasyUI 的适用性

  • 组件支持：datagrid 用于数据展示，dialog 和 form 用于编辑。
  • 易用性：内置验证和事件处理，简化开发。
  • 灵活性：支持前端操作，也易于与后端集成。

3. 实现 CRUD 应用

3.1 准备工作

  • 依赖：
  • jQuery（如 v3.6.0）。
  • jQuery EasyUI（如 v1.10.x）。
  • 引入文件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 HTML 结构

  • 工具栏：包含 CRUD 操作按钮。
  • 数据表格：显示数据列表。
  • 对话框：用于添加和编辑表单。
<div id="toolbar" style="padding:5px;">
  <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">添加</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">编辑</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteItem()">删除</a>
</div>
<table id="dg" class="easyui-datagrid" style="width:700px;height:400px"
       data-options="singleSelect:true,toolbar:'#toolbar',fitColumns:true">
  <thead>
    <tr>
      <th data-options="field:'id',width:50">ID</th>
      <th data-options="field:'name',width:100">名称</th>
      <th data-options="field:'email',width:150">邮箱</th>
      <th data-options="field:'age',width:50">年龄</th>
    </tr>
  </thead>
</table>

<div id="dlg" class="easyui-dialog" style="width:400px;padding:10px 20px;"
     data-options="closed:true,buttons:'#dlg-buttons',modal:true">
  <form id="fm" method="post">
    <div style="margin-bottom:10px;">
      <input class="easyui-textbox" name="name" style="width:100%;" data-options="label:'名称:',required:true">
    </div>
    <div style="margin-bottom:10px;">
      <input class="easyui-textbox" name="email" style="width:100%;" data-options="label:'邮箱:',required:true,validType:'email'">
    </div>
    <div style="margin-bottom:10px;">
      <input class="easyui-numberbox" name="age" style="width:100%;" data-options="label:'年龄:',required:true,min:0,max:150">
    </div>
  </form>
</div>
<div id="dlg-buttons">
  <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveItem()">保存</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">取消</a>
</div>

3.3 JavaScript 逻辑

  • 初始化数据表格：
$('#dg').datagrid({
  data: [
    { id: 1, name: '张三', email: 'zhangsan@example.com', age: 25 },
    { id: 2, name: '李四', email: 'lisi@example.com', age: 30 }
  ]
});
  • CRUD 操作函数：
var url;

function newItem() {
  $('#dlg').dialog('open').dialog('setTitle', '添加记录');
  $('#fm').form('clear');
  url = 'create'; // 模拟后端 URL
}

function editItem() {
  var row = $('#dg').datagrid('getSelected');
  if (row) {
    $('#dlg').dialog('open').dialog('setTitle', '编辑记录');
    $('#fm').form('load', row);
    url = 'update'; // 模拟后端 URL
  } else {
    $.messager.alert('提示', '请先选择一行！', 'info');
  }
}

function deleteItem() {
  var row = $('#dg').datagrid('getSelected');
  if (row) {
    $.messager.confirm('确认', '确定删除此记录吗？', function(r) {
      if (r) {
        var index = $('#dg').datagrid('getRowIndex', row);
        $('#dg').datagrid('deleteRow', index);
        $.messager.show({ title: '成功', msg: '记录已删除' });
      }
    });
  } else {
    $.messager.alert('提示', '请先选择一行！', 'info');
  }
}

function saveItem() {
  if ($('#fm').form('validate')) {
    var data = $('#fm').form('getData');
    if (url === 'create') {
      data.id = $('#dg').datagrid('getRows').length + 1; // 模拟自增 ID
      $('#dg').datagrid('appendRow', data);
    } else if (url === 'update') {
      var row = $('#dg').datagrid('getSelected');
      var index = $('#dg').datagrid('getRowIndex', row);
      $('#dg').datagrid('updateRow', { index: index, row: data });
    }
    $('#dlg').dialog('close');
    $.messager.show({ title: '成功', msg: '操作完成' });
  } else {
    $.messager.alert('提示', '请填写完整且有效的数据！', 'warning');
  }
}

3.4 样式调整

  • 默认样式已足够，可选美化：
#toolbar { background: #f8f9fa; }

4. 完整示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI CRUD 应用</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    #toolbar { background: #f8f9fa; padding: 5px; }
  </style>
</head>
<body>
  <div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">编辑</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteItem()">删除</a>
  </div>
  <table id="dg" class="easyui-datagrid" style="width:700px;height:400px"
         data-options="singleSelect:true,toolbar:'#toolbar',fitColumns:true">
    <thead>
      <tr>
        <th data-options="field:'id',width:50">ID</th>
        <th data-options="field:'name',width:100">名称</th>
        <th data-options="field:'email',width:150">邮箱</th>
        <th data-options="field:'age',width:50">年龄</th>
      </tr>
    </thead>
  </table>

  <div id="dlg" class="easyui-dialog" style="width:400px;padding:10px 20px;"
       data-options="closed:true,buttons:'#dlg-buttons',modal:true">
    <form id="fm" method="post">
      <div style="margin-bottom:10px;">
        <input class="easyui-textbox" name="name" style="width:100%;" data-options="label:'名称:',required:true">
      </div>
      <div style="margin-bottom:10px;">
        <input class="easyui-textbox" name="email" style="width:100%;" data-options="label:'邮箱:',required:true,validType:'email'">
      </div>
      <div style="margin-bottom:10px;">
        <input class="easyui-numberbox" name="age" style="width:100%;" data-options="label:'年龄:',required:true,min:0,max:150">
      </div>
    </form>
  </div>
  <div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveItem()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">取消</a>
  </div>

  <script>
    $('#dg').datagrid({
      data: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', age: 25 },
        { id: 2, name: '李四', email: 'lisi@example.com', age: 30 }
      ]
    });

    var url;

    function newItem() {
      $('#dlg').dialog('open').dialog('setTitle', '添加记录');
      $('#fm').form('clear');
      url = 'create';
    }

    function editItem() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        $('#dlg').dialog('open').dialog('setTitle', '编辑记录');
        $('#fm').form('load', row);
        url = 'update';
      } else {
        $.messager.alert('提示', '请先选择一行！', 'info');
      }
    }

    function deleteItem() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        $.messager.confirm('确认', '确定删除此记录吗？', function(r) {
          if (r) {
            var index = $('#dg').datagrid('getRowIndex', row);
            $('#dg').datagrid('deleteRow', index);
            $.messager.show({ title: '成功', msg: '记录已删除' });
          }
        });
      } else {
        $.messager.alert('提示', '请先选择一行！', 'info');
      }
    }

    function saveItem() {
      if ($('#fm').form('validate')) {
        var data = $('#fm').form('getData');
        if (url === 'create') {
          data.id = $('#dg').datagrid('getRows').length + 1;
          $('#dg').datagrid('appendRow', data);
        } else if (url === 'update') {
          var row = $('#dg').datagrid('getSelected');
          var index = $('#dg').datagrid('getRowIndex', row);
          $('#dg').datagrid('updateRow', { index: index, row: data });
        }
        $('#dlg').dialog('close');
        $.messager.show({ title: '成功', msg: '操作完成' });
      } else {
        $.messager.alert('提示', '请填写完整且有效的数据！', 'warning');
      }
    }
  </script>
</body>
</html>
  • 运行方法：保存为 crud-app.html，在浏览器中打开（需联网加载资源）。
  • 效果：
  • “添加”打开空白表单，保存后新增一行。
  • “编辑”加载选中行数据，保存后更新表格。
  • “删除”移除选中行，含确认提示。

5. 最佳实践与注意事项

  • 数据持久化：
  • 当前为前端实现，生产环境需通过 AJAX 调用后端 API（如 /create、/update）。
  • 表单验证：
  • 使用 validType 和自定义规则增强校验。
  • 用户体验：
  • 添加加载动画（如 $.messager.progress）提示保存操作。
  • 性能：
  • 大数据集时启用分页（pagination: true）或懒加载。
  • 安全性：
  • 后端验证用户输入，避免直接信任客户端数据。

6. 结论

通过 jQuery EasyUI 的 datagrid、dialog 和 form 组件，您可以快速构建一个功能完善的 CRUD 应用。本教程提供了实现步骤和代码，适合学习和原型开发。如需扩展功能（如内联编辑或后端集成），可参考 CRUD DataGrid 或 jQuery EasyUI 官方文档（jeasyui.com）！

回答特点

  • 结构：包含目录、带锚点的小标题、代码示例，逻辑清晰。
  • 实用性：从基础到实践，覆盖 CRUD 应用核心实现。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现 CRUD 应用。
  • 出站链接：嵌入正文，指向权威资源。