文档章节

spring使用dhtmlxscheduler.js实现实验室预约

wenwen1
 wenwen1
发布于 2013/08/30 16:17
字数 1431
阅读 461
收藏 5

我使用的是spring 3 mvc框架,在该框架中有一个sitemesh-decorators文件夹,在该文件存放了控制整个页面的样式的jsp,默认使用main.jsp样式,因此当我刚刚开始使用dhtmlxscheduler.js插件时总是出不来,而且如果我不使用main.jsp这个样式,也显示不出来,后来我在sitemesh-decorators文件夹里面写了一个ijquery.jsp里面只加载jquery的普通样式,ijquery.jsp的代码如下:

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <%@taglib uri="http://www.springframework.org/security/tags" prefix="security"%>
<%@taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
    <head>
        <title>上海金融学院实验室管理系统</title> 
        <style type="text/css" media="screen">
@import url("${pageContext.request.contextPath}/js/jquery-easyui/themes/icon.css");
@import url("${pageContext.request.contextPath}/js/jquery-easyui/themes/gray/easyui.css");
   @import url("${pageContext.request.contextPath}/css/style.css");s
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui/jquery-1.7.1.min.js" ></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui/jquery.easyui.min.js"></script>
<% if (((HttpServletRequest)pageContext.getRequest()).getServletPath().equals("/index.jsp")){ %>
<link href="${pageContext.request.contextPath}/css/dashboard.css" rel="stylesheet" type="text/css" /> 
<% } %>     
<% if (((HttpServletRequest)pageContext.getRequest()).getServletPath().equals("/pages/login.jsp")){ %>
<link href="${pageContext.request.contextPath}/css/login.css" rel="stylesheet" type="text/css" /> 
<% } %>
<%-- <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.gif" /> --%>
<decorator:head />
    </head>
   <body onload="init();">
   <!--搜索设备-->
<div id="searchEquipment" class="easyui-window" title="添加预约" closed="true" iconCls="icon-add" style="width:710px;height:400px">
<form:form id="form_appointment" modelAttribute="labAppointment">
    <table class="new">
        <tr>
            <td>申请理由:<form:textarea id="appointment_reason" path="reason"/></td>
            <td><span id="reasonError" class="error">申请理由不能为空</span>
            <span id="reasonError2" class="error">不能超过100个字符!</span></td>
        </tr>
        <tr>
        <td>申请日期:<input class="easyui-datebox" id="appointment_date" name="applicationDate"/></td>
        </tr>
        <tr>
        <td>选择的节次:</td>
        <td id="classId"></td>
       <td><span id="classError" class="error" style="color:#F00">请选择节次!</span>
        <span id="classError2" class="error">对不起该日期没有可选的节次!</span></td>
        </tr>
         <tr>
            <td>申请的实验室:<input id="appointment_lab" readonly="readonly" value="${labAnnex.labName}"/>
            <form:hidden path="labAnnex.id" value="${labAnnex.id}"/></td>
            <form:hidden path="CAppointmentStatus.id" value="1"/>
        </tr>
        <tr>
        <td><input type="button" onclick="searchAppointmentSubmit();"  value="确定"></td>
        </tr>
    </table>
</form:form>
</div>
<!--搜索设备-->
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button">&nbsp;</div>
<div class="dhx_cal_next_button">&nbsp;</div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>

<div class="dhx_cal_tab" name="matrix_tab" style="right:280px;"></div>

</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
</html>


然后在你需要显示的jsp里面的head里面写上这样一句话就可以<meta name="decorator" content="ijquery"/>就可以将ijquery.jsp里面内容加载进来了,当然decorators.xml里面加上   <decorator name="ijquery" page="ijquery.jsp"></decorator> 一句话,

我需要显示的jsp是labReservation.jsp,代码如下:

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<head>
<meta name="decorator" content="ijquery"/>
<script src="${pageContext.request.contextPath}/js/dhtmlx/dhtmlxscheduler.js" type="text/javascript"></script> 
<script src="${pageContext.request.contextPath}/js/dhtmlx/ext/dhtmlxscheduler_dhx_terrace.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/dhtmlx/ext/dhtmlxscheduler_timeline.js"  type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/codebase/ext/dhtmlxscheduler_multiselect.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/dhtmlx/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<style type="text/css" media="screen"> 
    html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
.white_cell{
background-color:white;
}
.green_cell{
background-color:#95FF95;
}
.yellow_cell{
background-color:#FFFF79;
}
.red_cell{
background-color:#FF5353;
}
</style>
<script type="text/javascript">
var sss=${idKey};
       var year=${year};
       var month=${month};
       var day=${day};
       var startYear=${startYear};
       var startMonth=${startMonth};
       var startDay=${startDay};
       var endYear=${endYear};
       var endMonth=${endMonth};
       var endDay=${endDay};
       var labSize=${labAnnex.labCapacity};
function init() {


scheduler.locale.labels.matrix_tab = "Matrix"
scheduler.locale.labels.section_custom="Section";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.api_date="%Y-%m-%d %H:%i";
       scheduler.config.xml_date="%Y-%m-%d %H:%i";
       scheduler.config.hour_date="%H:%i";
       scheduler.config.default_date="%Y年%m月%d日";
       scheduler.config.month_date="%Y年 %m月";
       scheduler.config.day_date="%D %m月%d日";
scheduler.config.multi_day = true;
var dateConvert = scheduler.date.date_to_str('%Y-%m-%d');
brief_mode = true; 
scheduler.locale={
   date:{
       month_full:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
       month_short:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
       day_full:["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
       day_short:["周天", "周一", "周二", "周三", "周四", "周五", "周六"]
   },
   labels:{
    dhx_cal_today_button:"今天",
       new_event:"新预约",
       matrix_tab:"实验室预约",
   icon_save:"保存",
   icon_cancel:"取消",
   icon_details:"查看",
   icon_edit:"修改",
   icon_delete:"删除",
   confirm_closing:"确定要关闭?", 
   confirm_deleting:"确定要删除该预约?",
   section_description:"申请理由",
   section_time:"申请日期",
   section_custom:"选择的节次"
   }
};
var sections= new Array();
$.get("${pageContext.request.contextPath}/getAllSchoolClasses",function(data){
 var events=data.rows;
 sections=events;
 });

//必须弹出sections才能获得get里面的值;
alert(sections+"欢迎进入实验室预约");
      //创建显示matrix平板;
scheduler.createTimelineView({
name: "matrix",
x_unit: "day",
x_date: "%d %M",
x_step: 1,
x_size: 15,
y_unit: sections,
y_property: "section_id"
});
      //如果时间
scheduler.templates.matrix_cell_class = function(evs,x,y){
if (!evs) {
var day = x.getDay();
return (day==0 || day == 6) ? "yellow_cell" : "white_cell";
}
if (evs.length<labSize) return "green_cell";
return "red_cell";
};
//如果日期是周六、周日则格子成黄色
scheduler.templates.matrix_scalex_class = function(date){
if (date.getDay()==0 || date.getDay()==6)  return "yellow_cell";
return "";
}
//初始化日历
scheduler.init('scheduler_here',new Date(year,month,day),"matrix");
//加载数据;
scheduler.load("${pageContext.request.contextPath}/getLabReservation?idKey="+sss,"json");
//显示弹出框;在该函数里面获取不到点击格子里面的date,因此我只能采用jquery的easyui-datebox让用户自己获取日期,这是一个bug
scheduler.showLightbox=function(){
$("#searchEquipment").window('open');
$('.error').hide();
$("#appointment_reason").val("");
//选择完时间之后触发时间;
$("#appointment_date").datebox({
onSelect: function(date){
var appDate=$("#appointment_date").datebox('getValue');
$("input[type='checkbox']").remove();
$.post('findCourseAppointmentByDate',{date:appDate,idKey:sss},function(data){
 var dataRows=data.rows;
 if(dataRows.length>0){
 $.each(data.rows, function(index,item){
var id=item.id;
        $("#classId").append("<input type='checkbox' name='memo' value='"+item.id+"'/>"+item.className);
         });  
 }else{
 $("#classId").append("<input type='checkbox' name='memo' value='0' checked='checked'/>"+"无节次");
 }
});
}
});
}

}
//点击确认按钮
function searchAppointmentSubmit(){
var start=new Date(startYear,startMonth,startDay);
var end=new Date(endYear,endMonth,endDay);
var now=new Date(year,month,day);
var appDate=$("#appointment_date").datebox('getValue');
  var reason=$("#appointment_reason").val();
var checkboxs=$("input[type='checkbox']:checked");
var className=$("input[type='checkbox']:checked").val();
var index=0;
if(appDate!=null){
var appDate2=new Date(Date.parse(appDate.replace(/-/g,   "/"))); 
if(appDate2<start){
 alert("对不起,该日期不在该学期的教学时间范围内!");
 index=1;
 }
 if(appDate2<now){
 alert("对不起,该日期无效!");
 index=1;
 }
 if(appDate2>end){
 alert("对不起,该日期已超出了该学期的教学时间!");
 index=1;
 }
}else{

}
if(reason.length==0){
$("#reasonError").show();
index=1;
}
if(reason.length>100){
$("#reasonError2").show();
index=1;
}
if(checkboxs.length==0){
$("#classError").show();
index=1;
}else{
if(className==0){
$("#classError2").show();
index=1;
}
}
if(index==0){
$.post('${pageContext.request.contextPath}/saveLabAppointment',$("#form_appointment").serialize(),function(data){
if(data="ok"){
alert("预约已成功,请等待管理员审核");
window.location.href="${pageContext.request.contextPath}/labReservation?id="+sss;
}
});
}
}
</script>
</head>

效果如下:


© 著作权归作者所有

wenwen1
粉丝 1
博文 26
码字总数 9049
作品 0
徐汇
私信 提问
【南京站报名中!】微服务框架到生态,Apache Dubbo 开发者沙龙

Dubbo 诞生于 2008 年,是阿里巴巴开源的高性能分布式服务框架(A High Performance Java RPC Framework),使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring 框架无缝集...

amber涂南
03/11
0
0
【Dubbo 开发者日北京站】这可能成为微服务开发者们最关注的技术盛宴

亮点解读 Dubbo 2019 将走向哪里?现场围观 Dubbo Roadmap 2019 Java 劝退师小马哥现场演绎《Apache Dubbo 服务自省设计与实现》 开源项目:Spring Cloud Alibaba/Seata/Sentinel/Nacos 等各...

中间件小哥
05/20
0
0
面试阿里等互联网公司java岗位时,关于Spring到底需要掌握什么?

之前分享过一些BAT面试必会的文章,一些读者看了,问过我,Spring 这篇需要掌握一些什么?相信这个问题也是很多读者心中的疑问,今天就来聊一下关于 Spring,我从面试中收获的一些经验。 一....

别打我会飞
04/17
170
0
基于J2EE的实验项目远程管理系统

各位JAVA大神,这是我学校的课程设计,我还没学网络编程就叫我编,求助。 题目1:基于J2EE的实验项目远程管理系统 虚拟化实验是高校实验室的重要实验技术,可以有效降低实验设备成本并提高管...

小鹤
2013/11/27
312
2
Spring Boot(11)——使用Spring Cache

使用Spring Cache Spring提供了Cache抽象,它允许我们声明哪些bean的哪些方法的外部调用需要使用Cache。方法调用使用了Cache后,在调用真实方法前会先从缓存中获取结果,缓存中如果没有则会调...

elim168
2018/12/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot 操作ActiveMQ

一、消息队列中间件介绍 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合、异步消息、流量削锋等问题,实现高性能、高可用、可伸缩和最终一致性架构,是大型分布式系统不可缺少的...

zw965
10分钟前
1
0
本地化存储Storage

为什么会引入Storage(sessionStorage,localStorage,globalStorage) Web storage的目的是克服由cookie带来的限制,当数据需要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一...

五公里
18分钟前
4
0
Qt编写自定义控件57-直方波形图

一、前言 直方波形图控件非原创控件,控件大全中大概有20-30个控件非自己原创,而是参考了网上开源的代码,自己加以整理和完善,新增了插件的代码使得可以直接集成到QtDesigner或者QtCreator...

飞扬青云
19分钟前
1
0
或许你不知道的10条SQL技巧

这几天在写索引,想到一些有意思的TIPS,希望大家有收获。 一、一些常见的SQL实践 (1)负向条件查询不能使用索引 select * from order where status!=0 and stauts!=1 not in/not exists都不...

mskk
25分钟前
4
0
IntelliJ IDEA (Mac) 运行速度优化(JVM+localhost)

1.1. JVM 参数配置 打开 idea,菜单 –> help –> edit custom vm options,调整参数,重启即可。 具体调整参数: -Xms2g -Xmx2g -XX:ReservedCodeCacheSize=1024m -XX:+UseCompressedOops 1......

指尖Coding
34分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部