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

最新推荐文章于 2022-03-27 11:16:36 发布

weixin_34353714

最新推荐文章于 2022-03-27 11:16:36 发布

阅读量248

点赞数

文章标签： java javascript xhtml ViewUI

原文链接：https://my.oschina.net/u/659230/blog/158111

版权

2019独角兽企业重金招聘Python工程师标准>>>

我使用的是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 οnlοad="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" οnclick="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"> </div>
<div class="dhx_cal_next_button"> </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>