项目管理软件dhtmlxGantt配置教程（十六）：如何添加垂直标记-控件新闻-慧都网

项目管理软件dhtmlxGantt配置教程（十六）：如何添加垂直标记

翻译|使用教程|编辑：秦林|2022-11-01 16:08:16.620|阅读 554 次

概述：本文给大家讲解DHTMLX Gantt如何添加垂直标记，包括添加、删除、隐藏等操作方式，欢迎大家下载试用版体验！

1、添加标记

要将标记添加到时间线区域，例如今天的标记，请调用addMarker方法：

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
    start_date: new Date(), //a Date object that sets the marker's date
    css: "today", //a CSS class applied to the marker
    text: "Now", //the marker title
    title: dateToStr( new Date()) // the marker's tooltip
});

注意：作为 'text' 属性的值，该方法可以采用任何 HTML

要获取添加标记的对象，请使用getMarker方法：

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({  
    start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title: dateToStr(new Date()) 
});
gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}

2、删除标记

要删除已添加的标记，请使用deleteMarker方法：

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({  
    start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title: dateToStr(new Date()) 
});
 
gantt.deleteMarker(markerId);

3、隐藏标记

要隐藏所有添加的标记，请将show_markers配置选项设置为“false”：

var marker1 = gantt.addMarker({ ...}); 
var marker2 = gantt.addMarker({ ...}); 
var marker3 = gantt.addMarker({ ...}); 
 
gantt.config.show_markers = false;// hides all 3 markers

4、更新标记

要更新标记，请使用 updateMarker方法：

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({  
    start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title: dateToStr(new Date()) 
});
 
gantt.getMarker(markerId).css = "today_new";
gantt.updateMarker(markerId);

要更新所有添加的标记，请使用 renderMarkers方法：

var marker1 = gantt.addMarker({ ...}); 
var marker2 = gantt.addMarker({ ...}); 
var marker3 = gantt.addMarker({ ...}); 
 
gantt.renderMarkers();

5、样式标记

要设置标记样式，请使用gantt.templates.marker_class模板：

var showAdvancedMarkers;
gantt.templates.marker_class = function(marker){
    if (showAdvancedMarkers)
    return "advanced_marker";
    return "hidden";
}

6、当天的标记

如果您想在甘特图中对今天进行标记。在这种情况下，您需要两者：在页面上添加标记并提供将随着时间变化移动标记的功能。您可以使用以下代码执行此操作：

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
 
var id = gantt.addMarker({ 
    start_date: new Date(), 
    css: "today", 
    title:dateToStr(new Date())
});
setInterval(function(){
    var today = gantt.getMarker(id);
    today.start_date = new Date();
    today.title = date_to_str(today.start_date);
    gantt.updateMarker(id);
}, 1000*60);

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。了解更多内容，欢迎在线咨询或者私信我获取正版试用版及报价。

甘特图控件交流群：764148812 欢迎进群交流讨论

慧都年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

上一篇：界面控件DevExpress WinForm新手指南——添加和自定义工具栏皮肤选择器下一篇：Word处理控件Aspose.Words功能演示：使用 C++ 拆分 MS Word 文档