Skip to content

wuyaoxing/vue-gantt

Repository files navigation

vue-gantt

dhtmlxGantt with vue.js, A gantt component for Vue.js

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:9090
npm run dev

# build for production with minification
npm run build

gantt功能总结

  1. 按钮切换

    • 今天
    • 上一屏
    • 下一屏
  2. 时间 marker

    • TodayMarker
    • 项目Marker
  3. 拖拽

    • moveTask
    • 左右拖拽task
  4. 任务样式

    • 没有开始的时间
    • 没有结束的时间
    • 两者都没有
  5. 状态

    • 未开始
    • 进行中
    • 已完成
    • 逾期
  6. 点击显示任务弹窗

  7. tooltip提示信息

  8. 数据

    • 过滤
    • 筛选    - 格式化

核心

除去官方提供的配置和事件,主要集中在数据的聚合。一是将从接口获取的数据结构转换为gantt所需的数据结构;二是数据同步更新,我的做法是利用lodash的diff函数计算出更新前后数据的变化项,然后利用gantt提供的事件与方法逐个更新,性能方面就回到了老生常谈的话题上了,不再赘述。另外值得一提的是经过大量数据的测试dhtmlxGantt框架的性能是非常可观的,一次重新渲染的速度要大于重新排序所消耗的时间。(据说5.0以上版本再性能上还有不少提升,并且增加了更多实用的api,只是貌似暂时不对外,只能从官网例子上一睹为快了)  

About

dhtmlxGantt with vue.js, A gantt component for Vue.js

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published