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的文章！