dhtmlxGantt 甘特图 一行展示多条任务类型

效果如图:

后台拿到数据 处理之后如图:

含义:

如上图所示, 如果一行需要展示多个 需要给父数据的那条添加render:split属性,

子数据的parent为父数据的Id即可

切记 父数据的id 别为0 为0 时 会出现错乱

因为有些小伙伴提出分段展示的数据结构还是有点问题,下面展示一个完整的demo

<template>

<div id="gantt" ref="gantt"></div>

</template>

<script>

import { gantt } from 'dhtmlx-gantt';

import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

export default {

name: 'SpeadDomeGantt',

data() {

return {

};

},

mounted() {

this.init()

},

methods: {

init(){

gantt.config.xml_date = "%Y-%m-%d %H:%i";

gantt.config.scale_height = 50 //设置甘特图的表头高度

//鼠标移入展示信息

gantt.plugins({

tooltip: true

})

//时间展示 2021-10-11 07:22

gantt.templates.tooltip_date_format = gantt.date.date_to_str("%Y-%m-%d %H:%i")

//鼠标移入展示信息

gantt.config.readonly = true //甘蔗图只读属性

gantt.config.round_dnd_dates = false //将任务开始时间和结束时间自动"四舍五入'

gantt.config.root_id = "root"

//添加taba栏

gantt.config.columns = [

{name:"name", label:"名称", align: 'center', width: 120},

{name:"age", label:"年龄", align: 'center', width: 120}

]

//禁用拖拽项 拖拽类型

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){

var modes = gantt.config.drag_mode;

switch (mode){

case modes.move:

break;

case modes.resize:

break;

case modes.progress:

break;

}

})

gantt.init(this.$refs.gantt)

//模拟数据

let datalist = [

//第一组 //整条数据需要带上render属性 里面多段的数据parent执行整条的id

{

id: 1, name: '小花', age: 18, render: 'split', text: ''

},

{

id: 100, parent: 1, start_date: '2022-08-19 07:20:00', end_date: '2022-08-20 20:00:00',

text: '玩游戏', color: '#F56C6C'

},

{

id: 101, parent: 1, start_date: '2022-08-20 23:20:00', end_date: '2022-08-21 20:00:00',

text: '事情一', color: '#67C23A'

},

{

id: 102, parent: 1, start_date: '2022-08-22 07:20:00', end_date: '2022-08-22 20:00:00',

text: '事情二', color: '#E6A23C'

},

{

id: 103, parent: 1, start_date: '2022-08-23 07:20:00', end_date: '2022-08-24 20:00:00',

text: '事情三', color: '#909399'

},

//第二组

{

id: 2, name: '小草', age: 16, render: 'split', text: ''

},

{

id: 104, parent: 2, start_date: '2022-08-19 02:20:00', end_date: '2022-08-20 18:00:00',

text: '玩游戏', color: '#E6A23C'

},

{

id: 105, parent: 2, start_date: '2022-08-20 22:10:00', end_date: '2022-08-21 10:00:00',

text: '事情四', color: '#909399'

},

{

id: 106, parent: 2, start_date: '2022-08-21 17:20:00', end_date: '2022-08-22 20:00:00',

text: '事情五', color: '#67C23A'

},

{

id: 107, parent: 2, start_date: '2022-08-23 00:20:00', end_date: '2022-08-23 20:00:00',

text: '事情六', color: '#F56C6C'

},

]

gantt.parse({data: datalist})

},

},

};

</script>

<style scoped>

#gantt {

height: 120px;

}

</style>

效果图如下:

ok, 有任何问题请联系我, 尽量给出详细的解答!

相关推荐
猿小蔡-Cool37 分钟前
Android ADB命令之内存统计与分析
android·adb
Monkey-旭42 分钟前
Android Handler 完全指南
android·java·handler
從南走到北2 小时前
JAVA东郊到家按摩服务同款同城家政服务按摩私教茶艺师服务系统小程序+公众号+APP+H5
android·java·开发语言·微信小程序·小程序
alexhilton2 小时前
学会用最优雅的姿式在Compose中显示富文本
android·kotlin·android jetpack
阿华的代码王国5 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
风起云涌~5 小时前
【Android】桌面小组件开发
android·gitee
双鱼大猫7 小时前
从传统播放器到AI智能体:Xplayer 2.0的技术革新之路
android
CYRUS_STUDIO7 小时前
动态篡改 so 函数返回值:一篇带你玩转 Android Hook 技术!
android·c++·逆向
xzkyd outpaper7 小时前
Android中主线程、ActivityThread、ApplicationThread的区别
android·面试
就叫飞六吧8 小时前
mysql全量备份、全量恢复demo
android·mysql·adb