效果图
下载指令
npm install dhtmlx-gantt --save
网络资源下载
Html
<div id="idGantt" class="gantt_box"></div>
JavaScript
let originData = [
{ id: 1, name: '张三', text: "Project #1", start_date: null, end_date: null, duration: null, parent: undefined, progress: 0, open: true },
{ id: 2, name: '张三', text: "Task #1", start_date: "2023-05-20 00:00", end_date: '2023-05-31 23:59', parent: 1, progress: 1 },
{ id: 3, name: '张三', text: "Task #2", start_date: "2023-06-06 00:00", end_date: '2023-06-11 23:59', parent: 1, progress: 0.5 },
{ id: 4, name: '张三', text: "Task #3", start_date: null, end_date: null, parent: 1, progress: 0.8, open: true },
{ id: 5, name: '张三', text: "Task #3.1", start_date: "2023-07-09 00:00", end_date: '2023-07-11 23:59', parent: 4, progress: 0.2 },
{ id: 6, name: '张三', text: "Task #3.2", start_date: "2023-07-11 00:00", end_date: '2023-08-11 23:59', parent: 4, progress: 0 }
],
columns = [
// { name: "id", label: "ID", width: "*" },
{ name: "text", label: "名称", tree: true },
// { name: "name", label: "姓名", align: "center" },
{ name: "start_date", label: "开始时间" },
{ name: "end_date", label: "结束时间" },
{ name: "duration", label: "耗时/天", align: "center" },
// { name: "add", label: "" },
],
links = [],
/**
* %D 星期
* %Y 年
* %F 月
* %j 天
* format: "%Y %F"
*/
scales = [
// { unit: "year", step: 1, format: "%Y" },
{
unit: "month",
step: 1,
format: (date) => {
let { y, m } = handleDate(date);
return `${y}-${m}`;
}
},
{
unit: "day",
step: 1,
format: (date) => {
let { d } = handleDate(date);
return d;
}
}
];
/**
* 处理日期
*/
function handleDate(date) {
let ymd = undefined,
y = undefined,
m = undefined,
d = undefined;
ymd = date.toISOString();
ymd = ymd.split('T')[0];
ymd = ymd.split('-');
y = ymd[0];
m = ymd[1];
d = ymd[2];
return { y, m, d };
}
function init() {
gantt.config.columns = columns;
gantt.config.scales = scales;
gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.attachEvent('onAfterTaskDrag', (id, type, event) => {
console.log('id: ', id);
console.log('type: ', type);
console.log('event: ', event);
const task = gantt.getTask(id);
console.log('onAfterTaskDrag', task);
// refreshSummaryProgress(gantt.getParent(id), false);
// if (type === 'resize') {
// console.log('设置时间');
// }
// if (type === 'progress') {
// console.log('设置进度');
// }
});
gantt.init("idGantt");
gantt.parse({ data: originData });
let date = new Date();
gantt.templates.task_class = function (start, end) {
let bc = '';
if (start < date && end > date) {
bc = "current_task";
} else if (end < date) {
bc = "completed_task";
} else {
bc = "future_task";
}
return bc;
};
}
init();
CDN引入
本地包引入
通过npm下载到本地后，再进行引入。
注意：此方式在vue中无法使用，因为vue项目上线后就不存在node_modules包了。<link rel="stylesheet" href="../node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css"> <script src="../node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.js"></script>
网络地址引入
此方式引入时，首次加载时会非常的慢，在vue项目中会更加慢，甚至可能加载不出来。
<link rel="stylesheet" type="text/css" href="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css"> <script src="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.1.7"></script>
两种引入方式的区别
1、本地包引入不会影响首次加载，但是项目上线后就不存在node_modules包了。
2、本地包引入时，甘特图的表格部分和图部分无法实现左右拖动功能。
3、网络地址引入方式，首次加载时会非常的慢，在vue项目中会更加慢，甚至可能加载不出来。
以上问题的中和解决办法
可以通过网络地址把需要的内容下载到本地，新建一个名为assets或static文件夹；
在文件夹中新建两个文件，一个css和一个js文件，名称为dhtmlxgantt。
把对应的文件下载到这两个文件中即可解决上述问题。
在vue项目的index.html文件中全局引入
<link rel="stylesheet" href="./src/assets/css/dhtmlxgantt.css"> <script src="./src/assets/js/dhtmlxgantt.js"></script>
在vue项目中局部引入
引入js一import '../../../assets/js/dhtmlxgantt.js';引入js二(不可行，报错)
import dhtmlxgantt from '../../../assets/js/dhtmlxgantt.js';引入js三(不可行，报错)
let { gantt } = require('../../../assets/js/dhtmlxgantt.js');引入js四(不可行，报错)
import * as dhtmlxgantt from '@/assets/js/dhtmlxgantt.js';
引入style
@import "../../../assets/css/dhtmlxgantt.css";
Style
body {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
/* 当前进行中的任务的颜色 */
.current_task {
background-color: #f56c6c !important;
}
/* 已完成的任务的颜色 */
.completed_task {
background-color: #e6a23c !important;
}
/* 将来要执行的任务的颜色 */
.future_task {
background-color: #409eff !important;
}
.gantt_box {
width: 100%;
/* 20px是横向滚动条的高度 */
height: calc(100vh - 20px);
}
配置相关
gantt.config = {
auto_scheduling_move_projects: '定义是否将整个项目移动（请参阅下面的详细信息）',
preserve_scroll: '在重新绘制甘特图时保留垂直和水平滚动的当前位置',
auto_scheduling_descendant_links: '允许或禁止创建从父任务（项目）到子任务的链接',
task_date: '设置灯箱“时间段”部分中日期标签的格式',
resource_render_empty_cells: '告诉资源时间线渲染元素并为未分配的单元格调用模板',
tooltip_offset_x: '设置工具提示位置的右侧（如果为正）偏移',
drag_links: '允许通过拖放创建依赖链接',
root_id: '设置虚拟根元素的 id',
readonly: '激活甘特图的只读模式',
drag_multiple: '可以一次拖动多个选定的任务',
scale_unit: '设置时间刻度的单位（X 轴）',
task_scroll_offset: '设置距离时间轴左边框最近的任务的偏移量（以像素为单位）',
fit_tasks: '甘特图自动扩展时间尺度以适应所有显示的任务',
editor_types: '包含内联编辑器定义的对象',
touch: '启用 / 禁用对甘特图的触摸支持',
datastor: '一组数据存储方法',
start_date: '设置时间刻度的起始值',
details_on_create: '在通过单击“+”按钮创建新事件时打开灯箱',
time_picker: '设置灯箱中时间下拉选择器的格式',
layer_attribute: '设置任务层的 DOM 元素的属性名称',
resource_attribute: '更改甘特图用来查找资源网格/时间线中的任务行所指的资源的属性的名称',
min_column_width: '设置时间轴区域中列的最小宽度',
version: '返回 dhtmlxGantt 的版本',
quick_info_detached: '定义任务表单是从屏幕的左侧/右侧出现还是在所选任务附近出现',
row_height: '设置表格行的默认高度',
auto_scheduling_compatibility: '禁用任务的时间限制',
keep_grid_width: '在调整列大小时保留初始网格的宽度',
editable_property: '更改影响只读甘特图中任务/链接编辑能力的属性名称',
lightbox: '指定灯箱对象',
project_end: '指定项目的结束日期',
touch_feedback: '在触摸设备上拖放之前/之后返回振动反馈',
start_on_monday: '设置一周的开始日期',
undo_actions: '设置撤消操作将恢复的操作',
order_branch: '激活“分支”模式，允许在同一树级别内垂直重新排序任务',
link_attribute: '设置将指定链接的 HTML 元素的 id 的属性的名称',
link_line_width: '设置时间线区域中依赖链接的宽度',
task_height: '设置时间线区域中任务栏的高度',
rtl: '将甘特图切换到从右到左模式',
tooltip_hide_timeout: '设置工具提示隐藏之前的时间长度，以毫秒为单位',
container_resize_timeout: '指定在调整容器大小时重绘甘特图之前的延迟（以毫秒为单位）',
utils: '各种辅助模块',
scales: '定义时间刻度的配置设置',
show_grid: '显示甘特图的网格区域',
placeholder_task: '在任务列表的末尾添加一个空行以简化通过键盘编辑任务',
open_tree_initially: '最初打开所有分支',
drag_resize: '可以通过拖放来调整任务大小',
env: '一组描述当前环境的标志',
reorder_grid_columns: '可以通过拖放重新排列网格列 - 左侧树',
smart_rendering: '为甘特图的任务和链接渲染启用智能渲染模式',
keyboard_navigation_cells: '启用按单元格的键盘导航',
resize_rows: '启用通过拖放调整行高的能力',
sort: '启用表中的排序',
drag_move: '允许通过拖放移动任务',
drag_project: '允许拖放项目类型的项目',
work_time: '可以在工作时间而不是日历时间计算任务的持续时间',
button_left: '存储位于灯箱左下角的按钮集合',
end_date: '设置时间刻度的结束值',
constraint_types: '包含了所有可用的约束类型',
branch_loading: '在甘特图中启用动态加载',
auto_scheduling: '启用自动调度',
task_grid_row_resizer_attribute: '',
grid_resizer_attribute: '设置网格调整器的 DOM 元素的属性名称',
min_grid_column_width: '在调整大小时设置网格的最小宽度（以像素为单位）',
date_scale: '设置时间刻度的格式（X 轴）',
auto_scheduling_strict: '启用自动调度模式，在这种模式下，任务将始终被重新安排到最早的日期',
config: '定义日期、比例、控件的配置选项',
deepcopy_on_parse: '定义甘特图是否对传递给 gantt.parse() 方法的数据对象执行深度复制',
layout: '指定布局对象',
quickinfo_buttons: '存储驻留在弹出任务的详细信息表单中的按钮集合',
details_on_dblclick: '双击任务后打开灯箱',
step: '设置时间刻度（X 轴）的步长',
autoscroll: '在将任务或链接拖出当前浏览器屏幕时启用自动滚动',
lightbox_additional_height: '增加灯箱的高度',
project_start: '指定项目的开始日期',
scroll_on_click: '指定在选择显示所选任务时是否滚动时间线区域',
quickinfo_icons: '重新定义甘特图按钮的默认点击行为',
calendar: '工作日历对象的接口',
grid_width: '设置网格的宽度',
date: '一组日期格式化方法',
i18n: '一组用于甘特图本地化的方法',
show_task_cells: '启用/禁用在(任务)图表区域中显示列边框',
process_resource_assignments: '启用/禁用资源分配的解析',
resource_property: '定义任务对象的属性，该对象存储与 resourceGrid/Timeline/Histogram/Calendar 关联的资源 ID',
resource_assignment_store: '指定存储资源分配的数据存储的名称',
date_format: '设置用于解析数据集中的数据并将日期发送回服务器的日期格式',
container_resize_method: '定义甘特图是否应以时间间隔跟踪容器的大小调整',
drag_lightbox: '可以通过标题拖动灯箱',
show_chart: '显示甘特图的图表（时间线）区域',
drag_mode: '存储可用拖放模式的类型',
subscales: '指定第二个时间尺度（已弃用）',
oldxml: '指定 dhtmlxGantt 1.0 的 XML 格式的序列化和解析',
show_tasks_outside_timescale: '启用在甘特图中显示指定日期范围之外的任务',
order_branch_free: '激活“分支”模式，允许在整个甘特图中重新排序任务',
xml_date: '定义用于从数据集中解析数据并将数据发送到服务器的日期格式',
autosize_min_width: '设置甘特图在水平“自动调整大小”模式下可以采用的最小宽度（以像素为单位）',
button_right: '存储位于灯箱右下角的按钮集合',
date_grid: '设置表格“开始时间”列中的日期格式',
show_quick_info: '激活/禁用“quick_info”扩展（弹出任务的详细信息表单）',
schedule_from_end: '启用反向调度',
skins: '返回可用皮肤的对象',
constants: '存储各种常量以减少代码中幻数的使用',
multiselect: '在甘特图中启用/禁用多任务选择',
redo: '启用甘特图的重做功能',
duration_unit: '设置持续时间单位',
touch_feedback_duration: '定义在触摸设备上拖放之前/之后振动反馈的持续时间（以毫秒为单位）',
drag_timeline: '配置 drag_timeline 扩展的行为',
drag_progress: '可以通过拖动进度旋钮来更改任务进度',
horizontal_scroll_key: '通过 Shift|Alt|Meta 键 + 鼠标滚轮移动启用/禁用水平滚动',
static_background_cells: '在 static_background 模式下启用突出显示的单元格的渲染',
click_drag: '启用高级拖放',
auto_scheduling_initial: '定义甘特图是否对数据加载/解析进行自动调度',
grid_elastic_columns: '调整可滚动网格内列的宽度',
autosize: '强制甘特图自动更改其大小以显示所有任务而无需滚动',
bar_height: '设置时间线区域中任务栏的高度',
ajax: '甘特图 ajax 模块',
branch_loading_property: '指定任务有尚未从后端加载的子任务',
templates: '定义甘特图中日期、标题、工具提示的格式模板',
touch_drag: '定义用于区分长触摸手势和滚动手势的时间段（以毫秒为单位）',
autoscroll_speed: '定义将任务或链接拖出当前浏览器屏幕时自动滚动的速度（以毫秒为单位）',
show_errors: '在出现意外行为时启用显示错误警报',
license: '返回 dhtmlxGantt 的许可证名称',
calendar_property: '更改影响日历绑定到任务/任务组的属性的名称',
prevent_default_scroll: '指定甘特容器是否应该阻止鼠标滚轮事件，或者应该将其传播到窗口元素',
tooltip_offset_y: '设置工具提示位置的顶部（如果为正）偏移',
show_links: '启用/禁用在甘特图中显示链接',
inherit_scale_class: '指定子尺度是否默认使用 scale_cell_class 模板',
scroll_size: '设置垂直（宽度）和水平（高度）滚动的大小',
inline_editors_date_processing: '在编辑任务的开始/结束期间保持任务的持续时间不变',
treeDatastore: '一组 treeDatastore 方法',
select_task: '启用甘特图中的任务选择',
xml: '指定 XML 序列化和解析',
smart_scales: '指定仅在屏幕上呈现时间刻度的可见部分',
wai_aria_attributes: '启用 WA:ARIA 支持以使屏幕阅读器可识别组件',
wheel_scroll_sensitive: '指定鼠标滚轮滚动甘特图的速度',
resource_calendars: '定义一组可以分配给特定资源（例如用户）的工作日历',
external_render: '将外部组件渲染到 DOM 中',
readonly_property: '更改影响任务/链接只读行为的属性的名称',
duration_step: '设置与“duration”数据属性的一个单位对应的“gantt.config.duration_unit”单位数。',
tooltip_timeout: '在显示任务的工具提示之前以毫秒为单位设置超时',
show_markers: '在页面上显示/隐藏标记',
scale_offset_minimal: '将最小比例单位（如果使用多个比例）设置为前导/关闭空白空间的间隔',
ext: '一个存储各种扩展的对象',
min_duration: '设置可以在调整大小期间为任务设置的最短持续时间（以毫秒为单位）。',
keyboard_navigation: '在甘特图中启用键盘导航',
json: '指定 JSON 序列化和解析',
round_dnd_dates: '允许将任务的开始和结束日期四舍五入到最近的刻度线',
grid_resizer_column_attribute: '设置列调整器的 DOM 元素的属性名称。该属性表示列的索引',
locale: '甘特图的当前区域设置对象（特定于区域的标签）',
keys: '定义甘特图的热键',
skip_off_time: '从时间尺度隐藏非工作时间',
auto_types: '自动将带有子任务的任务转换为项目，将没有子任务的项目转换回任务',
time_step: '设置任务时间值的最小步长（以分钟为单位）',
inherit_calendar: '定义任务是否应从其摘要父级继承工作日历',
undo_types: '设置将应用撤消操作的实体类型',
server_utc: '在将数据发送到服务器的同时将服务器端日期从 UTC 转换为本地时区（和向后）',
show_unscheduled: '启用显示未计划的任务',
cascade_delete: '允许的嵌套任务和链接级联删除',
grid_resize: '通过拖动右侧网格的边框来调整网格的大小',
right_work_time: '允许将任务的开始和结束日期调整为工作时间（拖动时）',
min_task_grid_row_height: '设置在调整大小期间可以为任务设置的最小行高',
static_background: '为时间线区域生成背景图像，而不是渲染实际的列和行行',
csp: '定义日期格式化方法代码的内部实现',
link_arrow_size: '设置链接箭头的大小',
resource_store: '指定连接到 resourceGrid/resourceTimeline/resourceHistogram 视图的 dataStore 的名称',
dynamic_resource_calendars: '启用将多个资源日历自动合并为一个',
type_renderers: '重新定义负责显示不同类型任务的函数',
scale_height: '设置时间刻度的高度和网格的标题',
links: '存储链接依赖的类型',
undo: '启用甘特图的撤消功能',
task_attribute: '设置将指定任务的 HTML 元素的 id 的属性的名称',
show_progress: '启用在任务栏中显示进度',
columns: '配置表的列',
initial_scroll: '设置时间线区域是否最初滚动以显示最早的任务',
types: '存储灯箱结构的名称（用于不同类型的任务）',
skin: '返回甘特图的当前皮肤',
Wide_form: '将节及其标签设置在同一行',
link_wrapper_width: '设置对点击敏感的区域的宽度（在链接上）',
highlight_critical_path: '显示图表中的关键路径',
multiselect_one_level: '指定多任务选择将在一个或任何级别内可用',
undo_steps: '设置应由 undo 方法恢复的步骤数',
autofit: '允许将网格的列自动调整为网格的宽度',
open_split_tasks: '通过单击 +/- 按钮启用展开/折叠拆分任务的可能性'
};
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
