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

jQuery EasyUI 应用 – 创建 CRUD 数据网格（DataGrid）

目录

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

1. 引言

jQuery EasyUI 是一个强大的 UI 框架，其 DataGrid 组件特别适合构建数据驱动的应用。本教程将指导您使用 jQuery EasyUI 的 DataGrid，创建一个支持 CRUD 操作的数据表格，用户可以直接在表格中添加、编辑和删除数据行。

2. CRUD DataGrid 概述

2.1 什么是 CRUD DataGrid？

  • 定义：CRUD DataGrid 是一个数据表格，支持创建（Create）、读取（Read）、更新（Update）和删除（Delete）操作，用户可以通过交互直接管理数据。
  • 功能：
  • 显示数据列表。
  • 内联编辑（双击行编辑）。
  • 添加新行、删除行和保存修改。

2.2 jQuery EasyUI 的适用性

  • 组件支持：DataGrid 内置编辑器（如 textbox、combobox）支持内联编辑。
  • 工具栏：通过 toolbar 属性集成 CRUD 按钮。
  • 事件驱动：提供丰富的回调函数，便于处理数据操作。

3. 实现 CRUD DataGrid

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="newRow()">添加</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRow()">编辑</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteRow()">删除</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveRow()">保存</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,editor:'textbox'">名称</th>
      <th data-options="field:'email',width:150,editor:{type:'textbox',options:{validType:'email'}}">邮箱</th>
      <th data-options="field:'age',width:50,editor:'numberbox'">年龄</th>
    </tr>
  </thead>
</table>

3.3 JavaScript 逻辑

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

function endEditing() {
  if (editIndex == undefined) return true;
  if ($('#dg').datagrid('validateRow', editIndex)) {
    $('#dg').datagrid('endEdit', editIndex);
    editIndex = undefined;
    return true;
  }
  return false;
}

function newRow() {
  if (endEditing()) {
    $('#dg').datagrid('appendRow', { id: '', name: '', email: '', age: '' });
    editIndex = $('#dg').datagrid('getRows').length - 1;
    $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
  }
}

function editRow(index) {
  if (editIndex != undefined) {
    if (!endEditing()) return;
  }
  var row = $('#dg').datagrid('getSelected');
  if (row) {
    editIndex = index != undefined ? index : $('#dg').datagrid('getRowIndex', row);
    $('#dg').datagrid('beginEdit', editIndex);
  } else {
    $.messager.alert('提示', '请先选择一行！', 'info');
  }
}

function deleteRow() {
  var row = $('#dg').datagrid('getSelected');
  if (row) {
    var index = $('#dg').datagrid('getRowIndex', row);
    $('#dg').datagrid('deleteRow', index);
    if (editIndex == index) editIndex = undefined;
  } else {
    $.messager.alert('提示', '请先选择一行！', 'info');
  }
}

function saveRow() {
  if (endEditing()) {
    $('#dg').datagrid('acceptChanges');
    $.messager.alert('成功', '数据已保存！', 'info');
  } 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 DataGrid</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="newRow()">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRow()">编辑</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteRow()">删除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveRow()">保存</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,editor:'textbox'">名称</th>
        <th data-options="field:'email',width:150,editor:{type:'textbox',options:{validType:'email'}}">邮箱</th>
        <th data-options="field:'age',width:50,editor:'numberbox'">年龄</th>
      </tr>
    </thead>
  </table>

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

    var editIndex = undefined;

    function endEditing() {
      if (editIndex == undefined) return true;
      if ($('#dg').datagrid('validateRow', editIndex)) {
        $('#dg').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
      }
      return false;
    }

    function newRow() {
      if (endEditing()) {
        $('#dg').datagrid('appendRow', { id: '', name: '', email: '', age: '' });
        editIndex = $('#dg').datagrid('getRows').length - 1;
        $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
      }
    }

    function editRow(index) {
      if (editIndex != undefined) {
        if (!endEditing()) return;
      }
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        editIndex = index != undefined ? index : $('#dg').datagrid('getRowIndex', row);
        $('#dg').datagrid('beginEdit', editIndex);
      } else {
        $.messager.alert('提示', '请先选择一行！', 'info');
      }
    }

    function deleteRow() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        var index = $('#dg').datagrid('getRowIndex', row);
        $('#dg').datagrid('deleteRow', index);
        if (editIndex == index) editIndex = undefined;
      } else {
        $.messager.alert('提示', '请先选择一行！', 'info');
      }
    }

    function saveRow() {
      if (endEditing()) {
        $('#dg').datagrid('acceptChanges');
        $.messager.alert('成功', '数据已保存！', 'info');
      } else {
        $.messager.alert('提示', '请填写完整且有效的数据！', 'warning');
      }
    }
  </script>
</body>
</html>
  • 运行方法：保存为 crud-datagrid.html，在浏览器中打开（需联网加载资源）。
  • 效果：
  • 双击行或点击“编辑”进入内联编辑模式。
  • “添加”插入新行并可编辑。
  • “删除”移除选中行。
  • “保存”验证并保存修改。

5. 最佳实践与注意事项

  • 数据持久化：
  • 当前为前端实现，生产环境需结合后端 API（如 AJAX 请求 /save）。
  • 表单验证：
  • 使用 validType 增强字段校验（如邮箱、数字范围）。
  • 用户体验：
  • 添加“取消”按钮（cancelEdit）或撤销功能。
  • 性能：
  • 大数据集时启用分页（pagination: true）。
  • 安全性：
  • 避免直接操作客户端数据，依赖后端验证。

6. 结论

通过 jQuery EasyUI 的 DataGrid，您可以轻松实现一个支持内联编辑的 CRUD 应用。本教程提供了完整实现步骤和代码，适合学习和原型开发。如需扩展功能（如后端集成或复杂编辑器），可参考 jQuery EasyUI 官方文档（jeasyui.com）或进一步提问，例如 展开行明细编辑！

回答特点

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