毕业设计管理系统之四scheduler学习部分知识整理

dhtmlxScheduler 4.1

一、dhtmlxScheduler简介

dhtmlxScheduler是一个JavaScript日程安排控件，类似于Google日历，提供了丰富的和直观的解决方案来管理事件,任务和约定。事件可以显示在10个完全可定制的视图,包括天,周,月,时间表,网格。日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间。支持iCal ( iCal 又称 iCalendar，是一种标准的互联网日历格式，让用户能够在各种计算机和各种程序之间创建和共享电子日历 )、XML、JSON三种数据交换格式，可以轻松地管理并保持事件的跟踪,这样用户不会错过开会,忘记预约,或失去分配的任务。

二、dhtmlScheduler的使用方法

1 、根据自己的需要，想做一天的计划还是一周的计划或者是一个月、一年的计划，单击图2-1红色标注的按钮可以切换Day、Week、Month、Year的显示方式。

毕业设计管理系统之4scheduler学习部分知识整理

图2-1

2、双击自己想要添加计划的时间对应的表格，或者可以拖动鼠标选择一段时间，会弹出编辑的对话框，标注上自己的计划，点击保存按钮。

毕业设计管理系统之4scheduler学习部分知识整理

图2-2

3、双击建立的计划，会弹出编辑的对话框，可以对以建立的计划进行修改。

4、单击建立的计划，会相应对应的菜单，可以进行编辑、修改或删除操作。

毕业设计管理系统之4scheduler学习部分知识整理

图3-3

三、dhtmlxScheduler

1、一个基础的dhtmlxScheduler开发程序

我们要考虑建立一个标准的调度程序从数据库加载数据并保存。

准备工作：http://www.dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml下载资源文件

毕业设计管理系统之4scheduler学习部分知识整理

步骤1、一个新的HTML文件和所需的代码文件（dhtmlxscheduler.js、dhtmlxscheduler.css）及相应的资源（codebase文件夹）

<!DOCTYPE html>

<html>

<head>

<title>How to start</title>

</head>

<body>

//your code will be here

</body>

</html>

dhtmlxScheduler包的结构：

· sources -库的源代码文件。不缩小,易于阅读的文件。包主要是用于组件的调试。

· samples –样本代码示例。

· docs -文档的全部文档组件。

· codebase –scheduler的应用程序需要使用这个文件夹下的资源。

步骤2、页面布局，schedule初始化之前，定义相关的DIV容器

</div>

</div>

步骤3、在不同的浏览器的全屏模式下正常工作,为schedule定义以下风格:

html, body{

margin:0px;

padding:0px;

height:100%;

overflow:hidden;

}

</style>

如果你不使用全屏模式,不需要特别指定的风格，可以在main的div css属性直接设置:

<div id="scheduler_here" class="dhx_cal_container"

style='width:200px; height:300px; padding:10px;'>

步骤4、完成了准备工作之后,可以初始化。scheduler是一个静态的对象，在页面上,可以实例化一次。

//添加初始化函数, 在body的onload事件中调用上面的init函数

function init() {

scheduler.config.xml_date="%Y-%m-%d %H:%i";

scheduler.init('scheduler_here',null,"week");

scheduler.load("event!query.action");

}

</script>

scheduler.config.xml_date="%Y-%m-%d %H:%i"

DataTime数据类型的格式是“Y%-%m-d% H%:%i,不同于预期的日期格式调度器(“%m/%d/%Y %H:%i”)。提供正确的数据转换,应该更改默认scheduler的格式,可以通过指定xml_date配置选项。

scheduler.init('scheduler_here',null,"week")

void init(string| DOM element container [, Date date, string view] );包含三个参数，container：dhtmlxScheduler对象将被初始化的一个HTML容器(或其id)

date：默认当前时间

view：默认周

scheduler.load("event!query.action")

void load(string url [, string type, function callback] );

url: 服务器端url(可能是一个静态文件或一个服务器端脚本,输出数据为XML

type: (' json ',“xml”,“ical”)的数据类型。默认值——“xml”

callback:回调函数

如果您现在运行这个应用程序,你已经可以看到页面上的scheduler。但它不会包含任何数据。

2、scheduler的结构图

图3-1、图3-2、图3-3为scheduler的页面布局的结构图：

毕业设计管理系统之4scheduler学习部分知识整理

图3-1 以天为单位的结构

毕业设计管理系统之4scheduler学习部分知识整理

图3-2 以周为单位的结构图

毕业设计管理系统之4scheduler学习部分知识整理

图3-3 以月为单位的结构图

3、将scheduler集成到SSH

3、1 配置SSH环境

1、拷贝依赖包

-spring3.0 25

-spring3.0.4\dist 21

-spring依赖包\lib\jakarta-commons 1

-spring依赖包\lib\aspectj 2

-spring依赖包\lib\aopalliance 1

-hibernate3.6.10 11

-hibernate3.6: hibernate3 1

-hibernate3.6\lib\required 6

-hibernate3.6\lib\jpa 1

-日志转换

-slf4j-1.6.1\slf4j-1.6.1 1

-log4j-1.2.17\apache-log4j-1.2.17 1

-数据库的链接包

- mysql-connector-java-5.1.22-bin 1

-struts2.2.1

-取空项目中的包 7

-sturts和spring集成的包 1

-truts2-spring-plugin-2.2.1

-删除重复的包：javassist -1

2、spring与hibernate集成

-把SessionFactory、session、Transaction都交给spring管理

-注意：

*SessionFactory要注入到UserDao中

*做测试的时候只能对UserService做，不能对UserDao

因为事物管理的是UserService

3、spring与struts集成

-Web.xml

-增加Struts的Fileter

-增添Listener

-修改applicationContext.xml

</bean>

4、OpenSessionInViewFilter

-修改web.xml文件

<filter-name>openSessionInView</filter-name>

<filter-class>org.springframework.orm.hibernate3.support.OpenSessionInViewFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>openSessionInView</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

5、把hibernate的配置文件中的内容配置到spring的配置文件中

-拷贝依赖包

spring依赖包\lib\jakarta-commons

-commons-pool.jar

-commons-dbcp.jar

-修改spring的配置文件

<context:component-scan base-package="sjzc.edu"></context:component-scan>

</bean>

</bean>

<tx:advice id="txAdvice" transaction-manager="transactionManager">

<tx:attributes>

<tx:method name="*" />

</tx:attributes>

</tx:advice>

<aop:config>

<aop:pointcut expression="execution(* sjzc.edu.service.*.*(..))" id="AllServiceMethods"/>

<aop:advisor advice-ref="txAdvice" pointcut-ref="AllServiceMethods"/>

</aop:config>

</beans>

3、2 配置相关样式及js文件

WebRoot下：

css文件夹：dhtmlxscheduler.css

js文件夹：dhtmlxscheduler.js、public.js、jQuery.js

imgs文件夹：相关的图片

dhtmlxscheduler.js中定义相关的双击对应的表格增加事件，双击以定义的事件可以进行编辑，在编辑事件时点击选中区域以外的区域触发的相关事件，点击保存、取消、编辑按钮触发相关的事件。

public.js中定义了addorupdate和delEvent两个function方法，通过jQuery.js的$.get()方法传递Event的属性值。

function addorupdate(ev) {

var url = "event!addOrUpdateEvent.action?id=" + ev.id + "&start_date=" + ev.start_date.getTime() + "&end_date=" + ev.end_date.getTime() +

"&text=" + encodeURI(ev.text) + "&stage=" +　ev.subject + "&director=" + ev.director;

$.get(url);

}

function delEvent(eventId){

var url = "event!deleteEvent.action?id=" + eventId;

$.get(url);

}

3、3表结构

t_event：

id	varchar(255)	primary key
start_date	datetime
end_date	datetime
text	varchar(255)
director	varchar(255)
step	varchar(255)

3、4如何和数据库实现交互？增加，删除，修改？

在管理员登录，在计划表管理菜单下点击日历图，连接到scheduler.jsp

在init()函数中，scheduler.load("event!query.action"),是将数据库中的数据展现。

通过dhtmlxscheduler.js获取页面的响应，调用public.js中function addorupdate(ev)和function delEvent(eventId)方法，提交到相应的action进行处理。

毕业设计管理系统之4scheduler学习部分知识整理

dhtmlxScheduler 4.1

一、dhtmlxScheduler简介

二、dhtmlScheduler的使用方法

三、dhtmlxScheduler

1、一个基础的dhtmlxScheduler开发程序

2、scheduler的结构图

3、将scheduler集成到SSH

3、1 配置SSH环境

3、2 配置相关样式及js文件

3、3表结构

3、4如何和数据库实现交互？增加，删除，修改？

相关推荐