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

news2024/9/20 0:56:53

dhtmlxGantt 是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件应用程序的所有需求,有很完善的甘特图图表库。当您使用 dhtmlxGantt 开发应用程序时,您需要做的第一件事就是初始化,或者简单地说,就是在页面上显示甘特图。

DhtmlxGantt正版试用下载(qun:764148812)icon-default.png?t=M85Bhttps://www.evget.com/product/4213/download

要在页面上显示基本甘特图,请执行 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相关内容和资讯,欢迎加入我们(文章前部分社群)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/62223.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

浅谈 volatile

1.简介 volatile 在Java日常开发中,尤其是并发编程中,是一个高频使用的关键字,它提供了一种轻量级的同步机制(常用于和synchronized比较),用来修饰成员变量。volatile 具有如下两大特性: 1. 保证内存可见性2. 禁止指令重排序 volatile 无法保证原子性。 2.内存可见性 我们先…

HTTP 长连接和 TCP 长连接有什么区别

目录 一、HTTP 的 Keep-Alive 二、TCP 的 Keepalive 三、总结 事实上&#xff0c;这两个完全是两样不同东西&#xff0c;实现的层面也不同&#xff1a; HTTP 的 Keep-Alive&#xff0c;是由应用层&#xff08;用户态&#xff09; 实现的&#xff0c;称为 HTTP 长连接&#x…

简约的博客网页制作 大学生个人博客网页设计模板 学生个人网页成品 DIV简单个人网站作品下载 静态HTML CSS个人网页作业源代码

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

【翻译】Domain Enhanced Arbitrary Image Style Transfer via Contrastive Learning

文章目录ABSTRACT1 INTRODUCTION2 RELATED WORK3 METHOD3.1 Multi-layer Style Projector3.2 Contrastive Style Learning3.3 Domain Enhancement3.4 Network Training4 EXPERIMENTS4.1 Qualitative Evaluation4.2 Quantitative Evaluation4.3 Ablation Study5 CONCLUSION AND …

装饰模式Decorator

1.意图&#xff1a;动态地给一个对象添加一些额外的职责。就增加功能而言&#xff0c;Decorator模式比生成子类更加灵活。 2.结构 Component定义一个对象接口&#xff0c;可以给这些对象动态地添加职责&#xff1b; ConcreteComponent定义一个对象&#xff0c;可以给这个对象…

[附源码]JAVA毕业设计六如文学网站(系统+LW)

[附源码]JAVA毕业设计六如文学网站&#xff08;系统LW&#xff09; 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a;…

康力源在创业板提交注册:预计全年收入同比下滑,衡墩建持股98%

12月4日&#xff0c;江苏康力源体育科技股份有限公司&#xff08;下称“康力源”&#xff09;在深圳证券交易所创业板提交招股书&#xff08;注册稿&#xff09;。据贝多财经了解&#xff0c;康力源于2021年11月12日在创业板递交招股书&#xff0c;2022年8月11日获得上市委会议…

螺旋矩阵||真的很有趣!(蓝桥杯宝贝们看过来)

献丑了&#xff0c;画了个图&#xff0c;如果图看不同&#xff0c;没关系&#xff0c;我们还有注释 class Solution { public:vector<vector<int> > generateMatrix(int n) {vector<vector<int> >num(n,vector<int>(n,0)); int startX0,startY0;…

向黑客精神致敬!

不是第一次想在一个特殊的时间写点什么&#xff0c;但是每次都是刚写了几个字就又停下来&#xff0c;有什么好说的呢&#xff1f;既然整个行业都是说的多&#xff0c;做的少&#xff0c;我们不如更多的踏实做点事情比较好&#xff0c;所以又把编辑器关掉。 但这次还是希望能和大…

Java 最常见的800道面试题,老话说:临阵磨枪,不快也光,涨薪指日可待

前言 春招&#xff0c;秋招&#xff0c;社招&#xff0c;我们 Java 程序员的面试之路&#xff0c;是挺难的&#xff0c;过了 HR&#xff0c;还得被技术面&#xff0c;鄙人在去各个厂面试的时候&#xff0c;经常是通宵睡不着觉&#xff0c;头发都脱了一大把&#xff0c;还好最终…

kubernetespod控制器详解2与service详解1

kubernetespod控制器详解2与service详解1 Horizontal Pod Autoscaler(HPA) Kubernetes期望可以实现通过监测Pod的使用情况&#xff0c;实现pod数量的自动调整&#xff0c;于是就产生了Horizontal Pod Autoscaler&#xff08;HPA&#xff09;这种控制器。 HPA可以获取每个Pod利…

【并发】J.U.C之Java锁

java锁 锁的种类和特点 无锁/偏向锁/轻量级锁/重量级锁 这四种锁是指锁的状态&#xff0c;专门针对synchronized的。在介绍这四种锁状态之前还需要介绍一些额外的知识。 首先为什么Synchronized能实现线程同步&#xff1f; 在回答这个问题之前我们需要了解两个重要的概念&a…

室外定位:高精度北斗RTK定位技术

北斗RTK定位技术&#xff0c;也称北斗差分定位技术&#xff0c;利用我国自主研发的北斗卫星定位系统实现精确定位功能。定位精度可根据需要&#xff0c;通过选择不同精度的人员定位终端来实现。 在科技强国的战略驱动下&#xff0c;北斗RTK定位技术迎来了广阔的发展机遇&#x…

【无锁队列】无锁CAS_无锁队列

1 引言 锁是解决并发问题的万能钥匙&#xff0c;可是并发问题只有锁能解决吗&#xff1f; 2 什么是CAS&#xff1f; ⽐较并交换(compare and swap, CAS)&#xff0c;是原⼦操作的⼀种&#xff0c;可⽤于在多线程编程中实现不被打断的数据交换操作&#xff0c;从⽽避免多线程…

[附源码]计算机毕业设计基于Springboot的专业技能认证系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Thread类的常用方法

目录 1.Thread类常用的构造方法 2.Thread类的几个常见属性 2.1 什么是守护线程?isDaemon 2.2线程是否存活 isAliye() 3.终止线程的方法 3.1使用共享标志位通知中断线程 3.2使用Thread自带的标志位通知 4.等待线程 join 5.获取当前线程的引用 6.休眠当前线程 Thread …

Java安全--篇2-类的动态加载

类的动态加载 首先我们来了解一下构造代码块和静态代码块&#xff1a;Java中静态代码块、构造代码块、构造函数、普通代码块 - YSOcean - 博客园 // 静态代码块 static {System.out.println("静态代码块"); }// 构造代码块 {System.out.println("构造代码块&q…

使用Jetpack组件Navigation实现Android开发中页面跳转

使用Jetpack组件Navigation实现Android开发中页面跳转 ​目录 一、前言 1.概述 2.导航图的创建&#xff08;官网&#xff09; 二、基本使用 1.依赖配置 2.具体实例&#xff1a;使用Navigation实现页面的跳转。 2.1.class的创建 2.2 、页面布局文件的创建 2.3 向 Acti…

Abaqus血管支架仿真攻略之几何创建与网格划分

作者&#xff1a;江丙云&#xff0c;仿真秀平台优秀讲师 前不久&#xff0c;笔者推送的冠脉支架的参数化建模和优化、Abaqus网格卷曲WrapMesh&#xff0c;冠脉支架的参数化建模和优化&#xff0c;以及Abaqus疲劳分析|Goodman插件等原创文章后&#xff0c;后台留言的读者众多&a…

GDP-海藻糖,5‘-鸟苷二磷酸岩藻糖,GDP-fucose ,CAS:15839-70-0

产品名称&#xff1a;GDP-海藻糖&#xff0c;5-鸟苷二磷酸岩藻糖&#xff0c;二磷酸鸟苷岩藻糖&#xff0c;GDP-L-岩藻糖 英文名称&#xff1a;GDP-fucose&#xff0c;Guanosine 5-diphosphate-L-fucose disodium salt CAS&#xff1a;15839-70-0 Mol. Formula C16H23N5O…