异常教程

jQuery EasyUI 拖放 – 创建学校课程表（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，用户交互体验的优化始终是开发者关注的核心问题之一。而“拖放（Drag and Drop）”作为提升界面友好性的重要技术，能够帮助用户直观地调整内容布局。本文将围绕 jQuery EasyUI 拖放 – 创建学校课程表 这一主题，通过一个具体案例，逐步讲解如何利用 jQuery EasyUI 框架实现课程表的动态调整功能。本文面向编程初学者和中级开发者，通过浅显易懂的比喻和分步骤的代码演示，帮助读者掌握拖放技术在实际项目中的应用。

一、技术背景与核心概念

1.1 jQuery EasyUI 简介

jQuery EasyUI 是一个基于 jQuery 的前端 UI 框架，它提供了丰富的组件和功能，如数据网格、树形菜单、对话框等，尤其擅长构建动态交互界面。其核心优势在于通过少量代码即可实现复杂功能，例如本案例中的“拖放”功能。

1.2 拖放技术原理

拖放技术的核心是通过 JavaScript 监听鼠标的“拖动”和“放置”事件，实现元素的动态移动。在 jQuery EasyUI 中，这一过程被封装为 draggable（可拖动）和 droppable（可放置）两个插件，简化了开发者的操作。

比喻说明：
可以将拖放功能想象为“物理世界的剪贴板”——用户像移动实体卡片一样，将课程卡片从一个时间格拖到另一个时间格，而背后的技术则负责记录这些变化，并实时更新数据。

二、项目准备与环境配置

2.1 开发环境搭建

  • 前端技术栈：HTML5、CSS3、jQuery、jQuery EasyUI
  • 开发工具：建议使用 VS Code 或 WebStorm，方便代码调试和语法高亮。

2.2 引入依赖库

在 HTML 文件的 <head> 标签中引入以下资源：

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">  
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">  
<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>

2.3 数据准备

假设课程数据以 JSON 格式存储，包含课程名称、教师、时间等字段：

{  
  "courses": [  
    { "id": "C1", "name": "数学分析", "teacher": "张教授", "time": "周一 8:00-10:00" },  
    { "id": "C2", "name": "程序设计基础", "teacher": "李老师", "time": "周二 10:00-12:00" }  
  ]  
}

三、基础功能实现：构建课程表框架

3.1 使用 EasyUI 的 DataGrid 组件

DataGrid 是 EasyUI 中用于展示表格数据的核心组件。我们首先通过 DataGrid 创建课程表的静态布局：

<table id="courseGrid" class="easyui-datagrid"  
        data-options="  
            rownumbers: true,  
            fitColumns: true,  
            singleSelect: true,  
            columns: [[  
                { field: 'time', title: '时间', width: 100 },  
                { field: 'course', title: '课程', width: 200 },  
                { field: 'teacher', title: '教师', width: 150 }  
            ]]  
        ">  
</table>

3.2 初始化数据

通过 JavaScript 将 JSON 数据填充到表格中：

$(function() {  
    $.getJSON("courses.json", function(data) {  
        $("#courseGrid").datagrid({  
            data: data.courses  
        });  
    });  
});

四、核心功能开发：实现拖放交互

4.1 配置可拖动的课程项

通过 draggable 插件为课程行添加拖动功能：

$("#courseGrid").datagrid({  
    onLoadSuccess: function() {  
        $(".datagrid-cell-c-course").draggable({  
            cursor: "move",  
            revert: "invalid"  
        });  
    }  
});

关键点说明：

  • .datagrid-cell-c-course 是 EasyUI 为课程列自动生成的 CSS 类，需通过开发者工具确认具体选择器。
  • revert: "invalid" 表示当拖动目标无效时，元素会返回原位置，避免用户误操作。

4.2 配置可放置的目标区域

使用 droppable 插件定义可放置的目标单元格：

$(".datagrid-cell").droppable({  
    accept: ".datagrid-cell-c-course",  
    onDrop: function(e, source) {  
        // 实现课程时间更新的逻辑  
    }  
});

4.3 实现数据更新

当课程被拖放到新的时间格时，需更新其时间字段并重新渲染表格：

onDrop: function(e, source) {  
    var targetCell = $(this);  
    var courseId = source.attr("data-id");  
    var newTime = targetCell.text();  

    // 更新数据源  
    var row = $("#courseGrid").datagrid("getRows").find(r => r.id === courseId);  
    row.time = newTime;  

    // 刷新表格  
    $("#courseGrid").datagrid("reloadData");  
}

五、功能扩展与优化

5.1 防止时间冲突

通过验证拖放目标是否已被占用，避免课程时间重叠：

function isTimeOccupied(targetTime) {  
    return $("#courseGrid").datagrid("getRows")  
        .some(row => row.time === targetTime);  
}  

// 在 onDrop 方法中添加判断  
if (isTimeOccupied(newTime)) {  
    alert("该时间段已被占用，请重新选择！");  
    return;  
}

5.2 可视化反馈

添加拖放过程中的动态效果，例如高亮目标单元格：

$(".datagrid-cell").droppable({  
    onDragEnter: function() { $(this).addClass("highlight"); },  
    onDragLeave: function() { $(this).removeClass("highlight"); }  
});

配合 CSS 样式：

.highlight {  
    background-color: #ffff99 !important;  
    border: 1px solid #ff9800;  
}

六、完整代码与调试技巧

6.1 完整 HTML 结构

<!DOCTYPE html>  
<html>  
<head>  
    <!-- 引入依赖库（见 2.2 节） -->  
    <style>  
        .highlight { background-color: #ffff99; border: 1px solid #ff9800; }  
    </style>  
</head>  
<body>  
    <table id="courseGrid"></table>  

    <script>  
        // 初始化数据与拖放功能（见 3.2、4.1-4.3 节）  
    </script>  
</body>  
</html>

6.2 调试建议

  • 浏览器控制台：检查 JavaScript 错误，例如未正确引入依赖库。
  • 开发者工具：通过元素检查功能确认 CSS 类名和事件绑定是否生效。

七、总结与进阶方向

通过本文的案例，读者可以掌握以下核心能力：

  1. 使用 jQuery EasyUI 的 DataGrid 组件快速搭建数据表格；
  2. 结合 draggable 和 droppable 实现动态拖放交互；
  3. 通过数据验证和可视化反馈提升用户体验。

进阶方向：

  • 将课程数据与后端 API 对接，实现持久化存储；
  • 添加课程类型（如必修/选修）的分类过滤功能；
  • 使用 EasyUI 的 Layout 组件设计完整的课程管理系统界面。

通过循序渐进的实践，开发者可以逐步掌握更复杂的交互功能设计，为构建高效、直观的 Web 应用打下坚实基础。

最新发布

查看更多文章