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, 有任何问题请联系我, 尽量给出详细的解答!

相关推荐
拭心10 小时前
Google 提供的 Android 端上大模型组件:MediaPipe LLM 介绍
android
带电的小王12 小时前
WhisperKit: Android 端测试 Whisper -- Android手机(Qualcomm GPU)部署音频大模型
android·智能手机·whisper·qualcomm
梦想平凡12 小时前
PHP 微信棋牌开发全解析:高级教程
android·数据库·oracle
元争栈道13 小时前
webview和H5来实现的android短视频(短剧)音视频播放依赖控件
android·音视频
阿甘知识库14 小时前
宝塔面板跨服务器数据同步教程:双机备份零停机
android·运维·服务器·备份·同步·宝塔面板·建站
元争栈道14 小时前
webview+H5来实现的android短视频(短剧)音视频播放依赖控件资源
android·音视频
MuYe14 小时前
Android Hook - 动态加载so库
android
居居飒15 小时前
Android学习(四)-Kotlin编程语言-for循环
android·学习·kotlin
Henry_He18 小时前
桌面列表小部件不能点击的问题分析
android
工程师老罗18 小时前
Android笔试面试题AI答之Android基础(1)
android