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; });
