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