15、Gantt 修改样式部分

你在说啥-Lynn

已于 2022-11-02 14:47:25 修改

阅读量3.1k

点赞数

分类专栏： DHTMLX Gantt 文章标签： javascript 前端 css3

于 2022-05-11 16:19:11 首次发布

本文链接：https://blog.csdn.net/beauty_600/article/details/124712742

版权

DHTMLX Gantt 专栏收录该内容

15 篇文章 13 订阅

订阅专栏

指定任务栏中的文本和灯箱的标题
https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html

// timeLine 文字
gantt.templates.task_text = function (start, end, task) {
  return task.taskSpecification + 'dsfsdihf';
};

在这里插入图片描述

指定任务栏已完成部分的文本
https://docs.dhtmlx.com/gantt/api__gantt_progress_text_template.html

// 指定工单栏已完成部分的文本
gantt.templates.progress_text = function (start, end, task) {
  return '<span style="text-align:left;">' + Math.round(task.progress * 100) + '% </span>';
};

在这里插入图片描述

指定分配给左侧任务栏的文本
https://docs.dhtmlx.com/gantt/api__gantt_leftside_text_template.html

gantt.templates.leftside_text = function(start, end, task){
    return task.duration + " days";
};

在这里插入图片描述

指定分配给右侧任务栏的文本
https://docs.dhtmlx.com/gantt/api__gantt_rightside_text_template.html

gantt.templates.rightside_text = function(start, end, task){
    return "ID: #" + task.id;
};

在这里插入图片描述

指定将应用于任务栏的 CSS 类
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html

gantt.templates.task_class = function(start, end, task){return "";};

// task 自定义样式
gantt.templates.task_class = function (start, end, task) {
  switch (task.type) {
    case 'project':
      return 'project_timeline';
      break;
    case 'task':
      return 'task_timeline' + ' task_status_' + task.taskStatus;
      break;
    case 'milestone':
      return 'milestone_timeline';
      break;
  }
};

// timeline
.task_timeline {
  border: 2px solid #3db9d3;
  background: #3db9d3;

  .gantt_task_progress {
    background: #299cb4;
  }

  .gantt_task_progress {
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
  }

  .task_start_date {
    height: 24px !important;
  }

  .task_end_date {
    height: 24px !important;
  }
}

/*:not(.task_status_4) {
  // 进度调整隐藏
  .gantt_task_progress_drag {
    display: none;
  }
}*/

.task_timeline.gantt_task_line.gantt_selected {
  box-shadow: 0 0 5px #3db9d3;
}

.project_timeline {
  border: 2px solid #65c16f;
  background: #65c16f;

  // task progress 样式
  .gantt_task_progress {
    background: #46ad51;
  }

  // task progress text 样式
  .gantt_task_progress {
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
  }

  // 连线圈圈隐藏
  .task_start_date {
    display: none;
    height: 24px !important;
  }

  .task_end_date {
    display: none;
    height: 24px !important;
  }

  // 进度调整隐藏
  .gantt_task_progress_drag {
    display: none;
  }
}

// task 选中样式
.project_timeline.gantt_task_line.gantt_selected {
  box-shadow: 0 0 5px #65c16f;
}

.milestone_timeline {
  visibility: hidden;
  background-color: #d33daf;
  border: 1 solid #61164f;
  box-sizing: content-box;

  .gantt_task_content {
    width: 20px !important;
    height: 20px !important;
    margin-top: 3px !important;
  }

  .task_start_date {
    display: none;
    margin-left: 2.5px !important;
  }

  .task_end_date {
    display: none;
    margin-right: 10px !important;
  }
}

.milestone_timeline.gantt_task_line.gantt_selected {
  box-shadow: 0 0 5px #d33daf;
}

指定将应用于网格行的 CSS 类
https://docs.dhtmlx.com/gantt/api__gantt_grid_row_class_template.html

gantt.templates.grid_row_class = function(start, end, task){
    return "";
};

下方是实现 milestone 隐藏新增按钮

// 动态设置grid样式
gantt.templates.grid_row_class = function (start, end, task) {
  let style = '';
  if (task.type == 'project') {
    style = 'row_project';
  } else if (task.type == 'task') {
    style = 'row_task';
  } else if (task.type == 'milestone') {
    style = 'row_milestone';
  }
  // 创建样式
  return style;
};

.gantt_row_milestone {
  .gantt_add {
    display: none;
  }
}

在这里插入图片描述

更换 open & close 图标

.gantt_tree_icon.gantt_open {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA4LTE2VDE1OjA2OjMzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA4LTE2VDE1OjA2OjMzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wOC0xNlQxNTowNjozMyswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMmUzNWE5Zi1jNmY4LTBhNDktYmYzZS1hZDllYTM2M2ZiZDUiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDozYzVhZmQxNi1mZjcxLWFhNGItYTk5ZS0y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)!important;
  width: 12px!important;
  height: 100%!important;
  background-size: contain!important;
  background-position: 50%!important;
  margin-right: 0.3rem!important;
}

.gantt_tree_icon.gantt_close {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA4LTE2VDE1OjA1OjIxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA4LTE2VDE1OjA1OjIxKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wOC0xNlQxNTowNToyMSswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpiZjFiMjkxNi1mNjhkLWU4NGItOWE4Zi01MjM5MDAzZmJiYjIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyNDYyY2IxOS0wYjNkLWEwNDgtOGViYS1l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)!important;
  width: 12px!important;
  height: 100%!important;
  background-size: contain!important;
  background-position: 50%!important;
  margin-right: 0.3rem!important;
}

在这里插入图片描述

选中 & 鼠标移入样式

// 选中
.gantt_task_row.gantt_selected {
  background: rgba(191, 28, 45, 0.08);
}
.gantt_grid_data .gantt_row.gantt_selected {
  background: rgba(191, 28, 45, 0.08);
}
.gantt_grid_data .gantt_row.odd.gantt_selected {
  background: rgba(191, 28, 45, 0.08);
}

在这里插入图片描述

line 样式调整

.gantt_task_line {
  border-radius: 6px;
  background-color: rgb(150, 153, 156);
  height: 24px !important;
  line-height: 24px !important;
  border: none !important;
}
.gantt_bar_task,
.gantt_bar_project {
  margin-top: 10px;
}

在这里插入图片描述

gantt 边框样式调整。(基本上强迫症才能看出的细微差别，啊哈哈哈哈~~~~~)

.gantt_layout_cell_border_bottom {
  border-bottom: 1px solid rgba(112, 112, 112, 0.2);
}
.gantt_layout_cell_border_top {
  border-top: 1px solid rgba(112, 112, 112, 0.2);
}
.gantt_layout_cell_border_right {
  border-right: 1px solid rgba(112, 112, 112, 0.2);
}
.gantt_layout_cell_border_left {
  border-left: 1px solid rgba(112, 112, 112, 0.2);
}

.gantt_layout_cell_border_right.gantt_resizer {
  border-right: 0 !important;
}

.gantt_grid_data .gantt_last_cell, .gantt_grid_scale .gantt_last_cell, .gantt_task .gantt_task_scale .gantt_scale_cell.gantt_last_cell, .gantt_task_bg .gantt_last_cell {
  border-right-width: 0 !important;
}

调整前：
在这里插入图片描述
调整后：

文字超过部分点点点…

.gantt_tree_content {
  overflow: hidden;
  text-overflow: ellipsis;
}

调整前：
在这里插入图片描述
调整后：

你在说啥-Lynn

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
15、Gantt 修改样式部分

指定任务栏中的文本和灯箱的标题https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html// timeLine 文字gantt.templates.task_text = function (start, end, task) { return task.taskSpecification + 'dsfsdihf';};指定任务栏已完成部分的文本https://docs.dhtmlx.com/gantt/api_.
复制链接

扫一扫