jQuery EasyUI使用教程之创建一个课程表

<jQuery EasyUI最新版下载>

本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表。我们将创建两个表:学校的科目在左边,时间表在右边,你可以拖动学校科目并将其放在时间表的单元格中。学校的科目是一个"div class='item'"元素,然而时间表单元格是一个"td class='drop'"元素。

查看演示

显示学校科目

< div class = "left" >
< table >
< tbody >< tr >
< td >< div class = "item" >English</ div ></ td >
</ tr >
< tr >
< td >< div class = "item" >Science</ div ></ td >
</ tr >
<!-- other subjects -->
</ tbody ></ table >
</ div >

显示时间表

< div class = "right" >
< table >
< tbody >< tr >
< td class = "blank" ></ td >
< td class = "title" >Monday</ td >
< td class = "title" >Tuesday</ td >
< td class = "title" >Wednesday</ td >
< td class = "title" >Thursday</ td >
< td class = "title" >Friday</ td >
</ tr >
< tr >
< td class = "time" >08:00</ td >
< td class = "drop" ></ td >
< td class = "drop" ></ td >
< td class = "drop" ></ td >
< td class = "drop" ></ td >
< td class = "drop" ></ td >
</ tr >
<!-- other cells -->
</ tbody ></ table >
</ div >

拖动左侧的学校科目

$( '.left .item' ).draggable({
revert: true ,
proxy: 'clone'
});

将学校的科目放在时间表的单元格中

$( '.right td.drop' ).droppable({
accept:  '.item' ,
onDragEnter: function (){
$( this ).addClass( 'over' );
},
onDragLeave: function (){
$( this ).removeClass( 'over' );
},
onDrop: function (e,source){
$( this ).removeClass( 'over' );
if ($(source).hasClass( 'assigned' )){
$( this ).append(source);
else {
var c = $(source).clone().addClass( 'assigned' );
$( this ).empty().append(c);
c.draggable({
revert: true
});
}
}
});

正如你所看到的代码一样,当用户在左侧拖动学校科目并将其放到时间表的单元格中时,onDrop回调函数将会被调用。我们将左侧拖动的源元素复制并把它附加到时间表单元格上,当把学校科目从时间表的某个单元格拖动到其他单元格时,只需简单地移动它即可。

下载该EasyUI示例:easyui-timetable-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的文章

你可能感兴趣的:(jQuery EasyUI使用教程之创建一个课程表)