jQuery EasyUI 拖放 - 创建学校课程表
jQuery EasyUI拖放 - 创建学校课程表
简介
jQuery EasyUI是一种基于jQuery的UI组件库，提供了一些易于使用的组件，如datagrid，tree，panel等等。它还提供了一些拖放的功能，方便用户进行UI设计。
在该文档中，我们将使用jQuery EasyUI中的拖放功能，创建一个学校课程表的界面，以便于老师对于学生的课程进行安排和调整。
准备工作
在使用jQuery EasyUI的拖放功能前，需要引入以下js和css文件：
<!--引入jquery-->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--引入EasyUI css-->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/themes/icon.css">
<!--引入EasyUI js-->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.5/jquery.easyui.min.js"></script>
创建课程表
现在我们开始创建学校课程表的界面。在html中创建以下代码：
<table class="timetable">
<thead>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-9:45</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00-11:45</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>14:00-15:45</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
这里我们使用了table标签来创建一个基本的表格。其中，thead标签用于表头，tbody标签用于表身，td和th标签用于表格单元。
我们使用了一个类名为timetable来描述该课程表。
添加课程
现在我们要实现的功能是，可以将课程从左边的列表中拖动到课程表中，并在指定的时间段内显示出来。
首先，我们需要准备一个左边的课程列表。在html中添加以下代码：
<div class="course-list">
<div class="course-item" data-name="语文" data-hour="2">语文（2学时）</div>
<div class="course-item" data-name="数学" data-hour="3">数学（3学时）</div>
<div class="course-item" data-name="英语" data-hour="2">英语（2学时）</div>
<div class="course-item" data-name="物理" data-hour="2">物理（2学时）</div>
<div class="course-item" data-name="化学" data-hour="2">化学（2学时）</div>
</div>
在该代码中，我们准备了一些课程，并使用了一个类名为course-item来描述每一个课程。在data-name和data-hour属性中，我们分别存储了课程名称和学时数。
现在，我们要在拖动时获取到课程的信息。为此，我们需要使用jQuery EasyUI中的drag和drop方法。
在JavaScript中添加以下代码：
$('.course-item').draggable({
revert: true,
proxy: 'clone',
onStartDrag: function() {
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', 10);
},
onStopDrag: function() {
$(this).draggable('options').cursor = 'move';
}
});
$('.timetable td').droppable({
onDragEnter: function(e, source) {
$(source).draggable('options').cursor = 'auto';
var name = $(source).attr('data-name');
var hour = $(source).attr('data-hour');
var td = $(this);
var index = $(this).index();
var tr = $(this).closest('tr');
tr.children().eq(0).css('background-color', '#BFBFBF');
for (var i = 1; i <= hour; i++) {
var target = tr.next().children().eq(index);
if (target.hasClass('occupied')) {
td.css('background-color', '#FFCCCC');
return;
}
target.css('background-color', i == hour ? '#BFBFBF' : '#F3F3F3');
}
td.data('name', name);
td.data('hour', hour);
},
onDragLeave: function(e, source) {
$(source).draggable('options').cursor = 'not-allowed';
var tr = $(this).closest('tr');
tr.children().eq(0).css('background-color', '');
tr.nextAll().children().css('background-color', '');
},
onDrop: function(e, source) {
var name = $(source).attr('data-name');
var hour = $(source).attr('data-hour');
var td = $(this);
var index = $(this).index();
var tr = $(this).closest('tr');
td.addClass('occupied').text(name).data('hour', hour);
for (var i = 1; i <= hour; i++) {
var target = tr.next().children().eq(index);
target.addClass('occupied').data('name', name);
}
$(source).remove();
}
});
在该代码中，我们使用了draggable和droppable方法。draggable方法用于将左侧的课程列表绑定拖动事件，而droppable方法用于将课程表的每个时间段绑定接受拖动事件。
在拖动时，我们将课程的名称和学时信息存储在了当前td元素中，并给它和它下面的元素都添加了一个类名为occupied。这是为了避免在接受另一个课程时发生冲突。
在接受拖动时，我们对周围的元素进行了颜色设置，并将拖动的课程信息存储在了对应的元素中。
保存课程
现在我们已经可以在课程表中拖动课程了。但同时，我们也需要将保存编排好的课程数据。
为此，我们将课程表的课程数据放到一个数组中，并通过AJAX等方式将其传到后台进行保存。
在JavaScript中添加以下代码：
$('#save-btn').click(function() {
var data = [];
var $tds = $('.timetable td.occupied');
$tds.each(function() {
data.push({
dayOfWeek: $(this).index(),
startTime: $(this).closest('tr').index(),
name: $(this).data('name'),
hour: $(this).data('hour')
});
});
console.log(JSON.stringify(data));
// 在这里通过AJAX等方式将数据传到后台进行保存
});
在该代码中，我们将课程表中所有状态为occupied的td元素遍历，并将它们的行列信息和课程名称、学时信息进行保存。然后，将数据存储在data数组内，并将它们转换成JSON字符串。你可以通过AJAX等方式将JSON字符串传到后台进行保存。
总结
本文中，我们使用了jQuery EasyUI中的拖放功能，实现了学校课程表的界面设计。我们了解了如何将左侧的课程列表绑定拖放事件，以及如何将课程表的每个时间段绑定接受拖放事件。同时还讲述了如何将编排好的课程数据进行保存的过程。
当然，上述代码只是最基础的实现方式，你可以根据自己的需求进行更改和优化。但总体来说，本文中的代码已经能够实现课程表的基本功能了。