Dhtmlx Gantt部分属性详解

2 篇文章 0 订阅
1 篇文章 0 订阅

Dhtmlx Gantt部分属性详解,官网地址:https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html

甘特图初始化
 yarn add dhtmlx-gantt
 
 gantt.init(ganttRef.value); // 此处为Vue3的写法
 gantt.parse(tasks); // 设置渲染数据
 gantt.i18n.setLocale("cn") // 支持32种语言

1.click_drag

启动高级拖动功能:可直接通过拖动来创建对应甘特节点,需要先在 gantt.plugins 进行扩展激活。实例如下

gantt.plugins({
   quick_info: true,
  /*keyboard_navigation: true, */
  click_drag: true,
 });
 
 // 可拖动直接创建
 gantt.config.click_drag = {
  callback: function (
   startPosition,
   endPosition,
   startDate,
   endDate,
   tasksBetween,
   rowsBetween
  ) {
   var parentId = gantt.config.root_id;
   if (rowsBetween.length) {
   parentId = rowsBetween[0].id;
   }
	// 创建新的甘特节点,属性参照
   gantt.createTask(
    {
     text: "New task",
     start_date: gantt.roundDate(startDate),
     end_date: gantt.roundDate(endDate),
     color: "skyblue",
    },
    parentId
   );
  },
  singleRow: true,
 };
2.columns

gantt.config.columns–自定义左侧表格头部信息,可配置:匹配字段,字段名称,宽度,颜色,展示模板等,可设置属性参照https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html

 gantt.config.columns = [
    { name: "text", label: "项目名称", tree: true, width: 200 },
    { name: "start_date", label: "开始时间", align: "center", width: 140},
    { name: "duration", label: "持续时间", align: "center", width: 100},
    { name: "parent", label: "父级",width: 100,template:function(obj){
                                return obj.holder+"("+obj.progress+")"}},
  ];
  //template可自定义当前column 展示形式
3.常用属性
  gantt.config.autoscroll = true; // 将任务或链接拖出当前浏览器屏幕时启用自动滚动
  gantt.config.show_empty_state = true; // 当甘特图数据为空时是否显示左侧网格的占位符元素
  gantt.config.show_grid = false; // 是否显示左侧网格区域
  gantt.config.date_format = "%Y-%m-%d %H:%i:%s"; // 日期展示格式
  gantt.config.autofit = true; // 宽度是否自适应
  gantt.config.grid_width = 400; // 左侧列表宽度
  gantt.config.min_grid_column_width = 100; // 设置调整网格大小时左侧每一格的最小宽度---优先于grid_width
  gantt.config.show_links = true; //是否显示依赖连线
  gantt.config.show_progress = true; // 是否显示任务进度
  gantt.config.show_quick_info = false; // 是否显示quickInfo(甘特图详情小框)
  gantt.config.sort = true; // 点击表头可排序
  gantt.config.row_height = 30; //设置行高
  gantt.config.drag_project = false; // 是否可以拖动父节点
  gantt.config.readonly=true; // 只读模式
  gantt.config.multiselect = true; // 是否开启任务多选模式--需在plugins配置multiselect: true
  gantt.config.scale_height = 80; // 设置时间刻度的高度和左侧表格头部高度
  
  //二者为true可拖动左侧任意节点到任意位置
  gantt.config.order_branch = true;//值还可为"marker",作用为对任务名称进行重新排序(按住鼠标左键时),并且仅当将任务放置在目标位置时(松开鼠标键	时)才重新渲染甘特图。
  gantt.config.order_branch_free = true;
  
  gantt.config.reorder_grid_columns = false; // 是否通过拖动调整左侧表格列的顺序
  gantt.config.resize_rows = true; // 是否通过拖放调整左侧表格行高度
  
  gantt.config.drag_move = false; // 是否可通过拖动来移动任务节点
  gantt.config.drag_resize = false; // 是否可以通过拖放调整任务节点范围大小
  gantt.config.drag_progress  = false; // 是否可以通过拖放调整任务节点完成度
  
  // 持续时间展示单位及跨度,若为hour或minute,duration_step建议为1,利性能优化
  gantt.config.duration_unit = "hour";// minute", "hour", "day", "week", "month", "year"
  gantt.config.duration_step = 3; 
  
  gantt.config.fit_tasks = true; // 是否自动延长时间范围以适应所有显示的任务--效果:拖动任务时间范围延长,可显示区域会自动变化延长
  gantt.config.link_arrow_size = 8; // 链接箭头大小
  gantt.config.link_line_width = 3; // 链接线的宽度
  gantt.config.min_column_width = 150; // 甘特时间线表头最小宽度

  
  gantt.config.drag_lightbox = false; // 是否可通过标题拖动灯箱
  gantt.config.lightbox_additional_height = 90; // 增加灯箱高度
  gantt.config.wide_form = true; // 灯箱表单展示形式是否更改为标签名和条件元素放置一行,
  // wide_form注意点:若表单有时间(time)选项,此功能界面无效果--官网暂未推出解决方案
  
  gantt.config.preserve_scroll = false; // 重新绘制甘特图的时候保留垂直和水平滚动位置
  gantt.config.scroll_size = 10; // 设置垂直和水平方向滚动条的宽度
  
  gantt.config.select_task  = false; //是否允许在甘特图中选择任务
  gantt.config.show_unscheduled = false;// 是否显示未计划任务(没有开始时间和持续时间)
  gantt.config.smart_scales = true;// 指定仅在屏幕上渲染时间刻度的可见部分--默认为true
4.lightbox_header

编辑框头部标题自定义属性

gantt.templates.lightbox_header = function (start_date, end_date, task) {
    return `<b>${task.text}自定义头部</b>`;
  };
5.修改编辑框左侧按钮文本属性
gantt.attachEvent("onGanttReady", function () {
    gantt.locale.labels.gantt_save_btn = "保 存"; 
    gantt.locale.labels.gantt_cancel_btn = "取 消";
  });
6.打开编辑框方式(原译为灯箱)
gantt.config.details_on_dblclick = true; // 双击打开灯箱
gantt.config.details_on_create = true; // 创建新任务时直接打开灯箱
7.lightbox.sections–自定义编辑框的选项
 gantt.config.lightbox.sections = [
    {
      name: "description",
      height: 70,
      map_to: "text",
      type: "textarea",
      focus: true,
    },
    {
      name: "priority",
      height: 40,
      map_to: "priority",
      type: "select",
      options: [
        { key: 1, label: "High" },
        { key: 2, label: "Normal" },
        { key: 3, label: "Low" },
      ],
    },
    { name: "time", height: 72, map_to: "auto", type: "duration",time_format :["%Y","%m","%d", "%H:%i" ] },
  ];
  如若需要根据任务节点的不同展示lightBox选项内容,可在onBeforeLightbox事件里对于selections进行替换改变,并调取gantt.resetLightbox()更新lightBox
  • name值:为label匹配字段,若要修改表单展示label可通过以下方式更改,格式:gantt.locale.labels.‘select_ + name名称’

    gantt.locale.labels.section_priority = "Priority";
    gantt.locale.labels.section_time = "时间";
    
  • height:当前表单元素高度

  • map_to:数据匹配Key值,也可对接对象

    data: [
        {
          id: 1,
          text: "Project #1", // 对应map_to:text
          start_date: "2024-08-01 00:00",
          duration: null,
          parent: 0,
          progress: 0,
          open: true,
          color: "green",
          priority:'1' // 对应map_to:priority
        },
      ]
    例:map_to:{start_date:"planned_start",end_date:"planned_end",duration:'duration' } // 映射对应数据值planned_start,planned_end,duration
    
  • type类型值:为表单类型值,具体举例详见:https://docs.dhtmlx.com/gantt/desktop__default_edit_form.html#lightboxcontrols

    Textarea - 多行文本字段
    time - 一对选择器,用于通过指定任务的开始和结束日期来设置任务持续时间
    Duration - 一组选择器,用于通过指定任务的开始日期和天数来设置任务持续时间
    select - 一个简单的选择框
    Typeselect - 用于更改任务类型的选择框--专业版独有
    Parent - 用于更改任务连接父级的选择框
    Template - 里面有一些 HTML 内容的容器,可自定义显示样式及数据
    Checkbox - 用于打开/关闭选项或多个值的复选框
    Radio button - 用于从一组给定选项中仅选择一个选项的单选按钮(radio)
    Resource - 用于将多个资源分配给任务的复杂控制--专业版独有--专业版独有
    Constraint - 用于设置任务约束的复杂控件--专业版独有
    
    注意点:若type=‘time’,time_format格式要与数据格式相符保证展示的正确性
  • time_format:日期格式

    // time goes first
    time_format:["%H:%i", "%m", "%d", "%Y"] 
    // month goes first
    time_format:["%m","%d", "%Y", "%H:%i"]
    // the year selector is removed
    time_format:["%H:%i", "%m", "%d"]
    // incorrect
    time_format:["%H:%i", "%M", "%d", "%Y"] // "%m" was changed to "%M"
    
注:关于lightbox.sections 其他详情请参照官网https://docs.dhtmlx.com/gantt/api__gantt_lightbox_config.html
8.type为template时实例
  selection定义:
   gantt.config.lightbox.sections = [
     {
      name: "template",
      height: 40,
      type: "template",
      map_to: "my_template",
     },
    ]
  gantt.locale.labels.section_template = "Details"; // 设置当前template的label名称
  gantt.attachEvent("onBeforeLightbox", function (id) {
    var task = gantt.getTask(id);
    task.my_template ='<button type="submit">提交</button>' // 此处只识别html标签
    return true;
  });
9.给非工作日时间线列添加颜色标注
gantt.config.work_time = true; // 是否允许在工作时间而不是日历时间中计算任务的持续时间
// 给时间Cell添加类名
gantt.templates.timeline_cell_class = function (task, date) {
   if (!gantt.isWorkTime({ task: task, date: date })) return "weekend";
};
// 给对应的时间线表格头部添加类名
gantt.templates.scale_cell_class = function (date) {
   if (!gantt.isWorkTime(date)) return "weekend";
};
// 放置在全局CSS才会生效
<style>
.weekend {
  background: #f4f7f4 !important;
}
</style>
10.tooltip相关

此为鼠标放置任务位置显示的小的tooltip框

1.在plugins打开tooltip
gantt.plugins({
    tooltip: true, // 鼠标放上提示框
  });
2.若要修改展示信息,可根据以下格式进行更改
gantt.templates.tooltip_text = function(start,end,task){
    return "<b>Task:</b> "+task.text+
    "<br/><b>Start date:</b> " + gantt.templates.tooltip_date_format(start)+ 
    "<br/><b>End date:</b> "+gantt.templates.tooltip_date_format(end);
};
10.常用事件集合
  • 添加任务addTask,三个参数,task:任务相关对象,parent:父级ID;index:插入的位置(0或更大)

    gantt.addTask(
        {
          id: 10,
          text: "Task #5",
          start_date: "2024-08-06",
          duration: 5,
          progress: 0.5,
          color: "#17b2fb",
          priority: "2",
        },
        1,2
      );
    
  • 删除任务

    gantt.deleteTask(10); // 填写删除的任务ID值
    
  • 导出为PDF或者PNG,详细介绍地址https://docs.dhtmlx.com/gantt/api__gantt_exporttopng.html

    // 导出会有水印--商业版或者专业版没有,且需要在plugins配置export_api=true
      gantt.exportToPDF({
        name: "mygantt.pdf",
        footer: "来自Renpho",
      });
      gantt.exportToPNG({
        name: "mygantt.png",
        footer: "来自Renpho",
      });
    
  • 灯箱保存事件

    // id: 当前修改任务绑定的ID值
    // task: 当前修改任务相关信息
    // is_new: true为新建任务,false为修改任务
    gantt.attachEvent("onLightboxSave", function (id, task, is_new) {
      //any custom logic here
      console.log(task);
      return true;
    });
    
  • 灯箱取消事件

    gantt.attachEvent("onLightboxCancel", function(id){
        //any custom logic here
    })
    
  • 灯箱删除事件

    gantt.attachEvent("onLightboxDelete", function(id){
        const task = gantt.getTask(id);
        // 添加条件以做对应的删除提示
        if (task.duration > 60){
            alert("The duration is too long. Please, try again");
            return false;
        }
        return true;
    })
    
  • 拖动任务之后事件

    gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
        //any custom logic here
        let task = gantt.getTask(id)
        console.log(task);
    });
    
  • 监听task任务的点击事件以替换默认的详情弹框

    gantt.attachEvent("onTaskClick", function(id,e){
        console.log('单击打开详情'); // 可在此插入项目对应的UI库逻辑
        return true;
    });
    gantt.attachEvent("onTaskDblClick", function(id,e){
        console.log('双击打开详情');// 可在此插入项目对应的UI库逻辑
        return true;
    });
    
  • 16
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用dhtmlxgantt库中的导出插件来将Gantt图导出为Excel文件。这个插件名为dhtmlxgantt-export,它可以生成包含Gantt图数据的Excel文件。 以下是使用dhtmlxgantt-export插件导出Excel文件的步骤: 1. 首先,确保你已经引入了dhtmlxgantt库和dhtmlxgantt-export插件。你可以从dhtmlxgantt的官方网站下载并引入这两个文件。 ```html <!-- 引入dhtmlxgantt库 --> <link rel="stylesheet" type="text/css" href="path/to/dhtmlxgantt.css"> <script src="path/to/dhtmlxgantt.js"></script> <!-- 引入dhtmlxgantt-export插件 --> <script src="path/to/dhtmlxgantt-export.js"></script> ``` 2. 创建一个按钮或其他触发导出的元素,并给它一个唯一的ID。 ```html <button id="exportButton">导出Excel</button> ``` 3. 在JavaScript代码中,使用`gantt.exportToExcel()`方法来触发导出操作。将这个方法与按钮的点击事件绑定。 ```javascript // 获取导出按钮元素 var exportButton = document.getElementById("exportButton"); // 绑定点击事件 exportButton.addEventListener("click", function() { // 调用导出方法 gantt.exportToExcel(); }); ``` 4. 最后,你需要在服务器端处理导出请求,并将Gantt图数据转换为Excel文件格式。dhtmlxgantt-export插件提供了一些服务器端示例代码,你可以参考它们来实现导出功能。 这就是使用dhtmlxgantt-export插件将Gantt图导出为Excel文件的基本步骤。你可以根据自己的需求对导出的Excel文件进行自定义配置和样式设置。详细的文档和示例可以在dhtmlxgantt的官方网站上找到。祝你好运!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值