本人属于新手，写此文章只是为了锻炼，因为最近在wex5中用到dhtmlxGantt甘特图，所以就写了这篇文章，因为当时我也是第一次使用，网上找到的都是跟平台无关的，所以就写此文章，希望能帮上第一次用平台来使用dhtmlxGantt的人，本章只适用于bex5或者wex5中(下一篇关于dhtmlxGantt甘特图的一些设置)
第一步：下载dhtmlxGantt代码包
下载dxhtmlGantt代码包，解压后会得到两个文件夹codebase和samples。
下载地址：https://dhtmlx.com/docs/products/dhtmlxGantt/#licensing
文档地址：https://docs.dhtmlx.com/gantt/api__refs__gantt.html
第二步：在平台中引用代码
本章使用的是wex5，把代码包codebase复制到wex5中的随便一个自己写的目录下，然后创建一个.w文件，该文件随便在哪个目录下都行。创建好了之后，就可以在页面中引用代码包了，主要引用有两个 dhtmlxgantt.js 和 dhtmlxgantt.css ，把这两个引用进去之后就可以初始化界面了
require("$UI/ProjectManagePC/common/codebase/dhtmlxgantt");//可参考，路径设置成自己的就行
require("css!$UI/ProjectManagePC/common/codebase/dhtmlxgantt").load();//同上
第三步：初始化dhtmlxGantt
引用之后在.w中拖一个div过来，给一个class “gantt_here”，然后进入modelLoad方法中初始化dhtmlxGantt。gantt.init(".gantt_here"); // 初始化任务。初始化之后的页面是没有数据的，所以接下来我们加载数据
第四步：加载静态数据
var tasks={
data:[
{id:1, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.6, open:true},
{{id:2, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:1, open:true},
{id:3, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.5, open:true},
{id:4, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.5, open:true},
{id:5, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:1, open:true},
{id:6, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.6, open:true}
],
links:[
{id:1, source:1, target:2, type:"1"},
{id:2, source:1, target:3, type:"1"},
{id:3, source:3, target:4, type:"1"},
{id:4, source:4, target:5, type:"0"},
{id:5, source:5, target:6, type:"0"}
]
};
此为静态数据，可用于测试用
代码可直接引用，我们想要把数据加载进去，需要用到parse方法
gantt.config.xml_date = "%Y-%m-%d";// 设置时间格式，和html中设置时间格式一样
gantt.init(".gantt_here");// 初始化任务
gantt.parse(tasks);// 此方法用来加载数据
第五步：加载动态数据
以上是简单测试甘特图的，接下来我们加载动态数据，以下均为我个人所写方法，如有人有更简单的方法可以告诉我哦
当然之前先创建数据库，其中必要字段有
// 注意：links数据存储时，别存错，存错就会出现两条数据出现联系
// ● data - 定义甘特图中的任务
// ○ id - (string, number)任务id
// ○ start_date - (Date)任务开始日期
// ○ text - (string)任务描述
// ○ progress - (number) 任务完成度，0到1
// ○ duration - (number) 在当前时间刻度下的任务持续周期
// ○ parent - (number) 父任务的id
// ● links - 定义甘特图中的任务关联线
// ○ id - (string, number) 关联线id
// ○ source - (number) 数据源任务的id (父菜单ID)
// ○ target - (number) 目标源任务的id (本身ID)
// ○ type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束”
至于其他字段可根据自己需要来添加，数据库中名字可以不同于甘特图中的字段
以下展示具体代码
var tas = this.comp("taskData"); //任务数据
var tasrel = this.comp("taskRelData"); //任务关联线数据var tasks = {// 定义任务
data : [],// 任务数据
links : []// 关联线
};tas.each(function(param) {// 循环添加数据给tasks，data
tasks.data.push({
id : param.row.val('fID'),
text : param.row.val('fName'),
start_date : param.row.val('fPlanStartDate'),
duration : param.row.val('fPredictDate'),
progress : 0,
parent : param.row.val('fParentID'),
personID : uname,
open : true
});});
tasrel.each(function(param) {// 循环添加数据给tasks，links
tasks.links.push({
id : param.row.val('fID'),
source : param.row.val('fParentID'),// 父ID
target : param.row.val('fTaskID'),// 本身ID
type : 0
});});
gantt.config.xml_date = "%Y-%m-%d";// 设置时间格式
gantt.init(".gantt_here");// 初始化任务
gantt.parse(tasks);// 加载数据
以上均为动态加载数据
第六步：基本设置以及一些事件处理
上面展示数据之后只是开始，这里我们来说说如何完成基本的增删改操作以及一些基本设置，以下代码展示。
此为初始化列，根据自己需要来添加展示列，必须在gantt.init方法之前，内有编辑器，可根据自己需要是否添加
// var textEditor = {type: "text", map_to: "text"};编辑器
gantt.config.columns = [ {// 初始化列
name : "text", //自定义字段
label : "任务名称", //用于界面展示的名称
tree : true,
width : '*', //为*是自适应宽度
// editor: textEditor //调用上面定义好的编辑器(必须先定义，然后才能在下面引用，可自己查看dhtmlxGantt文档)，
}, {
name : "start_date",
label : "开始时间",
align : "center",
width : '70'
}, {
name : "duration",
label : "预计时间",
align : "center",
width : '70'
}, {
name : "personID",//此为我自己添加的字段
label : "被指派人",
lign : "center",
width : '70'
}, {
name : "add",//此为展示添加按钮(+)，去掉则不显示
label : ""} ];
此为中文翻译，可把英文界面转换为中文界面，也在gantt.init方法之前，代码可直接引用，之所以这么做是因为，里面的中文js(codebase/locale/locale_cn.js)与平台可能有点冲突，引用了没有效果，所以只能用代码来改了
gantt.locale = {//中文转换
date : {
month_full : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
month_short : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ],
day_full : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ],
day_short : [ "日", "一", "二", "三", "四", "五", "六" ]
},
labels : {
new_task : "新任務",
dhx_cal_today_button : "今天",
day_tab : "日",
week_tab : "周",
month_tab : "月",
new_event : "新建日程",
icon_save : "保存",
icon_cancel : "关闭",
icon_details : "详细",
icon_edit : "编辑",
icon_delete : "删除",
confirm_closing : "请确认是否撤销修改!", // Your changes will be lost,
// are your sure?
confirm_deleting : "是否删除日程?",
section_description : "描述",
section_time : "时间范围",
section_type : "类型",/* grid columns */
column_wbs : "工作分解结构",
column_text : "任务名",
column_start_date : "开始时间",
column_duration : "持续时间",
column_add : "",/* link confirmation */
link : "关联",
confirm_link_deleting : "将被删除",
link_start : " (开始)",
link_end : " (结束)",type_task : "任务",
type_project : "项目",
type_milestone : "里程碑",minutes : "分钟",
hours : "小时",
days : "天",
weeks : "周",
months : "月",
years : "年",/* message popup */
message_ok : "OK",
message_cancel : "关闭"
}
};
此为设置x轴时间样式
gantt.config.date_scale = "%d"; //可自己根据名字去文档搜索查看
gantt.config.subscales = [ {
unit : "month",
step : 1,
date : "%F, %Y"
} ];
此为一些基本事件，可完成增删改，代码可放在gantt.init方法之后，任务相关事件可自己参考文档，里面的id为当前任务id，可直接使用，以下代码仅供参考
//为任务save保存之后事件，点击+按钮即可添加数据
gantt.attachEvent('onAfterTaskAdd', function(id, task) {
var t = gantt.getTask(id); //获得任务对象
tas.newData();
tas.setValue("fName", t.text);
tas.setValue("fPredictDate", t.duration);
tas.setValue("fPlanStartDate", t.start_date);
tas.setValue("fPlanEndDate", t.end_date);
tas.saveData();
gantt.clearAll(); //此为清除甘特图所有任务和关联线以下为保存事件 事件之后重新加载数据并初始化，你们可以自己试试提取方法，就不用这么麻烦了，我这边就直接写在里面了
var tasks = {// 定义任务
data : [],// 任务数据
links : []
// 关联线
};tas.each(function(param) {// 循环添加数据给tasks
tasks.data.push({
id : param.row.val('fID'),
text : param.row.val('fName'),
start_date : param.row.val('fPlanStartDate'),
duration : param.row.val('fPredictDate'),
progress : 0,
parent : param.row.val('fParentID'),
personID : uname,
open : true
});});
tasrel.each(function(param) {// 循环添加数据给tasks
tasks.links.push({
id : param.row.val('fID'),
source : param.row.val('fParentID'),// 父ID
target : param.row.val('fTaskID'),// 本身ID
type : 0
});});
gantt.config.xml_date = "%Y-%m-%d";// 设置时间格式
gantt.init(".gantt_here");// 初始化任务
gantt.parse(tasks);// 加载数据});
// 修改任务之后的事件
gantt.attachEvent("onAfterTaskUpdate", function(id, item) {
var t = gantt.getTask(id);// alert(t.start_date);
tas.setValueByID("version", tas.getValueByID("version", id) + 1, id);
tas.setValueByID("fName", t.text, id);
tas.setValueByID("fPredictDate", t.duration, id);
tas.setValueByID("fPlanStartDate", t.start_date, id);
tas.setValueByID("fPlanEndDate", t.end_date, id);
// tas.setValue("fDesPersonID", localStorage.getItem("userID"));
// tas.setValueByID("fProjectID", me.comp("select1").val(),id);tas.saveData();
});
// 删除任务事件
gantt.attachEvent("onAfterTaskDelete", function(id, item) {var row = tas.getRowByID(id);
var rowr = tasrel.getRowByID(id);
tas.deleteData(row);tasrel.deleteData(rowr);
});
var tid;// 用于限制刷新次数
// 任务单机行时刷新任务数据
gantt.attachEvent("onTaskRowClick", function(id, row) {if (tid == id) {// 判断值只刷新一次
} else {
tas.filters.clear();
tas.setFilter("filter", "fID='" + id + "'");
tas.refreshData();
tid = id;
}});
以下为展开和收缩方法
/**
* description:展开
*/
Model.prototype.button1Click = function(event) {gantt.eachTask(function(task) {
task.$open = true;// 打开分支
});
gantt.render();};
/**
* description:收缩
*/
Model.prototype.button3Click = function(event) {gantt.eachTask(function(task) {
task.$open = false;// 关闭分支
});
gantt.render();
};
以上就是本章所有了，至于甘特图如何查询定位就需要你们自己去思考了，如果有好的意见可以告诉我哦