logo

EasyUI 课程表2012-06-27

本教程显示了如何使用jQuery easyui创建课程表。我们创建两个表:在左面的课程列表和右面的时间表。你可以拖课程到时间表的单元格中。课程是<div class='item'>元素,时间格是<td class='drop'>元素。
\
显示课程

<div class="left">
    <table>
        <tr>
            <td><div class="item">English</div></td>
        </tr>
        <tr>
            <td><div class="item">Science</div></td>
        </tr>
        <!-- other subjects -->
    </table>
</div>
显示时间表
<div class="right">
    <table>
        <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 -->
    </table>
</div>
拖动左面的课程

$('.left .item').draggable({
    revert:true,
    proxy:'clone'
});
放置课程到时间表中
$('.right td.drop').droppable({
    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
  • 课程表

扫描二维码分享话题