Java實作日程圖（Samples）功能

分享知識傳遞快樂

示例圖：

第一步：建立一個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 = 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>

以上是所有功能。

Java實作日程圖（Samples）功能

分享知識傳遞快樂

繼續閱讀

kubernetes叢集實戰——Pod排程、親和性與反親和性、Node屬性Taints、Pod屬性Tolerations

給dhtmlxGrid增加列合并功能 colspan

使用Scheduling Framework擴充kube-scheduler

dhtmlxscheduler使用

k8s基礎(13)之scheduler排程器k8s基礎(13)之scheduler排程器

排程作業(Oracle Scheduler)

Quartz源碼解析 ---- 觸發器按時啟動原理

Oracle 10g Scheduler 特性 Oracle 10g Scheduler 特性

linux CFS Scheduler

初識Quartz之Scheduler元件

K8S單master部署三：APIserver+Controller-Manager+Scheduler未完待續~~~

openstack動态排程現狀

Rxjava學習(三線程排程器Scheduler)

DHTMLX客戶聚焦：DHTMLX Suite和Scheduler forStaffPro®

Some Basic SQL Queries

RxJava學習篇之一：基礎Observable,Observer,Single,Subject,Scheduler

Java實作日程圖（Samples）功能

分享知識 傳遞快樂

繼續閱讀

分享知識傳遞快樂