永利最大(官方)网站

此功能仅在 Gantt PRO 版本中可用。

点击获DhtmlxGantt官方正式版

在DhtmlxGantt中自定义第三方 Duration 控件。

需要将自定义 Duration 控件添加到灯箱，以指定任务的开始日期和天数。

考虑如何在 jQuery 的基础上添加自定义的 Duration 控件：

• 在页面上包含 jQuery 库的源文件：

  <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link  rel="stylesheet" type="text/css" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

• 描述控制逻辑：

  (function () {
      function startDatepicker(node){
          return $(node).find("input[name='start']");
      }
      function durationInput(node){
          return $(node).find("input[name='duration']");
      }
      function endDateLabel(node){
          return $(node).find("span.gantt-lb-datepicker-label");
      }
   
      var formatter = gantt.ext.formatters.durationFormatter({
          enter: "day",
          store: "day",
          format: "auto"
      });
   
      gantt.form_blocks["datepicker_duration"] = {
          render: function (sns) { //sns - the section's configuration object
              return "<div class='gantt-lb-datepicker'>"+
                  "<label>Start:<input type='text' name='start'></label>"+
                  "<label>Duration: <input type='text' name='duration'></label>"+
                  "<span class='gantt-lb-datepicker-label'></span>"
                  "</div>";
          },
          set_value: function (node, value, task, section) {
              //node - an html object related to the html defined above
              //value - a value defined by the map_to property
              //task - the task object
              //section- the section's configuration object
   
              startDatepicker(node).datepicker({
                  dateFormat: "yy-mm-dd",
                  onSelect: function (dateStr) {
                      var endValue = durationInput(node).datepicker('getDate');
                      var startValue = startDatepicker(node).datepicker('getDate');
   
                      if(startValue && endValue){
                          if(endValue.valueOf() <= startValue.valueOf()){
                              durationInput(node).datepicker("setDate",
                                  gantt.calculateEndDate({
                                      start_date: startValue, duration: 1, task:task
                                  })
                              );
                          }
                      }
                  }
              });
   
              startDatepicker(node).datepicker("setDate", task.start_date);
   
              durationInput(node).val(formatter.format(task.duration));
              endDateLabel(node).text(
                  "Ends: " + gantt.templates.task_date(task.end_date)
              );
          },
          get_value: function (node, task, section) {
   
              if(task.start_date && task.end_date) {
                  var start = startDatepicker(node).datepicker('getDate');
                  var end = task.end_date;
                  var duration = formatter.parse(durationInput(node).val());
   
                  if(duration && !isNaN(Number(duration))){
                      end = gantt.calculateEndDate({
                          start_date: start, duration: duration, task:task
                      });
                  }
                  task.start_date = start;
                  task.duration = duration;
                  task.end_date = end;
              }
   
              task.duration = gantt.calculateDuration(task);
              return {
                  start_date: task.start_date,
                  end_date: task.end_date,
                  duration: task.duration
              }
          },
          focus: function (node) {
   
          }
      }
  })();

• 将控件用作灯箱部分，类型为：“datepicker_duration”：

  gantt.config.lightbox.sections = [
    { name: "description", height: 70, map_to: "text", type: "textarea", focus: true },
    { name: "time", height: 72, map_to: "auto", type: "datepicker_duration" }
  ];

更多关于DhtmlxGantt教程的内容可进入官网查看。

DhtmlxGantt| 下载试用

DhtmlxGantt是针对您的解决方案的交互式JavaScript / HTML5甘特图。