dhtmlxScheduler 4.1
一、dhtmlxScheduler简介
dhtmlxScheduler是一个JavaScript日程安排控件,类似于Google日历,提供了丰富的和直观的解决方案来管理事件,任务和约定。事件可以显示在10个完全可定制的视图,包括天,周,月,时间表,网格。日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间。支持iCal ( iCal 又称 iCalendar,是一种标准的互联网日历格式,让用户能够在各种计算机和各种程序之间创建和共享电子日历 )、XML、JSON三种数据交换格式,可以轻松地管理并保持事件的跟踪,这样用户不会错过开会,忘记预约,或失去分配的任务。
二、dhtmlScheduler的使用方法
1 、根据自己的需要,想做一天的计划还是一周的计划或者是一个月、一年的计划,单击图2-1红色标注的按钮可以切换Day、Week、Month、Year的显示方式。
图2-1
2、双击自己想要添加计划的时间对应的表格,或者可以拖动鼠标选择一段时间,会弹出编辑的对话框,标注上自己的计划,点击保存按钮。
图2-2
3、双击建立的计划,会弹出编辑的对话框,可以对以建立的计划进行修改。
4、单击建立的计划,会相应对应的菜单,可以进行编辑、修改或删除操作。
图3-3
三、dhtmlxScheduler
1、一个基础的dhtmlxScheduler开发程序
我们要考虑建立一个标准的调度程序从数据库加载数据并保存。
准备工作:http://www.dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml下载资源文件
步骤1、一个新的HTML文件和所需的代码文件(dhtmlxscheduler.js、dhtmlxscheduler.css)及相应的资源(codebase文件夹)
<!DOCTYPE html>
<html>
<head>
<title>How to start</title>
<script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" type="text/css">
</head>
<body>
//your code will be here
</body>
</html>
dhtmlxScheduler包的结构:
<!--[if !supportLists]-->· <!--[endif]-->sources -库的源代码文件。不缩小,易于阅读的文件。包主要是用于组件的调试。
<!--[if !supportLists]-->· <!--[endif]-->samples –样本代码示例。
<!--[if !supportLists]-->· <!--[endif]-->docs -文档的全部文档组件。
<!--[if !supportLists]-->· <!--[endif]-->codebase –scheduler的应用程序需要使用这个文件夹下的资源。
步骤2、页面布局,schedule初始化之前,定义相关的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="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
步骤3、在不同的浏览器的全屏模式下正常工作,为schedule定义以下风格:
<style type="text/css" media="screen">
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函数
<script>
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',null,"week");
scheduler.load("event!query.action");
}
</script>
<body onload="init();">
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的页面布局的结构图:
图3-1 以天为单位的结构
图3-2 以周为单位的结构图
图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 id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<property name="configLocation" value="classpath:hibernate.cfg.xml"></property>
</bean>
4、OpenSessionInViewFilter
-修改web.xml文件
<filter>
<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 id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<property name="configLocation" value="classpath:hibernate.cfg.xml"></property>
</bean>
<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">
<property name="sessionFactory" ref="sessionFactory"></property>
</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进行处理。
<!--EndFragment-->
相关推荐
【安卓仓库管理系统源码(毕业设计 Android)】是一款基于Android平台开发的用于仓库管理的应用程序。这个系统的主要目的是提供一个直观、高效的工具,帮助用户跟踪库存的商品进出,进行采购、销售和库存盘点等操作。...
"Employee Scheduler工作日程管理系统 2.1 beta.zip" 是一个专为优化企业内部员工工作日程管理而设计的应用程序。该系统的核心功能是允许员工自行录入其可工作的时段,同时为管理层提供了一个平台,以便在尊重员工...
总的来说,DolphinScheduler v3.2.0是大数据任务调度领域的一个强大工具,它的源代码可以作为毕业设计论文的研究对象,帮助理解分布式调度系统的实现原理。同时,对于计算机案例研究和建站模板开发,也可以借鉴其...
2. **下载二进制**:找到对应版本的发布页面,通常会有`binaries`部分,下载适用于你的操作系统的`kube-scheduler`二进制文件,如`kube-scheduler-linux-amd64.tar.gz`。 3. **解压**:使用`tar -zxvf kube-...
DolphinScheduler是一款强大的分布式工作流调度系统,用于大数据处理任务的编排和管理。在这个配置过程中,我们将探讨如何将Dolphinscheduler与Hadoop、Spark、Hive、DataX、Python和Scala集成,以实现高效的数据...
DolphinScheduler是一个分布式、易扩展的工作流调度系统,广泛应用于大数据处理场景中,它能够有效地管理复杂的工作流程,并支持多种类型的计算引擎。而Hive作为一个基于Hadoop的数据仓库工具,主要用于对存储在...
总之,Employee Scheduler工作日程管理系统是一个集成了多种技术和设计理念的软件项目,它的源码为我们提供了学习和研究的宝贵资源。通过深入分析和理解,我们可以提高自己的编程技能,更好地理解和实现类似项目。
通过本教程的学习,您将能够启动 STK/Scheduler 模块,指定规划周期,定义各种任务及其所需的资源,导入来自 STK 的访问数据和事件报告以帮助定义任务调度机会,并利用两种可用的去冲突和优化算法解决调度问题。...
Dolphinscheduler是一款开源的工作流调度系统,专为大数据处理任务设计,提供了强大的工作流设计、任务调度和监控能力。而Helm则是Kubernetes生态中的软件包管理工具,用于简化Kubernetes应用的部署和管理。在这个...
DolphinScheduler是一个分布式、易扩展的可视化DAG工作流任务调度平台,致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程中开箱即用。 本套教程基于DolphinScheduler 2.0.5版本,多角度调研...
Apache DolphinScheduler是一款强大的分布式工作流管理系统,用于大数据任务的工作流编排和调度。它提供了图形化的工作流设计界面,使得用户可以方便地构建复杂的任务流程。在这个“apache-dolphinscheduler-3.1.4-...
3. 添加JDBC驱动:将`mysql-connector-java-5.1.47-bin.jar`复制到DolphinScheduler的lib目录下,使其成为系统的类路径一部分。 4. 初始化数据库:使用DolphinScheduler提供的SQL脚本对数据库进行初始化,创建必要...
dolphinscheduler 1.3.6 编译镜像,用于编译dolphinscheduler
MapReduce是Apache Hadoop框架的核心组件之一,主要负责大数据处理中的分布式计算任务。在这个主题中,我们将...通过对Fair Scheduler的深入学习,我们可以更好地管理和优化大数据处理任务,从而提升整体的业务效率。
在IT行业中,调度器(Scheduler)是操作系统中的一个重要组件,主要负责管理系统的执行流程,决定哪个任务应该在何时获得CPU资源。在这个名为"readytopresentsim_scheduler_源码"的主题中,我们聚焦于调度器的源码...
综上所述,rancher-scheduler是Rancher生态系统中不可或缺的一部分,负责高效地分配和管理集群中的容器。理解和掌握其工作原理、安装配置、以及调度策略将极大地提升你在容器化环境中部署和管理应用的能力。
Quartz Scheduler 的设计包含了一个 JobStore 接口,它可以用来提供多种机制来保存任务。通过使用 JDBCJobStore,所有的任务和触发器可以非易失性的形式来存储在关系型数据库里。通过使用 RAMJobStore,所有的任务和...
Dolphinscheduler是一款强大的工作流调度系统,尤其在大数据处理领域,它以其直观的图形化界面、丰富的任务类型以及强大的协同能力,为数据工程师提供了高效的工作流程管理工具。在本文中,我们将探讨如何利用...
DolphinScheduler是一款强大的分布式工作流调度系统,主要用于大数据处理任务的调度。它的主要功能是协调复杂的任务依赖关系,确保数据处理流程的高效、稳定运行。在DolphinScheduler 1.3.6版本中,我们可以看到它...
海豚调度器(DolphinScheduler)是一款强大的工作流调度系统,主要应用于大数据处理场景,为企业提供了一套高效、易用、可视化的作业调度解决方案。3.2.0版本的bin文件包是其核心组成部分,包含了运行Dolphin...