网站首页 > 基础教程 正文
这篇文章给大家讲解如何在服务器上使用dhtmlxGantt。
在某些情况下,您可能需要与甘特图分开使用dhtmlxGantt的专门逻辑,例如:
- 当您从其他来源(例如来自移动应用程序)接收到任务更新并且需要运行自动调度以更新相关任务的时间时
- 当您有多个可以同时进行更改的同一应用程序的用户,并且您需要同步和验证计划时
- 当您需要使用服务器代码运行计算和分析计划时
出于这个原因,我们提供了一个单独的dhtmlxGantt构建,它可以在Node.js环境中的服务器端运行。
Node.js 的 DHTMLX Gantt 具有与 Commercial/Enterprise/Ultimate 包相同的功能,这意味着Gantt.getGanttInstance方法可用并允许创建甘特图的新实例。
版本控制
dhtmlxGantt适用于Node.js包的版本编号方案与浏览器包相同(例如,v7.0.0 是 Node.js 包的甘特图的第一个版本)。
将库添加到项目中
您可以将Node.js的dhtmlxGantt安装为本地包:
"dependencies": {
"@dhtmlx/gantt-node": "file:../../gantt_7.0.0_node"
...
}
或者您可以直接从您的代码中导入dhtmlxgantt.node.js,如下所示:
import { Gantt } from "@dhtmlx/gantt-node";
const gantt = Gantt.getGanttInstance({
plugins:{
auto_scheduling: true,
},
config: {
work_time: true,
duration_unit: "hour",
auto_scheduling: true,
auto_scheduling_strict: true,
auto_scheduling_initial: false
},
data: {
tasks: [
{ id: 1, text: "Project #1", type: "project", parent: 0 },
{ id: 2, start_date: "05-04-2020 00:00", text: "Task #1", duration: 1,
parent: 1, type: "task" },
{ id: 3, start_date: "05-04-2020 00:00", text: "Task #2", duration: 3,
parent: 1, type: "task" },
{ id: 4, start_date: "05-04-2020 00:00", text: "Task #3", duration: 3,
parent: 1, type: "task" },
{ id: 5, start_date: "05-04-2020 00:00", text: "Task #4", duration: 3,
parent: 1, type: "task" },
{ id: 6, start_date: "05-04-2020 00:00", text: "Task #5", duration: 1,
parent: 1, type: "task" }
],
links: [
{ id: 1, source: 1, target: 2, type: "0" },
{ id: 2, source: 2, target: 3, type: "0" },
{ id: 3, source: 3, target: 4, type: "0" },
{ id: 4, source: 4, target: 5, type: "0" },
{ id: 5, source: 5, target: 6, type: "0" }
]
},
events:{
onAfterAutoSchedule: function(taskId, updatedTasks) {
console.log("Following tasks were auto scheduled:");
console.table(updatedTasks.map((taskId) => {
return {
id: taskId,
text: this.getTask(taskId).text
};
}));
},
onParse: function() {
console.log("Loaded data:")
console.table(this.serialize().data);
},
onGanttReady: () => {
console.log("Running dhtmlxGantt on the backend");
}
}
});
console.table(gantt.serialize());
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容,请锁定本套系列教程。
甘特图控件交流群:764148812 欢迎进群交流讨论
- 上一篇: Web性能的计算方式与优化方案(一)
- 下一篇: js如何实现控制台输出 js控制台输出console
猜你喜欢
- 2024-10-16 「译」你不知道的Chrome调试技巧DAY1-DAY6
- 2024-10-16 Java8 Stream 拼接字符串 Collectors.joining
- 2024-10-16 开发人员要点:JavaScript console methods
- 2024-10-16 前端异常监控和容灾 前端架构师成长之路
- 2024-10-16 高级Web必备:网络优化,拿去镇住面试官
- 2024-10-16 JS 调试心得 前端js调试
- 2024-10-16 这几个JS调试方法知道很受益 js怎么调试
- 2024-10-16 小窍门分享:如何使用Chrome控制台创建表格
- 2024-10-16 10个JavaScript调试技巧,帮你更好、更快地调试代码
- 2024-10-16 5个控制台技巧助你在Chrome开发者工具更好的调试web应用(翻译)
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)