easyui课程表案例

最新推荐文章于 2019-08-15 16:28:00 发布
最新推荐文章于 2019-08-15 16:28:00 发布
阅读量555 收藏
点赞数
分类专栏： 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36324341/article/details/78603324
版权

easyui课程表案例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui帮助你容易地构建你的网页">
<title>博野一中课程表</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
        .left{
            width:120px;
            float:left;
        }
        .left table{
            background:#E0ECFF;
        }
        .left td{
            background:#eee;
        }
        .right{
            float:right;
            width:800px;
        }
        .right table{
            background:#E0ECFF;
            width:100%;
        }
        .right td{
            background:#fafafa;
            text-align:center;
            padding:2px;
        }
        .right td{
            background:#E0ECFF;
        }
        .right td.drop{
            background:#fafafa;
            width:100px;
        }
        .right td.over{
            background:#FBEC88;
        }
        .item{
            text-align:center;
            border:1px solid #499B33;
            background:#fafafa;
            width:100px;
        }
        .assigned{
            border:1px solid #BC2A4D;
        }

    </style>
    <script>
        $(function(){
            $('.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
                        });
                    }
                }
            });
        });
    </script>
</head>
<body>
    <h1 align="center">博野一中课程表</h1>
    <div style="width: 100%" align="center"><div style="width: 950px" align="center">
        <div class="left">
            <table>
                <tr>
                    <td><div class="item">英语(English)</div></td>
                </tr>
                <tr>
                    <td><div class="item">科学</div></td>
                </tr>
                <tr>
                    <td><div class="item">音乐</div></td>
                </tr>
                <tr>
                    <td><div class="item">历史</div></td>
                </tr>
                <tr>
                    <td><div class="item">计算机</div></td>
                </tr>
                <tr>
                    <td><div class="item">数学</div></td>
                </tr>
                <tr>
                    <td><div class="item">美术</div></td>
                </tr>
                <tr>
                    <td><div class="item">心理健康教育</div></td>
                </tr>
            </table>
        </div>
        <div class="right">
            <table>
                <tr>
                    <td class="blank"></td>
                    <td class="title">星期一</td>
                    <td class="title">星期二</td>
                    <td class="title">星期三</td>
                    <td class="title">星期四</td>
                    <td class="title">星期五</td>
                    <td class="title">星期六</td>
                    <td class="title">星期日</td>
                </tr>
                <tr>
                    <td class="">08:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">09:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">10:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">11:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">12:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">13:00</td>
                    <td class="lunch" colspan="7">午餐+午休</td>
                </tr>
                <tr>
                    <td class="">14:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">15:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">16:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">17:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">18:00</td>
                    <td class="lunch" colspan="7">晚饭+休息</td>
                </tr>
                <tr>
                    <td class="">19:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">20:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">21:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="">22:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
            </table>
        </div>
    </div>
    </div>
</body>
</html>
阿立聊代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于ssm+easyui的管理系统
04-07
本系统采用spring+springmvc+mybatis+easyui搭建的管理系统，功能不多，只实现了登陆注销、用户管理、上传下载文件几个功能。
08EasyUI 拖放- 创建学校课程表
阿甘兄
04-17 497
我们将创建两个表格：在左侧显示学校科目，在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个<div class="item"> 元素，时间表单元格是一个 元素,如下图： 显示学校科目 <div class="left"> <table> <tr> ...
使用easyUI创建一个课程表
YHC
08-08 2758
@author YHC 这个教程将向你展示使用jQuery EasyUI如何创建一个课程表,我们将创建两个table:学校科目在左边时间表在右边,你可以拖动学校科目和放置到时间表表格中 学校科目是一个<div class="item">元素然而时间表表格是一个元素. 查看Demo 显示 学校科目 E
easyUI的课程表练习
qq_35437583的博客
07-31 565
初入公司，经过简单培训，现要求我们自己动手实现课程表的查询，以easyUI+springMVC+hibernate，为框架基础。笔者数据库使用的是oracle。![实现结果如下](http://img.blog.csdn.net/20170731164840502?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU0Mzc1ODM=/font/5
jqueryeasyUI(5 创建课程表)
Hero_孙的博客
08-17 1106
课程表代码 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/
李炎辉easyui课件以及实例
08-15
1. **EasyUI 框架基础**：了解 EasyUI 的基本结构，包括其核心库 jQuery 和 CSS 样式表，以及如何在项目中引入这些资源。 2. **组件使用**：通过课件，学习者将接触到各种 EasyUI 组件，如 Dialog（对话框）、Menu...
easyui+springMVC+hibernate练习
07-31
本项目名为“easyui+springMVC+hibernate练习”，旨在通过整合这三大技术，实现一个实用的课程表功能。下面将详细阐述这三个技术及其在项目中的作用。 1. EasyUI： EasyUI是一款基于jQuery的前端框架，它提供了丰富...
jQuery_EasyUI教程.doc
06-04
为了创建课程表，教程可能会讲解如何使用 easyui 的 panel、datagrid 或者 schedule 组件来展示课程信息。显示课程部分会涉及如何加载和格式化课程数据，而显示时间表则会介绍如何组织和布局时间单元格。此外，拖动...
基于Springmvc+MyBatis+Spring+EasyUI+Mysql的项目申报及评审系统.zip
最新发布
04-04
在研究过程中，学生可能需要采用各种研究方法，如实验、调查、案例分析等，以获取必要的数据和信息。通过这些活动，学生能够培养扎实的专业技能，提升解决实际问题的实际能力。 第三，毕业设计的撰写是整个过程的...
SSM+easyUI框架实现的对学生的增删改查
04-22
后端采用SSM框架，前端采用EasyUI框架，功能完善，包含数据库文件，导入即可使用 MySQL56+Tomcat8+Myeclipse2017+Spring4.1，良心之作，所以收两分，如有不明白可以加QQ 1032089468进行咨询
大学课表管理系统
12-09
教学秘书输入教师代课信息和班级上课信息，并进行自动排课 教师可以预先在网上提交对上课时间、地点的特殊要求，排课后可 以查看自己所带课程信息排课后学生可以看自己所上课程信息
学生成绩管理系统（Spring MVC+Hibernate+Spring+easyui）（源码+毕设）
12-13
本毕业设计采用Java作为开发语言，使用了著名的开源框架Spring MVC、Hibernate、Spring、easyui进行开发，而后台的数据库采用MySQL。
雷林鹏分享：jQuery EasyUI 拖放 - 创建学校课程表
weixin_30843605的博客
08-15 226
　　本教程将向您展示如何使用 jQuery EasyUI 创建一个学校课程表。 我们将创建两个表格：在左侧显示学校科目，在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个 元素，时间表单元格是一个 元素。 　　显示学校科目 　　 　　 　　 　　 　　 　　 　　 　　 　　 ...
课表
ruan_wei_dong的博客
10-29 246
每周上午下午晚上星期一高等配位化学1 班化学楼化学报告厅105室第2,3,4节1-16周(每周) 高等仪器分析I1 班化学楼化学报告厅第9,10,11节1-16周(每周)星期二  固体表面化学1 班群贤二105室第9,10节1-16周(每周)星期三光谱分析1 班化学楼6楼会议室第1,2,3节1-16周(每周) 高等仪器分析II1 班化学楼化学报告厅第9,10,11节1-16周(每周)星期四自然辩证
easyui增删改查
尽力漂亮的博客
07-28 715
文章目录1. 前言1.1EasyUI是什么？1.2jQuery EasyUI有以下特点：2.案例：3. 布局1.2 layout 1. 前言 Easyui是非常老的前端框架，由于几乎能够满足开发过程中的所有需求，所以至今依然有公司在使用它，这里就用一篇博客来带大家入个门； 1.1EasyUI是什么？ jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
EasyUI(8) 页面实现增删改查和后台结合的小案例
郑清
12-05 3347
效果：增删改查，鼠标移动到缩略图上进行放大显示，修改数据时的数据回显，通过后台返回的json数据正确显示页面，图片文件上传，增删改的快捷键操作，颜色选择器，右击菜单等等 下面我们先看看效果是不是自己想要的吧，代码放最后了~~ 数据展示页面： 显示页面时后台返回的json格式 添加数据页面： 修改回显数据页面： 删除数据页面： jsp页面代码 <%@ pa...
jquery easyui 案例 下载
07-31
jquery easyui 是一个轻量级、开源的前端框架，提供了丰富的UI组件和简单易用的API，使开发人员能够快速构建用户界面。它可以用于开发各种Web应用程序，包括管理系统、数据报表、表单验证等。 要下载jquery easyui，可以按照以下步骤进行： 1. 打开jquery easyui的官方网站，网址为 https://www.jeasyui.com。 2. 在网站的首页上方，可以看到一个"Download"（下载）的标签按钮，点击它。 3. 进入下载页面后，会看到列出了jquery easyui的各个版本。根据自己的需求，选择适合的版本进行下载。一般来说，最新的稳定版本是最推荐的。 4. 在下载页面中，可以找到相应版本的下载链接。点击链接后，会开始下载jquery easyui的压缩包文件。 5. 下载完成后，解压缩该压缩包文件到你的项目目录中。 6. 在项目中引入jquery和easyui的相关文件。可以在HTML文件的<head>标签中添加如下代码： ```html <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.x/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.x/themes/icon.css"> <script type="text/javascript" src="jquery-easyui-1.9.x/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.9.x/jquery.easyui.min.js"></script> ``` 请注意，上述代码中的"jquery-easyui-1.9.x"需要根据你实际解压缩后的文件夹名称进行修改。 7. 引入上述文件后，就可以在你的项目中使用jquery easyui提供的各种UI组件和API了。 以上就是下载jquery easyui的详细步骤。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿立聊代码

有作用的，有闲钱的支持一点。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值