使用甘特图样式

dhtmlxGantt 提供了丰富的选项来自定义其外观。你可以应用预定义的皮肤以更改甘特图的整体外观，也可以针对任务、连接线、时间刻度、网格等各个元素进行样式调整。

本指南汇总了对甘特图各部分进行样式设置的一般说明，帮助你更轻松地查阅文档。关于每个具体元素的详细信息，请参考相关文档。

网格样式

网格区域的样式可通过相关的网格的模板进行修改。

网格列标题

你可以使用 grid_header_class 模板为网格列标题应用自定义样式。例如，可以这样更改特定标题的背景色：

<style>
    .updColor{
        background-color:#ffeb8a!important;
    }
</style>

gantt.templates.grid_header_class = function(columnName, column){
  if(columnName == 'duration' ||columnName == 'text')
    return "updColor";
};

网格标题中的自定义元素

你可以在网格标题中添加自定义元素，如按钮、图标或输入框。只需在 gantt.config.columns 配置项中，将元素的 HTML 作为 label 属性的值即可：

gantt.config.columns = [
  {name:"add", label:"", width:50, align:"left" },
  {name:"text", label:"<div class='searchEl'>Task name <input id='search' type='text'"+       "placeholder='Search tasks...'></div>", width:250, tree:true},                            // other columns
];

以下是搜索功能的实现方式：

var inputEl = document.getElementById('search');
 
inputEl.oninput = function(){
  gantt.refreshData();
}
 
function hasSubstr(parentId){
  var task = gantt.getTask(parentId);
  if(task.text.toLowerCase().indexOf(inputEl.value.toLowerCase() ) !== -1)
    return true;
 
  var child = gantt.getChildren(parentId);
  for (var i = 0; i < child.length; i++) {
    if (hasSubstr(child[i]))
      return true;
  }
  return false;
}
 
gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
  if (hasSubstr(id))
    return true;
 
    return false;
});

网格标题中的图标和图片

要在标题中包含图片或图标，可以通过 label 属性将其插入单元格的内部 HTML：

var textLabel = [
    "<div class='gantt-text-label'>"+
    "<img src='http://docs.dhtmlx.com/scheduler/assets/index/icon1.png'>"+
    "<span>Text</span>" +
    "</div>"
].join("");
 
gantt.config.columns = [
    {name: "text", label:textLabel,tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "add", width: 44}
];

另外，也可以通过 CSS 的 .gantt_grid_head_ 选择器为标题单元格设置样式：

.gantt_grid_head_text  {
    background-image:url('http://docs.dhtmlx.com/scheduler/assets/index/icon1.png');
    background-repeat:no-repeat;  
}

网格标题中的多行文本

请参考如何在网格单元格/标题中显示多行内容部分的示例。

网格行的背景色

你可以通过 grid_row_class 模板为包含任务的所有或特定网格行设置自定义背景色。例如，修改特定行的背景色：

<style>
  .updColor{
    background-color:#ffeb8a!important;  
  }
</style>

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

Related sample: Coloring Grid Rows

网格行悬停时的颜色

要在鼠标悬停时高亮显示网格行，可以应用如下样式规则：

.gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover,
.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected{
    background-color: cyan; 
}

自定义网格列

dhtmlxGantt 允许你通过 gantt.config.columns 配置项的 template 属性自定义网格列的默认外观。

template 属性是一个接收数据项对象并返回最终内容的函数。这样你可以实现几乎任何内容的自定义。例如，可以更改网格行的文本颜色，或在网格列中使用自定义元素。

网格行文本颜色

要根据任务优先级为任务设置不同的文本颜色，可以这样做：

gantt.config.columns=[
    {name:"text",       label:"Task name",  tree:true, width:230, template:myFunc },       {name:"start_date", label:"Start time", align: "center" },
    {name:"duration",   label:"Duration",   align: "center" }
];
 
function myFunc(task){
    if(task.priority ==1)
        return "<div class='important'>"+task.text+" ("+task.users+") </div>";
    return task.text+" ("+task.users+")";
};

Related sample: Template for tree nodes

网格列中的自定义元素

要在网格列中添加按钮或输入框等自定义元素，只需将元素的 HTML 作为该列的 template 属性：

var colContent = function (task) {
    return ('<i class="fa gantt_button_grid gantt_grid_edit fa-pencil"'+
                'onclick="clickGridButton(' + task.id + ', \'edit\')"></i>' +
            '<i class="fa gantt_button_grid gantt_grid_add fa-plus"'+
                'onclick="clickGridButton(' + task.id + ', \'add\')"></i>' +
            '<i class="fa gantt_button_grid gantt_grid_delete fa-times"'+
                'onclick="clickGridButton(' + task.id + ', \'delete\')"></i>');
};
 
gantt.config.columns = [
    {name: "text", tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "buttons", label: colHeader, width: 75, template: colContent}  ];

网格列中过长文本省略显示

Gantt 会自动缩短网格行中过长的文本。

自 7.0 版本起，你可以通过重定义相关 CSS 类 .gantt_tree_content，用省略号截断网格行中超长内容：

<style>
.gantt_tree_content {
    overflow:hidden;
    text-overflow: ellipsis;
}
</style>
 
gantt.init("gantt_here");

网格单元格中的多行文本

请参见如何在网格单元格/标题中显示多行内容部分的示例。

时间刻度样式

时间刻度的样式通过相关的时间线区域模板控制。

刻度行

你可以使用 scale_row_class 模板为刻度行设置样式。例如，设置背景色：

<style>
  .updColor{
    background-color:#ffeb8a!important      
  }
</style>

gantt.templates.scale_row_class = function(scale){           
    return "updColor";
}

刻度单元格

你也可以通过 scale_cell_class 模板为特定刻度单元格设置样式。例如，高亮时间线区域中的周末：

gantt.templates.scale_cell_class = function(date){
    if(date.getDay()==0||date.getDay()==6){
        return "updColor";
    }
};

更多细节请参见设置时间刻度和高亮显示时间段。

子刻度

可以通过 scales 属性的 css 属性为刻度分配新样式。例如，单独为周末着色：

<style type="text/css">
    .weekend{
        background: #F0DFE5 !important;
    }
</style>

var daysStyle = function(date){
    var dateToStr = gantt.date.date_to_str("%D");
    if (dateToStr(date) == "Sun"||dateToStr(date) == "Sat")  return "weekend";
 
    return "";
};
 
gantt.config.scales = [
    {unit:"day", format:"%D", css:daysStyle }
];

Related sample: Multiple scales

任务样式

任务的样式可以通过相应的时间线区域模板进行自定义。

任务条

你可以重定义 task_class 模板来更新任务样式。详见任务着色。

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

Related sample: Task styles

模板支持动态样式。例如，可以根据任务进度动态更改颜色：

gantt.templates.task_class = function(start,end,task){
    if(task.progress > 0.5){
        return "";
    }else{
        return "important";
    }
};

任务条文本

task_text 模板支持任务条文本的内联样式：

gantt.templates.task_text = function(start, end, task){
  if(task.id == 12)
    return "<span style='color:red'>"+task.text+"</span>";
 
  return task.text;
};

多行文本

请参考示例和如何在网格单元格/标题中显示多行内容部分。

任务条中的自定义元素

也可以通过 task_text 模板在任务条中添加自定义元素。例如，插入按钮：

gantt.templates.task_text = function(start, end, task){  
  return task.text+" <button>Text</button>";    
};

通过任务对象属性设置样式

你可以通过在任务对象配置中添加额外属性自定义任务颜色。可用属性有：color、textColor 和 progressColor。

var tasks = {
  data:[
     {id:1, text:"Project #1", start_date:"01-04-2013", duration:18, color:"red"},
     {id:2, text:"Task #1", start_date:"02-04-2013", 
        duration:8, color:"blue", parent:1}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getTask(1).color = "red"

更多信息请参见任务着色相关部分。

通过弹窗（lightbox）样式化任务条

你可以设置一组预定义颜色，并将其作为选项包含在 lightbox 配置中。这样可以为任务分配文本或背景颜色：

var colors = [
    {key:"", label:"Default"},
    {key:"#4B0082",label:"Indigo"},
    {key:"#FFFFF0",label:"Ivory"},
    {key:"#F0E68C",label:"Khaki"}
    // more colors
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority", height:22, map_to:"color", type:"select", options:colors},
    {name:"textColor", height:22, map_to:"textColor", type:"select", options:colors},
    {name:"time", type:"duration", map_to:"auto"}
];

时间线区域的行

task_row_class 模板允许你更改甘特图任务后方时间线行的颜色。

gantt.templates.task_row_class = function(start, end, task){
  if(task.id == 12)
    return "updColor";
};

Related sample: Custom tree formatting

高亮时间线单元格

你可以基于星期几高亮特定时间线单元格，使用 timeline_cell_class 模板。该模板函数会遍历所有单元格，并为选中的单元格应用 CSS 类。例如，可以这样高亮周末：

<style>
    .weekend{
        background: #f4f7f4;
    }   
</style>

gantt.templates.timeline_cell_class = function(item,date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend"
    }
};

Related sample: Highlighting weekends

更多信息请参见高亮显示时间段文章。

显示外部元素（基线、截止线等）

此功能仅在 PRO 版本中可用。

你可以在甘特图中添加额外元素，如基线或截止标记。为此，请使用 addTaskLayer 方法创建新的显示层，并在其中添加自定义元素。该方法接受一个函数，该函数接收任务对象，并返回用于显示的 DOM 元素，或者返回 false 以隐藏该任务的元素：

gantt.addTaskLayer(function myNewElement(task) {
    var el = document.createElement('div');
    // your code
    return el;
});

此类外部元素示例包括：

基线

Related sample: Display baselines

截止线

Related sample: Displaying deadlines

更多详情请参见时间线区域中的自定义元素文章。

任务的工具提示

工具提示为显示任务详情提供了一种简洁方式。

默认情况下，当你启用 tooltip 插件时，任务会显示工具提示。

自定义工具提示文本

要自定义工具提示文本，请使用 tooltip_text 模板：

gantt.templates.tooltip_text = function(start,end,task){
    return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration;
};

更多关于工具提示的信息可参见 Gantt 元素的工具提示文章。

链接样式化

你可以使用依赖关系链接的模板资源自定义依赖链接的外观。

依赖链接的线条

link_class 模板允许你更改依赖线的颜色。

gantt.templates.link_class = function(link){
    return "";
};

Related sample: Link styles

更多信息可参见链接的颜色和样式自定义文章。

通过链接对象属性设置链接颜色

你也可以通过在链接对象中添加 color 属性来定义依赖链接的自定义颜色：

var tasks = {
  data:[
     // tasks configuration
  ],
  links:[
     {id:1, source:1, target:2, type:"1", color:"red"}, 
     {id:2, source:2, target:3, type:"0", color:"blue"}
  ]
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getLink(2).color = "blue";

更多详情请参见链接的颜色和样式自定义部分。

悬停时的链接颜色

你可以通过 CSS 在鼠标悬停时更改链接颜色：

.gantt_task_link:hover .gantt_line_wrapper div{
    box-shadow: 0 0 5px 0 yellowgreen;
    background: yellowgreen
}
 
.gantt_task_link:hover .gantt_link_arrow_left,
.gantt_task_link:hover .gantt_link_arrow_right{
    border-left-color: yellowgreen !important;
    border-right-color: yellowgreen !important;
}

Related sample: Link color on hover

更多详情请参见链接的颜色和样式自定义文章。

依赖链接的弹窗

drag_link_class 模板允许你自定义在拖动任务间依赖线时显示的弹窗样式。例如，你可以调整弹窗的背景和文本颜色：

<style>
  .gantt_link_tooltip{color:red; background-color:yellow} 
</style>

gantt.templates.drag_link_class = function(from, from_start, to, to_start) {
    return "gantt_link_tooltip" ;
};

更多信息请参见依赖关系链接的模板文章。

从界面编辑链接值

虽然有用于编辑和样式化任务条的 lightbox，但没有内置的界面用于编辑链接。不过，你可以按照专门文章中的方法自行构建界面。

快速信息弹窗样式化

快速信息弹窗的样式通过 'Quick Info' 扩展的模板（触控支持）模板控制。

你可以使用 quick_info_class 模板为弹窗编辑表单应用样式。例如，为特定任务的快速信息弹窗设置样式：

<style>
  .updColor{
    background-color:#ffeb8a!important;
  }
  .updColor .gantt_cal_qi_title{
    background-color:#ffeb8a!important;
  }
</style>

gantt.templates.quick_info_class = function(start, end, task){ 
  if(task.id == "12")
    return "updColor";
 
    return ""
};