本人属于新手,写此文章只是为了锻炼,因为最近在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"