dhtmlxgantt异步读取数据库数据

dhtmlxgantt插件制作甘特图

本文是根据需求需要我去做甘特图，所以研究了一下，甘特图制作有很多种方法，其中JQuery.ganttView显示数据十分简单，只需要导入相应的JS即可，但是对于需要能够修改的甘特图来说不满足我的需求，所以采用dhtmlx；特别的痛苦就是网上关于甘特图的实例介绍十分的少，所以刚开始学习的时候，心情可想而知，为了避免其他跟我一样的人感受我这种痛苦，所以我写了这篇随笔，记录我学习甘特图的代码，以及我实现异步读取本地数据，并显示在甘特图的心得。

注意：
本篇中保存数据到数据表为曲线救国之策，后来经过我仔细研究了一下，官方提供的dhtmlxgantt.js源码，已经有了更好的保存修改的数据到数据表的方法，请看本人dhtmlxgantt甘特图保存篇。
https://blog.csdn.net/weixin_42803027/article/details/82495191

dhtmlxgantt

首先，最重要的就是先去下载dhtmlxgantt插件的代码包!解压之后，将dhtmlxgantt.js和dhtmlxgantt.css拷到你的项目中，如果你想要鼠标放在进度条上有显示框显示数据的话就将dhtmlx_tooltip.js也拷到项目中，再引入JSP文件中，不要忘了如果你想要显示中文还得引入locale_cn.js中文格式，代码如下

代码块

   <script src="${ctxStatic}/dhtmlx/dhtmlxgantt.js"></script><link id="skin" rel="stylesheet"    href="${ctxStatic}/dhtmlx/css/dhtmlxgantt.css"><script src="${ctxStatic}/dhtmlx/dhtmlxgantt_tooltip.js"></script><script src="${ctxStatic}/dhtmlx/locale/locale_cn.js"></script>

甘特图实现JS代码

在实现之前，你需要现在数据库中建两张表，表的属性为：id,start_date,text,progress,duiration,parent;至于open=true你只需要在JS中赋值就可以了，第二张表属性：id,target,source,type，至于这些属性是什么我已经在代码注释中详细介绍了，在这里就不赘述了，上代码

<script>/*注意：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 - “结束到结束” */gantt.config.scale_unit = "day";//设置时间坐标轴单位gantt.config.date_scale = "%l, %F %d";//设置x轴的日期格式gantt.config.min_column_width = 20;//设置列最小宽度gantt.config.scale_height = 20 * 3;//设置甘特图的表头高度gantt.templates.task_cell_class = function (task, date) {if (date.getHours() == 8) {return "day_start";}if (date.getHours() == 18) {return "day_end";}return "";};var weekScaleTemplate = function (date) {var dateToStr = gantt.date.date_to_str("%d %M");var weekNum = gantt.date.date_to_str("(week %W)");var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");return dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date);};
//设置子坐标轴，将会在时间轴X的下面新增一行或多行坐标轴X（只不过单位粒度不一样），
//新增行数取  决于数组的长度，即数组每一项表示一行gantt.config.subscales = [//  {unit:"month", step:1, date:"%F, %Y"},{unit: "week", step: 1, template: weekScaleTemplate},{unit: "hour", step: 1, date: "%G"}];gantt.ignore_time = function (date) {if (date.getDay() == 0 || date.getDay() == 6)return true;if (date.getHours() < 8 || date.getHours() > 18)return true;return false;};gantt.attachEvent("onGanttReady", function(){gantt.config.buttons_left = ["gantt_save_btn","gantt_cancel_btn","complete_button"];   gantt.config.buttons_right = ["gantt_delete_btn"];               }); gantt.init("gantt_here");var tasks={data:[],links:[]};$.get("${ctx}/dhtmlx/gantt/scheduling",function(json){for(var i = 0;i<json.data.length;i++){tasks.data.push({id: json.data[i].id,text: json.data[i].text,start_date: json.data[i].startDate,duration:json.data[i].duration,progress: json.data[i].progress,open:true});         }for(var i = 0;i<json.links.length;i++){tasks.links.push({id: json.links[i].id,source: json.links[i].source,target: json.links[i].target,type:json.links[i].type});}gantt.parse(tasks);});//新增按钮的实现gantt.attachEvent("onLightboxButton", function(button_id, node, e){if(button_id == "complete_button"){var id = gantt.getState().lightbox;var task = gantt.getTask(id);var d = new Date(task.start_date);  task.update_date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); console.log(task.update_date);$.post("${ctx}/dhtmlx/gantt/save",task,function(json){console.log(json.status);},"json");gantt.updateTask(id);gantt.hideLightbox();}}); </script>

甘特图所需要的配置基本的在这里都有，而且我主要的都加上了注释，希望能帮助大家，现在来说一下，异步的思路，首先我之前看过dhtmlxgantt.js中甘特图弹框保存功能，按照我自己的理解，就是它在保存时，会创建一个var task去存储修改的数据，然后显示在当前页面上，但是当你刷新时，它会重新var task,所以task中是没有值 的，且甘特图还是会从数据文件中读取数据，所以就做不到保存修改，刷新显示的数据是修改后的；因此我就在弹框中新建一个按钮，在按钮被点击时，会获取保存时，修改数据存储的task ，然后将task以post方式传给后台，去修改数据表中数据并保存，特别注意，因为甘特图时间格式获取来的竟然是中国标准时间，而且还是带“(中国标准时间)”的，所以就需要在前段对时间格式进行修改，然后传给后端去存储。
以上说的是保存，如果想要异步读取数据表中数据，首先就是采用ajax获取后端传来的数据表中数据，然后通过 tasks.data.push和tasks.links.push的方式将获取的json数据，插入到其中，记住一定让属性对应，这才甘特图才会显示你数据表中数据。

离线写博客

本文为本人根据dhtmlxgantt插件的代码包和文档开发而来，也许有所不足，真诚的希望，有大牛能帮我纠正一下，我的错误，互相提高，以便以为可以分享更好的代码和技术给大家，携手在研发的道路上一去不复返。