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