[dhtmlxGant(甘特图)开发手册]第二篇——初始化、基本设置以及基本功能
1.简介
本文将介绍如何在页面中初始化一个 dhtmlxGantt 对象，这是进行所有后续工作的前提。
2.初始化
在页面中初始化甘特图
———————————————————————————————————————————————————————-
初始化工作分3步：
1. 在页面中引入 dhtmlxGantt 代码文件。
2. 在页面中创建一个 DIV 容器。
3. 使用init方法初始化 dhtmlxGantt 对象，本方法的参数为容器的ID或者容器的DOM对象。
例子
<!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>引入dhtmlxGantt文件
———————————————————————————————————————————————————————-
需要在页面中引入下列两个文件：
- dhtmlxgantt.js
- dhtmlxgantt.css
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">这些文件都包含在我们之前下载的文件包里面，这里，我们来介绍一下文件包里面的基本内容：
- sources - 代码库的源文件，这些文件都未压缩，易于阅读。这些文件主要用来调试组件。
- samples - 代码示例。
- docs - 各个组件的详细文档资料。
- codebase - 代码库打包后的代码文件。这些文件体积小了很多，主要在实际产品中使用。我们需要使用的文件就来自于这个文件夹。
全屏模式
———————————————————————————————————————————————————————-
为了让全屏模式能够兼容不同浏览器，我们需要在页面中定义如下style:
<style type="text/css" media="screen"> html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; } </style>3.在NuGet或者Bower上安装dhtmlxGantt
你可以通过NuGet或者Bower来在你的项目中安装dhtmlxGantt。
![[dhtmlxGant(甘特图)开发手册]第二篇——初始化、基本设置以及基本功能_第1张图片](http://img.e-com-net.com/image/info5/3a8819359405484e9bc06d81a268ce40.jpg)
NuGet
———————————————————————————————————————————————————————-
通过如下指令可以在NuGet中安装dhtmlxGantt：
nuget install DHTMLX.Gantt如果你在使用 Microsoft Visual Studio，你可以运行 Package Manager Console，输入如下指令即可：
install-package DHTMLX.Gantt也可以在Nuget管理程序中搜索 DHTMLXGANTT 即可。
Bower
———————————————————————————————————————————————————————-
在Bower中安装dhtmlxGantt，运行以下命令行：
bower install gantt4.探索参数设置的方法
dhtmlxGantt提供了两个对象来方便我们对甘特图的外观等等进行设置：
- gantt.config - 日期、时间刻度、控件等等的设置选项。
- gantt.templates - 设置甘特图中用到的关于时间、刻度等等的模板。
gantt.config 对象
———————————————————————————————————————————————————————-
所有的参数选项都定义在 gantt.config对象中，只需要按照文档中介绍的方式来书写参数设置，我们就能获得预期的效果。
注意，参数设置的代码应该书写在甘特图初始化之前。
gantt.config.scale_unit = "year";
gantt.config.step = 1;
gantt.config.date_scale = "%Y";
gantt.init("gantt_here");gantt.config 的详细文档
例子——Month view
gantt.templates对象
———————————————————————————————————————————————————————-
模板可以用来改变日期、标签的呈现效果。只需要按照文档中介绍的方式来书写代码，我们就能获得预期的效果。
注意，定义模板的代码应该书写在甘特图初始化之前。
gantt.templates.task_text=function(start,end,task){
return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.users;
};
gantt.init("gantt_here");![[dhtmlxGant(甘特图)开发手册]第二篇——初始化、基本设置以及基本功能_第2张图片](http://img.e-com-net.com/image/info5/b65f6cc11c824c6d879507ea8938dafc.png)
gantt.templates 的详细文档
例子—— Styling task bars with events
5.处理事件Events
事件(Events)能够帮助页面与用户之间互动，提高用户体验。当用户在甘特图中进行一些操作的时候，dhtmlxGantt会调用一些事件，你可以用这些事件来监测用户的行为，并且书写自定义代码。
添加事件Events
———————————————————————————————————————————————————————-
添加事件处理器需要用到attachEvent方法。
gantt.attachEvent("onTaskClick", function(id, e) {
alert("You've just clicked an item with id="+id);
});注意：
- 事件的名称大小写敏感
- 可以为同一个事件添加多个处理器
例子——D’n’D Events
移除事件Events
———————————————————————————————————————————————————————-
移除某事件处理器，需要用到detachEvents方法：
//A general way to attach/detach the event handler
//to attach event
var eventId = gantt.attachEvent("onTaskClick", function(id, e) {
alert("You've just clicked an item with id="+id);
});
//to detach event
gantt.detachEvent(eventId);移除所有事件处理器，需要用到detachAllEvents方法：
gantt.attachEvent("onTaskClick", function(id, e) {
alert("You've just clicked an item with id="+id);
});
gantt.attachEvent("onTaskDblClick", function(id, e) {
alert("You've just double clicked an item with id="+id);
});
gantt.detachAllEvents();检查事件处理器是否存在
———————————————————————————————————————————————————————-
检查某个事件是否添加了事件处理器，可以用checkEvent方法：
gantt.attachEvent("onTaskClick", function(id, e) {
alert("You've just clicked a task with id="+id);
});
gantt.checkEvent("onTaskClick"); //returns 'true'可以取消的事件
———————————————————————————————————————————————————————-
所有以‘onbefore’开头的事件均可以被取消，让合适的处理器返回false既可以取消某些事件。
gantt.attachEvent("onBeforeTaskChanged", function(id, mode, old_task){
var task = gantt.getTask(id);
if(mode == gantt.config.drag_mode.progress){
if(task.progress < old_task.progress){
dhtmlx.message(task.text + " progress can't be undone!");
return false; }
}
return true;
});例子——D’n’D Events
在处理器内部访问dhtmlxGantt对象
———————————————————————————————————————————————————————-
通过关键字this，我们可以在处理器内部访问gantt对象：
gantt.attachEvent("onTaskClick", function(id, e){
parentId = this.getTask(id).parent;
});6.使用JQuery初始化dhtmlxGantt
如果你使用了JQuery框架，同样可以采用JQuery的语法来初始化dhtmlxGantt对象：
$(".mygantt").dhx_gantt({
data:demo_tasks,
scale_unit:"year",
step:1,
date_scale:"%Y"
});
$("#gantt1").dhx_gantt().parse(tasksA);
<div class="mygantt" id='gantt1' style='width:100%; height:30%;'></div>注意：
- “.mygantt”- 盛放dhtmlxGantt对象的容器的CSS选择器。
- dhx_gantt() - 初始化dhtmlxGantt的方法。方法参数列表如下
○ data - (object)为甘特图提供数据源的数据集
○ scale_unit，step，date_scale - 任何其他的参数也可以通过这样的方式设置(不过通常通过gantt.config.{option}的方式来设置)