dhtmlxgantt甘特图篇之保存

dhtmlxgantt甘特图之保存

本文是在我写异步读取数据表显示在甘特图那篇文章之后，我仔细看了一下，dhtmlxgantt.js源码，并作出改善，完成了该功能；现在我就给大家介绍一下：

dhtmlxgantt.js

首先，先看一下源码中保存方法：

这是源码中保存方法功能实现，我就此简单给介绍一下，首先设置lightbox弹框左下角按钮save的点击事件，制定_save_lightbox()方法，然后，在该方法中this.getLightboxValues();通过该方法可以获取该页面中修改的数据将其存储在 t中，然后调用相应事件函数，制定为save的事件，后面的代码主要就是先去判断t是否为更改的数据，然后将更改的数据，替换原来的数据，最后就this.refreshTask(t.id), this.updateTask(t.id)), this.refreshData(), this.hideLightbox()刷新然后隐藏弹框。因为dhtmlxgantt.js是公共的JS所以我们最好不要对该JS做修改，尽可能的在JSP中重写你需要更改的方法，这样当其他JSP调用dhtmlxgantt.js时，不会出现变动。

代码块

    gantt._save_lightbox = function() {
         var t = gantt.getLightboxValues();
         gantt.callEvent("onLightboxSave", [this._lightbox_id, t, !! t.$new]) && (t.$new ? (delete t.$new, gantt.addTask(t)) : 
             gantt.isTaskExists(t.id) && (mixinSave(gantt.getTask(t.id), t, !0), gantt.refreshTask(t.id), gantt.updateTask(t.id)),
             gantt.refreshData(), gantt.hideLightbox())
     }

     mixinSave=function(t, e, i) {
            console.log(e);
            for (var n in e)(void 0 === t[n] || i) && (t[n] = e[n]);
            var d = new Date(t.start_date);  
            t.update_date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
            $.post("/BOLI_MES_JT/a/dhtmlx/gantt/save",t,function(json){
                console.log(json.status);
            },"json");
            return t;
        } 

甘特图实现JS代码

对于我现在的需求而言，就是需要改动lightbox弹框的save按钮，点击事件，所以我只需要重写_save_lightbox方法即可，因为我在JSP中引入了dhtmlxgantt.js文件，所以其他方法不用重写，当然mixin方法也需要重写，因为将修改的数据替换原来数据的功能实现就是在mixin方法中，有的人可能认为在源文件改动即可，但是mixin方法在源文件中被调用多次，而且是在不同方法，如果你在源文件修改不一定满足其他方法功能需求，我就不在赘述了。
至于代码，在我的dhtmlxgantt异步获取数据显示的那篇文章里就已经介绍过了，在这篇就不再赘述。

甘特图连接线保存

以上只是甘特图中task的保存，甘特图不仅仅有task还需要在两个task之间画出连接线，也就是links，如果有哪位小伙伴也看了源码js你会发现关于画线的部分代码有些多而且因为命名得问题可读性没有java好，但是初次读还是可以读懂它做了什么，怎么做的，在此我就占篇幅去讲解JS了，有兴趣的小伙伴可以自己去下载dhtmlxgantt.js去研究和学习，接下来我就简单说一下，怎么异步的保存到数据库中。

在源码中，此处实现的是inDragEnd也就是画线完毕的事件，当鼠标到达结束点时，触发该事件，其中l()就是为link_source_id等属性指定要赋值的变量，然后在此处通过addTask方法将新建的连接线保存到linkstore中，至于demo(n)是我自己定义的一个空的函数，主要目的就是为了可以在JSP中重写该函数，让它异步地将数据传回后端，实现数据表地增加。学习前端过JS的都知道，JS是非面向对象的，所以当你想要对源码文件中某段代码进行重写时，会有问题出现，就是浏览器不能读取你重写的代码，所以我用一个空函数将参数获取，再传给JSP，这只是我的想法，如果大家有更好的想法，可以互相交流一下。
这是我在JSP中重写demo的代码：

function demo(n){
     $.post("${ctx}/ganttlinks/ganttLinks/save",n,function(json){
            console.log(json.status);
        },"json");
 }

离线写博客

本文为本人根据dhtmlxgantt插件的代码包和文档修改前篇文章的写，因为个人认为对于保存而言本篇要比之前我写的文章更加合适所以特此写出来，给大家分享，也许有所不足，真诚的希望，有大牛能帮我纠正一下，我的错误，互相提高，以便以为可以分享更好的代码和技术给大家，携手在研发的道路上一去不复返。