15、Gantt 修改样式部分

1、指定任务栏中的文本和灯箱的标题
1 // timeLine 文字
2 gantt.templates.task_text = function (start, end, task) {
3   return task.taskSpecification + 'dsfsdihf';
4 };

 

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

3、指定分配给左侧任务栏的文本
1 gantt.templates.leftside_text = function(start, end, task){
2     return task.duration + " days";
3 };

4、指定分配给右侧任务栏的文本
1 gantt.templates.rightside_text = function(start, end, task){
2     return "ID: #" + task.id;
3 };

5、指定将应用于任务栏的 CSS 类
1 gantt.templates.task_class = function(start, end, task){return "";};
 1 // task 自定义样式
 2 gantt.templates.task_class = function (start, end, task) {
 3   switch (task.type) {
 4     case 'project':
 5       return 'project_timeline';
 6       break;
 7     case 'task':
 8       return 'task_timeline' + ' task_status_' + task.taskStatus;
 9       break;
10     case 'milestone':
11       return 'milestone_timeline';
12       break;
13   }
14 };
  1 // timeline
  2 .task_timeline {
  3   border: 2px solid #3db9d3;
  4   background: #3db9d3;
  5 
  6   .gantt_task_progress {
  7     background: #299cb4;
  8   }
  9 
 10   .gantt_task_progress {
 11     text-align: left;
 12     padding-left: 10px;
 13     box-sizing: border-box;
 14     color: white;
 15     font-weight: bold;
 16   }
 17 
 18   .task_start_date {
 19     height: 24px !important;
 20   }
 21 
 22   .task_end_date {
 23     height: 24px !important;
 24   }
 25 }
 26 
 27 /*:not(.task_status_4) {
 28   // 进度调整隐藏
 29   .gantt_task_progress_drag {
 30     display: none;
 31   }
 32 }*/
 33 
 34 .task_timeline.gantt_task_line.gantt_selected {
 35   box-shadow: 0 0 5px #3db9d3;
 36 }
 37 
 38 .project_timeline {
 39   border: 2px solid #65c16f;
 40   background: #65c16f;
 41 
 42   // task progress 样式
 43   .gantt_task_progress {
 44     background: #46ad51;
 45   }
 46 
 47   // task progress text 样式
 48   .gantt_task_progress {
 49     text-align: left;
 50     padding-left: 10px;
 51     box-sizing: border-box;
 52     color: white;
 53     font-weight: bold;
 54   }
 55 
 56   // 连线圈圈隐藏
 57   .task_start_date {
 58     display: none;
 59     height: 24px !important;
 60   }
 61 
 62   .task_end_date {
 63     display: none;
 64     height: 24px !important;
 65   }
 66 
 67   // 进度调整隐藏
 68   .gantt_task_progress_drag {
 69     display: none;
 70   }
 71 }
 72 
 73 // task 选中样式
 74 .project_timeline.gantt_task_line.gantt_selected {
 75   box-shadow: 0 0 5px #65c16f;
 76 }
 77 
 78 .milestone_timeline {
 79   visibility: hidden;
 80   background-color: #d33daf;
 81   border: 1 solid #61164f;
 82   box-sizing: content-box;
 83 
 84   .gantt_task_content {
 85     width: 20px !important;
 86     height: 20px !important;
 87     margin-top: 3px !important;
 88   }
 89 
 90   .task_start_date {
 91     display: none;
 92     margin-left: 2.5px !important;
 93   }
 94 
 95   .task_end_date {
 96     display: none;
 97     margin-right: 10px !important;
 98   }
 99 }
100 
101 .milestone_timeline.gantt_task_line.gantt_selected {
102   box-shadow: 0 0 5px #d33daf;
103 }
6、指定将应用于网格行的 CSS 类
1 gantt.templates.grid_row_class = function(start, end, task){
2     return "";
3 };
下方是实现 milestone 隐藏新增按钮
 1 // 动态设置grid样式
 2 gantt.templates.grid_row_class = function (start, end, task) {
 3   let style = '';
 4   if (task.type == 'project') {
 5     style = 'row_project';
 6   } else if (task.type == 'task') {
 7     style = 'row_task';
 8   } else if (task.type == 'milestone') {
 9     style = 'row_milestone';
10   }
11   // 创建样式
12   return style;
13 };
14 
15 .gantt_row_milestone {
16   .gantt_add {
17     display: none;
18   }
19 }

7、更换 open & close 图标
 1 .gantt_tree_icon.gantt_open {
 2   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA4LTE2VDE1OjA2OjMzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA4LTE2VDE1OjA2OjMzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wOC0xNlQxNTowNjozMyswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMmUzNWE5Zi1jNmY4LTBhNDktYmYzZS1hZDllYTM2M2ZiZDUiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDozYzVhZmQxNi1mZjcxLWFhNGItYTk5ZS0y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)!important;
 3   width: 12px!important;
 4   height: 100%!important;
 5   background-size: contain!important;
 6   background-position: 50%!important;
 7   margin-right: 0.3rem!important;
 8 }
 9 
10 .gantt_tree_icon.gantt_close {
11   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA4LTE2VDE1OjA1OjIxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA4LTE2VDE1OjA1OjIxKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wOC0xNlQxNTowNToyMSswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpiZjFiMjkxNi1mNjhkLWU4NGItOWE4Zi01MjM5MDAzZmJiYjIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyNDYyY2IxOS0wYjNkLWEwNDgtOGViYS1l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)!important;
12   width: 12px!important;
13   height: 100%!important;
14   background-size: contain!important;
15   background-position: 50%!important;
16   margin-right: 0.3rem!important;
17 }

8、选中 & 鼠标移入样式
 1 // 选中
 2 .gantt_task_row.gantt_selected {
 3   background: rgba(191, 28, 45, 0.08);
 4 }
 5 .gantt_grid_data .gantt_row.gantt_selected {
 6   background: rgba(191, 28, 45, 0.08);
 7 }
 8 .gantt_grid_data .gantt_row.odd.gantt_selected {
 9   background: rgba(191, 28, 45, 0.08);
10 }

9、line 样式调整
 1 .gantt_task_line {
 2   border-radius: 6px;
 3   background-color: rgb(150, 153, 156);
 4   height: 24px !important;
 5   line-height: 24px !important;
 6   border: none !important;
 7 }
 8 .gantt_bar_task,
 9 .gantt_bar_project {
10   margin-top: 10px;
11 }

10、gantt 边框样式调整。(基本上强迫症才能看出的细微差别，啊哈哈哈哈~~~~~)
 1 .gantt_layout_cell_border_bottom {
 2   border-bottom: 1px solid rgba(112, 112, 112, 0.2);
 3 }
 4 .gantt_layout_cell_border_top {
 5   border-top: 1px solid rgba(112, 112, 112, 0.2);
 6 }
 7 .gantt_layout_cell_border_right {
 8   border-right: 1px solid rgba(112, 112, 112, 0.2);
 9 }
10 .gantt_layout_cell_border_left {
11   border-left: 1px solid rgba(112, 112, 112, 0.2);
12 }
13 
14 .gantt_layout_cell_border_right.gantt_resizer {
15   border-right: 0 !important;
16 }
17 
18 .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 {
19   border-right-width: 0 !important;
20 }
调整前：
调整后：
11、文字超过部分点点点...
1 .gantt_tree_content {
2   overflow: hidden;
3   text-overflow: ellipsis;
4 }
调整前：
调整后：
posted @ 2022-05-07 16:34  你在说啥  阅读(569)  评论(0)    收藏  举报