使用easyUI创建一个课程表

@author YHC

这个教程将向你展示使用jQuery EasyUI如何创建一个课程表,我们将创建两个table:学校科目在左边时间表在右边,你可以拖动学校科目和放置到时间表表格中

学校科目是一个<div class="item">元素然而时间表表格是一个<td class="drop">元素.

查看Demo

显示 学校科目

<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 示例代码:

easyui-timetable-demo.zip