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

原创
2013/08/30 16:17
阅读数 1.2K

我使用的是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>

效果如下:


展开阅读全文
打赏
0
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
0
分享
返回顶部
顶部