grid_row_class

定义分配给 grid 行的 CSS 类

start	Date	任务开始的日期
end	Date	任务预计完成的日期
task	Task	任务对象本身

Example

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

在 grid 和 timeline 区域中，每隔一行都会包含一个额外的 CSS 类，名为 odd，可以用来创建交替行颜色效果：

.gantt_row.odd, .gantt_task_row.odd{
    background: silver;
}
 
.gantt_row, .gantt_task_row {
    background: white;
}

默认情况下，这些样式只应用于偶数行。要对奇数行进行样式设置，必须在 CSS 规则的选择器中添加 odd 类。因此，如果你想让所有行都具有相同颜色，通常需要为两种选择器都写规则（带有和不带有 '.odd' 类），因为默认 CSS 规则具有更高的优先级并会覆盖其他规则。

.gantt_row.odd, .gantt_task_row.odd,
.gantt_row, .gantt_task_row {
    background: white;
}

这种方法同样适用于通过 grid_row_class 和 task_row_class 模板分配的自定义 CSS 类：

index.js

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

index.css

.wheat_color,
.wheat_color.odd{
    background:wheat;
}

你可能会注意到屏幕上偶数行似乎被高亮显示，而不是奇数行。然而，如果你查看行索引，会发现样式实际上应用于奇数索引的行（1、3、5 等）。

Back to top