在 jQuery EasyUI 中创建 CRUD（增删改查）应用通常涉及到使用 EasyUI 的各种组件来实现数据表格、表单、对话框等功能。以下是一个简单的例子，演示如何使用 EasyUI 创建一个包含 CRUD 功能的应用。

假设你有一个名为 students 的学生信息表，字段包括 id、name 和 age。

1. HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI CRUD Example</title>
  <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>

<h2>Students Information</h2>

<table id="datagrid"></table>

<div id="toolbar">
  <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addStudent()">Add</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="editStudent()">Edit</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteStudent()">Delete</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
  <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>Age:</label>
      <input name="age" class="easyui-validatebox" required="true" validType="number">
    </div>
  </form>
</div>

<div id="dlg-buttons">
  <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveStudent()">Save</a>
  <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="closeDialog()">Cancel</a>
</div>

<script>
  $(document).ready(function(){
    $('#datagrid').datagrid({
      url: 'get_students.php', // 替换为实际的后端接口
      toolbar: '#toolbar',
      singleSelect: true,
      columns:[[
        {field:'id',title:'ID',width:50},
        {field:'name',title:'Name',width:150},
        {field:'age',title:'Age',width:80}
      ]]
    });
  });

  function addStudent() {
    $('#dlg').dialog('open').dialog('setTitle','Add Student');
    $('#fm').form('clear');
  }

  function editStudent() {
    var selectedRow = $('#datagrid').datagrid('getSelected');
    if (selectedRow) {
      $('#dlg').dialog('open').dialog('setTitle','Edit Student');
      $('#fm').form('load', selectedRow);
    } else {
      $.messager.alert('Warning', 'Please select a student to edit.', 'warning');
    }
  }

  function saveStudent() {
    $('#fm').form('submit',{
      url: 'save_student.php', // 替换为实际的后端接口
      onSubmit: function(){
        return $(this).form('validate');
      },
      success: function(result){
        var resultJSON = JSON.parse(result);
        if (resultJSON.success) {
          $('#dlg').dialog('close');      // 关闭对话框
          $('#datagrid').datagrid('reload');  // 刷新数据表格
        } else {
          $.messager.show({    // 显示错误消息
            title: 'Error',
            msg: resultJSON.message,
            icon: 'error'
          });
        }
      }
    });
  }

  function deleteStudent() {
    var selectedRow = $('#datagrid').datagrid('getSelected');
    if (selectedRow) {
      $.messager.confirm('Confirm','Are you sure you want to delete this student?',function(r){
        if (r){
          // 发送删除请求到后端
          $.post('delete_student.php', {id: selectedRow.id}, function(result){
            var resultJSON = JSON.parse(result);
            if (resultJSON.success) {
              $('#datagrid').datagrid('reload');  // 刷新数据表格
            } else {
              $.messager.show({    // 显示错误消息
                title: 'Error',
                msg: resultJSON.message,
                icon: 'error'
              });
            }
          });
        }
      });
    } else {
      $.messager.alert('Warning', 'Please select a student to delete.', 'warning');
    }
  }

  function closeDialog() {
    $('#dlg').dialog('close');
  }
</script>

</body>
</html>

上述代码中涉及到的 PHP 文件（如 get_students.php、save_student.php 和 delete_student.php）应该根据你的实际后端架构进行编写。这些文件负责处理从前端发送的请求，包括获取学生信息、保存学生信息和删除学生信息等操作。请确保这些文件的路径和内容与你的项目相符。


转载请注明出处：http://www.zyzy.cn/article/detail/13085/jQuery EasyUI