Dhtmlx-Gantt基本用法

以vue使用为例
下载Dhtmlx-Gantt

npm install dhtmlx-gantt --save

初始化Dhtmlx-Gantt

mounted: function () {
  gantt.init(this.$refs.gantt)
  gantt.parse(this.data.tasks)
}

其中tasks数据格式为

{
    data:[
        {id:1,text:'Task#1',start_date:'15-04-2017',duration:3,progress:0.6},
        {id:2,text:'Task#2',start_date:'18-04-2017',duration:3,progress:0.4},
        {id:3,text:'Task#3',start_date:'19-04-2017',duration:3,progress:0.4}
    ],
    links:[
        {id:1,source:1,target:2,type:'0'}
    ]
}

设置样式

<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

这里是Dhtmlx-Gantt官方demo，介绍了基本用法，Dhtmlx-Gantt功能还是比较强大的，更多的用法需要自己去阅读官方api
官方api文档

    官方api文档主要分为：方法、属性、事件、模板、其他
    
    方法 ：
        调用形式
        gantt.addCalendar(calendar);
    属性：
        设置形式
        gantt.config.autoscroll = true;
        gantt.config.autoscroll_speed = 50;
    事件：
        使用方式
        gantt.attachEvent("onGanttScroll", function (left, top){
                    // any custom logic here
        });
    模板：
                自定义甘特图中的部分组件展示效果
        如：指定树列中子项的标签之前插入的自定义内容
        gantt.templates.grid_blank=function(item){
            return "<divclass='gantt_tree_icongantt_blank'>##</div>"
        }
    其他：就是其他

推荐一个好用的二维码解析微信小程序，主要功能二维码和解析二维码

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/BDawn/article/details/100727679
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-31 05:42:25
阅读 ( 1367 )
分类：前端

Dhtmlx-Gantt基本用法

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看