精品国产精品,日韩一卡二卡在线观看,免费香蕉一区二区在线观看

項目管理軟件dhtmlxGantt配置教程（十六）：如何添加垂直標記

翻譯|使用教程|編輯：秦林|2022-11-01 16:08:16.620|閱讀 681 次

概述：本文給大家講解DHTMLX Gantt如何添加垂直標記，包括添加、刪除、隱藏等操作方式，歡迎大家下載試用版體驗！

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

本文給大家講解DHTMLX Gantt如何添加垂直標記。

DHTMLX Gantt正版試用下載

甘特圖圖庫中提供了標記擴展功能，可以幫助您實現標記（突出顯示）某些日期或日期范圍。

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
</head>
<body>
    gantt.plugins({ 
        marker: true 
    }); 
    //your code will be here
</body>
</html>

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@fc6vip.cn

上一篇：界面控件DevExpress WinForm新手指南——添加和自定義工具欄皮膚選擇器下一篇：Word處理控件Aspose.Words功能演示：使用 C++ 拆分 MS Word 文檔