EasyUI 课程表

资料来源：网络整理时间：2023/2/14 0:02:54 共计：3626 浏览

本教程显示了如何使用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 菜单 | ·下一条：EasyUI 概述