提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:龚雪|2023-08-02 11:29:27.127|阅读 90 次
概述:本文将为大家介绍如何用DHTMLX组件创建JavaScript甘特图,欢迎下载工具体验!
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。甘特图仍然是项目管理应用程序中最需要的工具之一,DHTMLX Gantt组件提供了能提升研发甘特图功能所需的重要工具。
在这篇文章中,您将学习如何添加一个基本的JavaScript甘特图到一个Web应用中,并使用纯JS/HTML/CSS和配置一些常见的功能来管理项目。
在上文中(点击这里回顾>>),我们为大家讲解了如何下载和安装DHTMLX Gantt、Gantt初始化、添加甘特图数据等,本文将继续介绍通用甘特图的配置等,请持续关注哦~
现在是时候向您展示如何配置JavaScript甘特图库中提供的一些核心功能了,本节您将了解如何启用任务的排序和重新排序、内联编辑和自定义任务颜色,下面是你最后应该得到的一个例子:
从对甘特图网格中的排序列进行排序开始,这个功能是通过在甘特图配置中将sort属性的值设置为true来实现的。
gantt.config.sort = true; gantt.init("gantt_here");
最终用户能够按所需的顺序将特定列对网格数据进行排序,只需要单击其标题即可。
或者,这个功能也可以通过sort()方法的API调用来实现。
当处理大量的项目任务时,使用拖放功能垂直重新排序任务是很方便的。
在我们的甘特图中,有一个特殊的分支重新排序模式负责这个功能,它通过将order_branch属性的值设置为true来启用。
gantt.config.order_branch = true; gantt.init("gantt_here");
请注意,它只允许在同一嵌套级别内重新排序任务,即子任务不能移动到父任务的位置。为了消除这个限制,并允许最终用户在任何树级别放置任务,你可以应用order_branch_free选项:
gantt.config.order_branch_free = true;
当在具有大量任务的甘特图中启用分支模式时,可能会导致性能下降。在这种情况下,您可以使用旨在加快速度的标记模式。
gantt.config.order_branch = "marker";
您也可以使用onBeforeTaskMove事件禁止在其他子分支中放置任务:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){ const task = gantt.getTask(id); if(task.parent != parent) return false; return true; });
着色任务是一种简单但有效的方法,可以将用户的注意力集中在特定的任务上,例如您可以对甘特图时间轴中的任务使用不同的颜色来强调他们的优先级。对于我们的甘特图组件,你可以通过应用task_class模板来完成。它返回任务的自定义类名,然后将此名称用作CSS中的选择器,用于添加自定义样式。
<style> body, html { width: 100%; height: 100%; margin: unset; } .red_color { background: red; } .blue_color { background: blue; } .gray_color { background: gray; } .gantt_task_progress { background-color: rgba(33, 33, 33, 0.17); } </style>
gantt.templates.task_class = function (start, end, task) { switch (task.priority) { case "high": return 'red_color' case "medium": return 'blue_color' case "low": return 'gray_color' } }
在本示例中,我们用三种自定义颜色显示任务,它们对应于特定的优先级级别——高、中、低。
内联编辑是一项基本功能,它使最终用户能够动态地在网格区域中引入各种更改。DHTMLX JavaScript甘特库附带了几个内置编辑器,允许更改不同类型的数据,如文本、日期、数字等。
通过编程方式,您必须在列配置中使用editor属性定义所需的编辑器类型。
gantt.config.columns = [ {name: "text", tree: true, width: '*', resize: true, editor: textEditor}, {name: "start_date", align: "center", resize: true, editor: dateEditor}, {name: "duration", align: "center", editor: durationEditor}, {name: "add", width: 44} ];
编辑器对象必须包括type属性(匹配所需的编辑器类型)和map_to属性(指定任务对象的属性,编辑器将在任务对象中存储值),这就是如何为包含文本、日期和任务持续时间的列配置编辑器:
const textEditor = { type: "text", map_to: "text" }; const dateEditor = { type: "date", map_to: "start_date", min: new Date(2023, 0, 1), max: new Date(2024, 0, 1) }; const durationEditor = { type: "number", map_to: "duration", min: 0, max: 100 };
接下来与您分享如何用自动调度等高级功能来补充您的甘特图,应该通过gantt启用auto_scheduling扩展,插件方法:
gantt.plugins({ auto_scheduling: true });
此外,还需要将auto_scheduling属性设置为true:
gantt.config.auto_scheduling = true;
因此,JavaScript甘特图中的所有项目任务都将根据它们之间的关系自动调度,就像这个例子中一样。
正如您所看到的,使用DHTMLX构建JavaScript甘特图的整个过程非常简单,广泛且文档完备的Gantt API使添加生产性项目管理所需的必要功能变得更加容易。DHTMLX Gantt与流行的JavaScript框架兼容,甚至包括一个特殊的Node.js模块,用于在后端管理Gantt。此外,您可以轻松地将甘特组件与其他DHTMLX产品(如Scheduler、看板和To Do List)组合成一个全面的项目管理应用程序。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn
文章转载自:慧都网本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
一个用于构建跨浏览器Web应用和移动应用的强大JavaScript UI库。
DHTMLX Gantt针对您的解决方案的交互式JavaScript / HTML5甘特图
DHTMLX 超值正版套包DHTMLX旗下Diagram、Sute、Pivot、Gantt等插件正版授权合集
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@cahobeh.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢