spring使用dhtmlxscheduler.js實現實驗室預定

時間 2019-11-11

標籤 spring 使用 dhtmlxscheduler.js dhtmlxscheduler 實現實驗室預定欄目 Spring 简体版

原文原文鏈接

我使用的是spring 3 mvc框架，在該框架中有一個sitemesh-decorators文件夾，在該文件存放了控制整個頁面的樣式的jsp，默認使用main.jsp樣式，所以當我剛剛開始使用dhtmlxscheduler.js插件時老是出不來，並且若是我不使用main.jsp這個樣式，也顯示不出來，後來我在sitemesh-decorators文件夾裏面寫了一個ijquery.jsp裏面只加載jquery的普通樣式，ijquery.jsp的代碼以下： javascript

<%@ 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"> </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>
css

而後在你須要顯示的jsp裏面的head裏面寫上這樣一句話就能夠<meta name="decorator" content="ijquery"/>就能夠將ijquery.jsp裏面內容加載進來了，固然decorators.xml裏面加上 <decorator name="ijquery" page="ijquery.jsp"></decorator> 一句話，

我須要顯示的jsp是labReservation.jsp，代碼以下： html

<%@ 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;
}); java

//必須彈出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";
};
//若是日期是周6、週日則格子成黃色
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'/>"+"無節次");
}
});
}
});
} jquery

}
//點擊確認按鈕
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>
spring