您的位置：首页 > 编程语言 > Java开发

Samples（日程）

2016-08-22 19:14 225 查看
分享知识 传递快乐
示例图：



第一步：新建一个HTML文件，引入需要的文件

创建一个HTML文件，引入必要的文件，需要的文件是这两个：

dhtmlxscheduler.js
dhtmlxscheduler.css
这两个文件在dhtmlxScheduler下的一个codebase文件夹里。

第二步：建立相关的DIV元素

在初始化日程表之前，你需要定义相关的div元素，来存放日程表，标准的div可以像下面这样创建：
<span style="font-family:SimSun;font-size:18px;"><body onload="doOnLoad();">
<div id="scheduler_div" 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>
</body></span>



第三步：样式为日程表定义了以下样式

<span style="font-family:SimSun;font-size:18px;"><style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>  </span>


第四步：初始化并加载数据

完成上述准备后，接下来我们就要手动加载数据了，需要用如下的parse方法加载。

<span style="font-family:SimSun;font-size:18px;">function doOnLoad() {
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.init('scheduler_div', new Date(), "week");

var data= [{"id":"1","text":"AAA","start_date":"2016-08-20 10:04:22","end_date":"2016-08-20 10:04:27"},
{"id":"2","text":"BBB","start_date":"2016-08-22 10:04:23","end_date":"2016-08-23 10:04:27"},
{"id":"3","text":"CCC","start_date":"2016-08-22 10:04:24","end_date":"2016-08-23 10:04:27"}];

scheduler.parse(data, "json");
}
</span>


一个数据对象的属性如下：

id - (string,number) id编号
start_date - (string) 数据的开始时间，它的默认格式是："%m/%d/%Y %H:%i"
end_date - (string) 事件开始的时间，它的默认格式是："%m/%d/%Y %H:%i"
text - (string) 事件描述

以上是静态加载数据。



第五步：先成功完成Samples（静态加载数据）的操作步骤。

修改doOnLoad方法
<span style="font-family:SimSun;font-size:18px;">function doOnLoad() {
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.init('scheduler_here', new Date(), "week");
scheduler.load("queryAllScheduler", "json");
}
</span>




第六步创建数据库
<span style="font-family:SimSun;font-size:18px;">CREATE TABLE `samples` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`start_date` datetime NOT NULL,
`end_date` datetime NOT NULL,
`text` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
)</span>


第七步写后台程序

这里只先写一个controller类，其它类和方法就不再写了。
<span style="font-family:SimSun;font-size:18px;">@Controller
@SuppressWarnings("all")
public class SchedulerController {

@Resource
private SchedulerService schedulerService;

@RequestMapping(value = "goScheduler")
public String goScheduler() {
return "scheduler_index";
}

/**
* 查询列表
*
* */
@RequestMapping(value = "queryAllScheduler", produces = "application/json; charset=utf-8")
@ResponseBody
public Map queryAllScheduler(){
List list = schedulerService.findAll();
System.out.println("============="+list.size());

Map<String,Object> map = new HashMap<String,Object>();
map.put("data", list);
return map;
}

/**
* 添加
*
* */
@RequestMapping(value = "addScheduler", produces = "application/json; charset=utf-8")
@ResponseBody
public String addScheduler(Scheduler params) {
System.out.println("=================="+params.toString());

int result = schedulerService.add(params);
String msg = result > 0 ? "添加成功" : "添加失败";
System.out.println(msg);
return result > 0 ? "0" : "1";
}

/**
* 更新
*
* */
@RequestMapping(value = "editScheduler", produces = "application/json; charset=utf-8")
@ResponseBody
public String editScheduler(Scheduler params) {
System.out.println("=================="+params.toString());

Scheduler scheduler = schedulerService.find(params.getId());
scheduler.setText(params.getText());
scheduler.setStart_date(params.getStart_date());
scheduler.setEnd_date(params.getEnd_date());

int result = schedulerService.edit(scheduler);
String msg = result > 0 ? "更新成功" : "更新失败";
System.out.println(msg);
return result > 0 ? "0" : "1";
}

/**
* 删除
*
* */
@RequestMapping(value = "removeScheduler", produces = "application/json; charset=utf-8")
@ResponseBody
public String removeScheduler(Integer param) {
System.out.println("=================="+param);

int result = schedulerService.remove(param);
String msg = result > 0 ? "删除成功" : "删除失败";
System.out.println(msg);
return result > 0 ? "0" : "1";
}

}</span>


第八步完成Samples增删改功能

//保存
<span style="font-family:SimSun;font-size:18px;">var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
scheduler.attachEvent("onEventAdded", function(event_id, event_object) {
var url = "addScheduler";
var id = event_object.id;
var text
4000
= event_object.text;
// date 需要实现格式化
var start_date = convert(event_object.start_date);
var end_date = convert(event_object.end_date);
var details = event_object.details;
var str = start_date + "#" + end_date + "#" + text;
$.ajax({
type : "POST",
url : url,
data : {
"text" : text,
"start_date" : start_date,
"end_date" : end_date
},
success : function(data) {
if(data == 0){
location.reload();
//location=location;
}else{
alert("添加失败");
}
}
});
});

//删除
scheduler.attachEvent("onBeforeEventDelete", function(event_id, event_object) {
var url = "removeScheduler";
var id = event_object.id;
var text = event_object.text;
$.ajax({
type : "POST",
url : url,
dataType:"text",
data:{"param":id},
success : function(data) {
if(data == 0){
location.reload();
//location=location;
}else{
alert("删除失败");
}
}
});
});

//修改事件
scheduler.attachEvent("onEventChanged", function(event_id, event_object) {
var url = "editScheduler";
var id = event_object.id;
var text = event_object.text;
var start_date = convert(event_object.start_date);
var end_date = convert(event_object.end_date);
var details = event_object.details;
var pars = "id=" + id + "&start_date=" + start_date + "&end_date="
+ end_date + "&text=" + text + "&details=" + details;

var str = start_date + "#" + end_date + "#" + text + "#" + id;
$.ajax({
url : url,
type : "POST",
data : {
"id" : id,
"text" : text,
"start_date" : start_date,
"end_date" : end_date
},
success : function(data) {
if(data == 0){
location.reload();
//location=location;
}else{
alert("更新失败");
}
}
});
});</span>


以上是所有功能。

源码下载：http://download.csdn.net/detail/xhaimail/9610035
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                dhtmlx
                                                Samples
                                                日程
                                                java
                                                Samples案例
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航