跳到主要内容

timeline_cell_content

Description​

允许在 timeline 单元格内指定自定义 HTML 内容

timeline_cell_content: (task: Task, date: Date) => string | number | void;

Parameters​

  • task - (required) Task - 任务对象
  • date - (required) Date - 对应单元格的日期

Returns​

  • text - (string | number | void) - 一个 HTML 字符串

Example​

gantt.templates.timeline_cell_content = function (task, date) {
    if (gantt.getTaskType(task) === "task"){
        const cost = calculateSlotCost(task, date);
        return `<div className='cost'>${demoValue}</div>`;
    }
    return "";
};

Details​

注释

当你想在 timeline 单元格内显示自定义内容时，推荐使用此模板，而不是 addTaskLayer() 方法。该模板实现更简单且性能更优。

请注意，自定义内容会显示在任务条的下方，因此任务条的 z-index 更高。这意味着如果任务条覆盖了单元格，自定义内容可能会被隐藏。

如果你希望自定义内容显示在任务条之上，可以为自定义元素设置更高的 'z-index':

<style>
    .cost{
        position:absolute;
        z-index: 5;
        pointer-events: none; 
    }
</style>

Change log​

  • 版本 v8.0 新增