项目管理工具dhtmlxGantt甘特图入门教程（五）：甘特图实例特点

梦里梦外; 2023-09-23 21:08 161阅读 0赞

[DHTMLX][]专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。 遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的顶级Web应用程序框架。

本文重点介绍使用Gantt Instance的主要功能。

**[DhtmlxGantt正版试用下载（qun：764148812）![icon-default.png?t=MBR7][icon-default.png_t_MBR7]https://www.evget.com/product/4213/download][DhtmlxGantt_qun_764148812_icon-default.png_t_MBR7_icon-default.png_t_MBR7_https_www.evget.com_product_4213_download]**

让我们考虑最常见的情况-构建具有多个页面/选项卡/视图的应用程序。

以下方法适用于基于 Angular（或基于 React）的应用程序，并且仅在dhtmlxGantt的商业版、企业版或旗舰版中可用（在 GPL 或个人版中不可用）：

*  当您使用甘特图打开页面/选项卡/视图时，您需要创建一个新的甘特图实例；
 *  当您切换到不同的页面/选项卡/视图时，您需要销毁甘特图实例。

自定义事件

当您使用甘特图加载页面时，您需要在添加事件之前手动将事件的ID保存到数组中：

>     const onTaskClick = gantt.attachEvent('onTaskClick', (id) => {
>         gantt.message(`onTaskClick: Task ID: ${id}`);
>         return true;
>     }, '');
>     eventIDs.push(onTaskClick);

当您切换到另一个页面时，您需要使用已保存到数组的ID手动分离事件：

>     eventIDs.forEach(event => gantt.detachEvent(event));
>     eventIDs = [];

数据处理器

你需要手动销毁dataProcessor：

>     dp.destructor();

请注意，您只需要销毁数据处理器，而不是甘特图。否则，在重新加载页面之前，您将无法使用甘特图。

任务、链接、资源数据、标记、自定义热键

您可以使用clearAll()方法安全地从甘特图实例中删除这些数据。

甘特图配置

没有内置方法可以保存它或将甘特图配置重置为默认配置。 大多数甘特图配置都保存在gantt.config对象中。

CSS

如果您添加了自定义CSS，如果它导致问题，您需要手动删除它。

日历设置

您需要使用gantt.delete Calendar()方法手动删除它们。

其他案例

除了上述几点之外，您可能还需要实现一些其他选项，但目前暂未测试此方法的所有可能场景。

了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我

[DHTMLX]: https://www.evget.com/supplier/520
[icon-default.png_t_MBR7]: https://csdnimg.cn/release/blog_editor_html/release2.2.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=MBR7
[DhtmlxGantt_qun_764148812_icon-default.png_t_MBR7_icon-default.png_t_MBR7_https_www.evget.com_product_4213_download]: https://www.evget.com/product/4213/download