项目管理工具dhtmlxGantt入门教程(二):初始dhtmlxGantt(上)

当您使用 dhtmlxGantt 开发应用程序时,您需要做的第一件事就是初始化,或者简单地说,就是在页面上显示甘特图。

DHTMLX Gantt官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都

要在页面上显示基本甘特图,请执行 3 个步骤:

  1. 在页面上包含dhtmlxGantt 代码文件。
  2. 在页面上创建一个 DIV 容器。
  3. 使用init方法在新创建的容器中初始化 dhtmlxGantt 。作为参数,该方法采用将在其中显示甘特图的 HTML 容器(或其 id)。
<!DOCTYPE html><html><head>   <script src="codebase/dhtmlxgantt.js"></script>   <link href="codebase/dhtmlxgantt.css" rel="stylesheet"></head><body> <div id="gantt_here" style='width:1000px; height:400px;'></div>    <script type="text/javascript">        gantt.init("gantt_here");    </script></body></html>

如何将甘特图源文件添加到项目中

您可以通过多种方式将甘特代码文件添加到您的项目中,具体取决于您创建的应用程序的类型:

  • 通过 <script> 标签包含文件
  • 将文件导入 ES6/7 和 TypeScript 应用程序
  • 将文件包含到基于 RequireJS 的应用程序中
  • 通过 <script> 标签包含文件

    dhtmlxGantt 需要在页面上包含 2 个代码文件:

  • dhtmlxgantt.js
  • dhtmlxgantt.css
  • <script src="codebase/dhtmlxgantt.js"></script><link href="codebase/dhtmlxgantt.css" rel="stylesheet">

    让我们快速浏览一下 dhtmlxGantt 包的结构,找出在哪里查找文件。

    构成 dhtmlxGantt 包的主要文件夹和文件有:

  • sources – 库的源代码文件。这些文件未缩小且易于阅读。该软件包主要用于组件的调试。
  • 示例- 代码示例。
  • docs – 组件的完整文档。
  • codebase – 库的打包代码文件。这些文件的大小要小得多,旨在用于生产。在您的应用程序中,您需要使用此文件夹中的文件。
  • 将文件导入 ES6/7 和 TypeScript 应用程序

    使用以下命令导入文件:

    import { gantt } from 'dhtmlx-gantt';

    对于 Commercial、Enterprise 或 Ultimate 版本,命令如下所示:

    import { gantt, Gantt } from 'dhtmlx-gantt';

    dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容,请锁定本套系列教程。

    声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

    上一篇 2022年8月19日
    下一篇 2022年8月19日

    相关推荐