从旧版本迁移
8.0 -> 9.0
v9.0 更新引入了若干重大变更。
皮肤切换为 CSS 变量
CSS 皮肤(主题)已完全重构,现在采用 CSS 变量实现。虽然组件的 HTML 结构和 CSS 类名大部分保持不变,但为旧版本 Gantt 编写的 CSS 样式在 v9.0 中可能无法如预期生效。
例如,以下样式用于根据任务优先级着色:
<style>
/* 覆盖边框/进度颜色的通用样式 */
.gantt_task_line{
border-color: rgba(0, 0, 0, 0.25);
}
.gantt_task_line .gantt_task_progress {
background-color: rgba(0, 0, 0, 0.25);
}
/* 高优先级 */
.gantt_task_line.high {
background-color: #03A9F4;
}
.gantt_task_line.high .gantt_task_content {
color: #fff;
}
/* 中优先级 */
.gantt_task_line.medium {
background-color: #f57730;
}
.gantt_task_line.medium .gantt_task_content {
color: #fff;
}
/* 低优先级 */
.gantt_task_line.low {
background-color: #e157de;
}
.gantt_task_line.low .gantt_task_content {
color: #fff;
}
</style>
从 v9.0 开始,可以 使用以下样式实现相同效果:
<style>
/* 高优先级 */
.gantt_task_line.high {
--dhx-gantt-task-background: #d96c49;
--dhx-gantt-task-color: #fff;
}
/* 中优先级 */
.gantt_task_line.medium {
--dhx-gantt-task-background: #f57730;
--dhx-gantt-task-color: #fff;
}
/* 低优先级 */
.gantt_task_line.low {
--dhx-gantt-task-background: #fff;
--dhx-gantt-task-color: #fff;
}
</style>
可在 스킨 커스터마이제이션 页面查看可用变量。
迁移时很可能需要更新现有 CSS 以达到所需设计效果。
单一 CSS 文件
所有主题现在都集成在一个 dhtmlxgantt.css 文件中。
如需激活特定皮肤,请使用 gantt.skin 属性:
gantt.skin = "material";
或使用 setSkin 方法:
gantt.setSkin("material");
请注意,gantt.setSkin() 会重新渲染 Gantt。
如果你使用的是 terrace 以外的皮肤,迁移步骤如下:
- 替换皮肤的 CSS 文件为
dhtmlxgantt.css文件:
<!-- 旧 -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt_material.css" type="text/css">
<!-- 新 -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt.css" type="text/css">
- 在 JavaScript 中启用所需皮肤:
gantt.setSkin("material");
gantt.init("gantt_here");
内置基线、截止日期和约束支持
此前,添加基线需要通过 gantt.addTaskLayer API 手动实现。从 Gantt 9.0 起,已内置对基线实体、截止日期和任务约束的支持。
如果需要关闭默认设置,手动渲染基线和截止日期,可以使用相关配置项:baselines 与 deadlines:
// 禁用内置基线功能
gantt.config.baselines = false;
// 禁用内置截止日期功能
gantt.config.deadlines = false;
任务约束的内置显示也可通过扩展的 auto_scheduling 配置关闭:
gantt.config.auto_scheduling = {
enabled: true,
show_constraints: false /*!*/
};
这样会关闭任务约束的默认显示,但仍保留自动调度功能。
时间线中的粘性标签
自 v9.0 起,时间刻度标签默认为粘性。即标签在滚动时始终可见,直到自然滚动出视口。在旧版本中,标签居中显示在单元格内,滚动时不会保持可见。
如需恢复旧行为并禁用粘性标签,可将 scale 对象的 sticky 属性设为 false:
gantt.config.scales = [
{unit: "year", step: 1, format: "%Y", sticky: false},
{unit: "month", step: 1, format: "%F", sticky: false},
{unit: "day", step:1, format: "%j", sticky: false}
];
Promise 实现
Bluebird 库已从 Gantt 包中移除。Promise 现在使用原生 Promise 实现。
Lightbox 调整大小
自 v9.0 起,resizeLightbox 方法已弃用并从 Gantt 代码中移除。现在 lightbox 的尺寸调整已自动实现,无需手动调用。 请注意,如果你的配置中包含 resizeLightbox() 方法,应将其移除以避免报错。
7.1 -> 8.0
资源分配
在早期版本的 DHTMLX Gantt 中,资源分配的变更作为任务对象的属性发送到后端,这在某些情况下使后端 API 集成变得更复杂。
从 DHTMLX Gantt v8.0 起,对资源及资源分配的变更可通过 dataProcessor 路由。详见 Routing CRUD actions of resources and resource assignments 部分。
导出服务
自 v8.0 起,导入/导出功能已集成到 gantt 库中。
因此,如果你已在页面中包含 https://export.dhtmlx.com/gantt/api.js 以启用在线导出服务,例如:
<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
则需移除该文件,并通过 gantt.plugins 方法启用 export_api 扩展:
gantt.plugins({
export_api: true
});
已弃用的类名
自 v8.0 起,以下已弃用的类名被移除并替换为新的类名:
- ".dhtmlx-info" -> ".gantt-info"
- ".dhtmlx-error" -> ".gantt-info"
- ".dhtmlx_popup_title" -> ".gantt_popup_title"
- ".dhtmlx_popup_text" -> ".gantt_popup_text"
- ".dhtmlx_popup_controls" -> ".gantt_popup_controls"
- ".dhtmlx_ok_button" -> ".gantt_ok_button"
- ".dhtmlx_click_me_button" -> ".gantt_click_me_button"
- ".dhtmlx_popup_button" -> ".gantt_popup_button"
- ".dhtmlx_modal_box" -> ".gantt_modal_box"
- ".dhtmlx-" + config.type -> ".gantt-" + config.type
- ".dhtmlx_" + btn.label.toLowerCase() + "button" -> **".gantt" + btn.label.toLowerCase() + "_button"**
7.0 -> 7.1
7.1 版本未引入任何需要修改现有代码的重大变更。
里程碑渲染方式有细微视觉变化,如有需要可通过代码还原。对于使用资源面板的大型项目,由于资源分配新逻辑,可能会出现性能下降问题,可通过禁用不需要的逻辑进行优化。
里程碑
与旧版本相比,里程碑元素的尺寸已更改,使其高度与常规条形一致。
如需让里程碑外观与旧版本一致,可通过 bar_height 属性调整里程碑元素高度:
{
id:23, text:"Mediate milestone", start_date:"13-04-2018",
type:"milestone", parent:"15", bar_height: 35
}
资源分配
7.1 版本为资源分配增加了复杂逻辑,允许指定资源分配的日期,并可通过 DataStore 操作资源分配。 该更改不会影响现有代码,但可能会对资源计算带来明显性能开销。
如果不需要为任务的特定日期分配资源,可通过 process_resource_assignments 配置关闭新功能以提升性能:
gantt.config.process_resource_assignments = false;
任务对象的新可选属性
以下任务对象属性现在被 gantt 处理,并影响任务显示:
- "task.row_height"
- "task.bar_height"
- "task.hide_bar"
- "task.rollup"
如果你有同名的自定义属性,请重命名以避免冲突。
数据解析时的深拷贝
Gantt 在 v6.3.2 到 v7.1 期间在数据解析时会深拷贝数据对象。
从 v7.1 起,该功能默认禁用。
可通过设置 gantt.config.deepcopy_on_parse 为 true 启用旧行为:
gantt.config.deepcopy_on_parse = true;
已弃用的配置项
自 v7.1 起,gantt.config.task_height 属性已弃用。尽管该属性仍可用,且如指定会继续生效,建议使用新的 gantt.config.bar_height 选项:
gantt.config.bar_height = 50;