dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。
點擊下載dhtmlxGantt試用版
指定列
網格的列配置有columns參數。
// default columns definition
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", tree:true },
{name:"start_date", label:"Start time", align:"center" },
{name:"duration", label:"Duration", align:"center" },
{name:"add", label:"", width:44 }
];
總覽
默認情況下，網格包含4列：
-
任務名稱
-
開始日期
-
持續時間
-
“ +”列。帶有的特殊列name="add"顯示“ +”號，允許用戶添加任務的子代。
注意，您無需指定columns參數即可在網格中顯示默認列。
該列參數是一個數組，每一個對象，其中呈現的單個列。因此，例如，要在網格中定義5列：“任務”，“開始日期”，“結束日期”，“持有人”，“進度”，請按以下方式指定columns參數：
gantt.config.columns = [
{name:"text", label:"Task name", tree:true, width:"*" },
{name:"holder", label:"Holder", align:"center" },
{name:"start_date", label:"Start time", align:"center" },
{name:"end_date", label:"End date", align:"center" },
{name:"progress", label:"Progress", align:"center" },
];
gantt.init("gantt_here");
其中'text'，'holder'，'start_date'，'end_date'，'progress'是數據屬性的名稱。
隱藏某些任務的“添加”按鈕
阻止用戶將子任務添加到特定任務的一種非常簡單的方法是通過CSS隱藏“添加”按鈕。
1.首先，使用grid_row_class模板為每個任務行分配一個CSS類：
gantt.templates.grid_row_class = function( start, end, task ){
if ( task.$level > 1 ){
return "nested_task"
}
return "";
};
2.然后，為此類行隱藏“添加”按鈕：
.nested_task .gantt_add{
display: none !important;
}
寬度
要設置列的寬度，請在相關列的對象中使用屬性寬度：
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", tree:true },
{name:"start_date", label:"Start time", width:150 },
{name:"duration", label:"Duration", width:120 }
];
gantt.init("gantt_here");
使用“ *”值，使該列占據所有剩余空間。
請注意，Grid列的寬度取決于兩個屬性：列的寬度和grid_width。如果列寬的總和不等于網格的寬度，則甘特將更改參數之一。
-
通過gantt.init（）初始化甘特圖時，列的寬度是優先級。
-
通過gantt.render（）渲染甘特圖時，grid_width是優先級。
-
通過gantt.init（）初始化甘特圖時，如果未指定列的寬度或將其設置為'*'，則grid_width是優先級。
最小/最大列寬
所述MIN_WIDTH / MAX_WIDTH屬性可以被用來限制列的寬度在大小調整操作的情況下：
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", min_width: 150, max_width:300, tree:true},
{name:"start_date", label:"Start time", width:150 },
{name:"duration", label:"Duration", width:120 }
];
gantt.init("gantt_here");
數據映射和模板
默認情況下，dhtmlxGantt使用與列名稱相對應的數據屬性填充網格。例如，如果為列設置名稱：“ holder”，則dhtmlxGantt將在傳入的JSON數據中查找此類數據屬性，如果存在此類屬性，則將其加載到該列。
使用模板獲取列數據
如果要在列中同時顯示多個數據屬性，則可以為該列使用任何名稱，但可以通過columns參數的template屬性設置數據模板。例如，您可以為列指定名稱：“ staff”，并定義一個模板函數，該函數將返回holder和progress數據屬性以加載到該列中。
gantt.config.columns = [
{name:"text", label:"Task name", tree:true, width:"*" },
{name:"start_date", label:"Start time", align: "center" },
{name:"staff", label:"Holder(s)", template:function(obj){
return obj.holder+"("+obj.progress+")"} }
];
gantt.init("gantt_here");
文字對齊
要設置列中文本的水平對齊方式，請在相關列的對象中使用align屬性：
gantt.config.columns = [
{name:"text", label:"Task name", tree:true, align:"center"},
{name:"start_date", label:"Start time", align: "center" },
{name:"duration", label:"Duration", align: "center" }
];
gantt.init("gantt_here");
WBS代碼
您可以添加一列，以顯示任務的大綱編號（其WBS代碼）。為此，您需要在列模板中使用getWBSCode方法。
gantt.config.columns = [
{name:"wbs", label:"WBS", width:40, template:gantt.getWBSCode },
{name:"text", label:"Task name", tree:true, width:170 },
{name:"start_date", align:"center", width: 90},
{name:"duration", align:"center", width: 60},
{name:"add", width:40}
];
獲取任務的WBS代碼
該getWBSCode方法返回的必要任務的WBS代碼。例如，我們將以下任務加載到甘特圖中：
gantt.parse({
"tasks":[
{"id":1, "text":"Project #1", "start_date":"28-03-2020",
"duration":"11", "parent":"0", "open":true},
{"id":2, "text":"Task #1", "start_date":"01-04-2020",
"duration":"18", "parent":"1"},
{"id":3, "text":"Task #2", "start_date":"02-04-2020",
"duration":"8", "parent":"1"}
],
"links":[]
});
并且我們想要獲取id = 3的任務的WBS代碼。為此，我們將任務的對象作為參數傳遞給getWBSCode方法。它將返回帶有任務的WBS代碼的字符串：
var wbs_code = gantt.getWBSCode(gantt.getTask(3)); // -> returns "1.2"
通過WBS代碼獲取任務
您還可以通過將任務的WBS代碼傳遞給getTaskByWBSCode方法來獲取任務的對象：
var task = gantt.getTaskByWBSCode("1.2");
// => {id:"t1", text:"Task #1, unscheduled: true, duration: 1, …}
任務的時間限制
您可以添加單獨的網格列，如果選擇的類型需要，則可以設置任務的時間約束類型和約束日期。這些列分別具有“ constraint_type”和“ constraint_date”名稱。
gantt.config.columns = [
{
name:"constraint_type", align:"center", width:100,
template:function(task){//template logic},
resize: true, editor: constraintTypeEditor
},
{
name:"constraint_date", align:"center", width:120,
template:function(task){//template logic},
resize: true, editor: constraintDateEditor
},
{ name: "add", width: 44 }
];
這些列鏈接到內聯編輯器的對象，這些對象允許為任務選擇必要的約束類型并在網格中直接編輯其日期。
var constraintTypeEditor = {
type: "select", map_to: "constraint_type", options: [
{ key: "asap", label: gantt.locale.labels.asap },
{ key: "alap", label: gantt.locale.labels.alap },
{ key: "snet", label: gantt.locale.labels.snet },
{ key: "snlt", label: gantt.locale.labels.snlt },
{ key: "fnet", label: gantt.locale.labels.fnet },
{ key: "fnlt", label: gantt.locale.labels.fnlt },
{ key: "mso", label: gantt.locale.labels.mso },
{ key: "mfo", label: gantt.locale.labels.mfo }
]
};
var constraintDateEditor = {
type:"date",
map_to:"constraint_date",
min:new Date(2019, 0, 1),
max:new Date(2020, 0, 1)
};
調整大小
以下功能僅在PRO版中可用
為了使用戶可以通過拖動右列的邊框來調整列的大小，請在相關列的對象中使用resize屬性：
gantt.config.columns = [
{name:"text", tree:true, width:"*",resize:true },//-> 'resize' active
{name:"start_date", resize:true, min_width:100 },//-> 'resize' limited by 'min_width'
{name:"duration", align:"center" }, //-> no resize
{name:"add", width:"44" }
];
要通過拖動網格的邊框使整個網格可調整大小，請使用gantt.config.layout選項，并在內部指定具有必要配置的grid和resizer對象。
gantt.config.layout = {
css: "gantt_container",
rows:[
{
cols: [
{view: "grid", id: "grid", scrollX:"scrollHor", scrollY:"scrollVer"},
{resizer: true, width: 1},
{view: "timeline", id: "timeline", scrollX:"scrollHor", scrollY:"scrollVer"},
{view: "scrollbar", scroll: "y", id:"scrollVer"}
]
},
{view: "scrollbar", scroll: "x", id:"scrollHor", height:20}
]
};
gantt.init("gantt_here");
要在調整列大小時保留網格的大小，請將keep_grid_width選項設置為true：
gantt.config.columns = [
{ name:"text", tree:true, width:"*", resize:true },
{ name:"start_date", align:"center"},
{ name:"duration", align:"center", width:70 },
{ name:"add", width:44 }
];
gantt.config.keep_grid_width = true;
gantt.init("gantt_here");
大事記
dhtmlxGantt提供了6個事件來處理調整大小行為：
-
onColumnResizeStart-在用戶開始拖動列的邊框以調整列大小之前觸發
-
onColumnResize-當用戶拖動列的邊框以調整列大小時觸發
-
onColumnResizeEnd-用戶完成拖動列邊框以調整列大小后觸發
-
onGridResizeStart-在用戶開始拖動網格邊框以調整網格大小之前觸發
-
onGridResize-在用戶拖動網格邊框以調整網格大小時觸發
-
onGridResizeEnd-在用戶完成拖動網格的邊框以調整網格大小后觸發
能見度
要操縱列的可見性，請在相關列的對象中使用hide屬性。
通過更改“ hide”屬性的值并刷新甘特圖，可以動態切換可見性：
此功能僅在PRO版本中可用
在基本視圖和詳細視圖之間切換
gantt.config.columns = [
{name: "text", label: "Task name", width: "*", tree: true, resize: true },
{name: "start_date", label: "Start time" },
{name: "duration", label: "Duration", width: 60, hide:true },
{name: "planned_start", label: "Planned start", hide:true },
{name: "planned_end", label: "Planned end", width:80, hide:true },
{name: "add", label: "", width: 36 }
];
var show_details = false;
function toggleView(){
show_details = !show_details;
gantt.getGridColumn("duration").hide = !show_details;
gantt.getGridColumn("planned_start").hide = !show_details;
gantt.getGridColumn("planned_end").hide = !show_details;
if(show_details){
gantt.config.grid_width = 600;
}else{
gantt.config.grid_width = 300;
}
gantt.render();
};
gantt.init("gantt_here");
水平滾動條
您可以使用布局配置選項的scrollable屬性使Grid可滾動。 閱讀有關將布局視圖綁定到滾動條的信息。
網格中水平滾動條的存在使甘特能夠在調整網格寬度的大小時自動調整列的寬度。閱讀有關如何啟用此功能的更多信息。
除了scrollable屬性，您還需要向布局中添加一個水平滾動條元素，并將其連接到網格，如下所示：
gantt.config.layout = {
css: "gantt_container",
cols: [
{
width:400,
min_width: 300,
// adding horizontal scrollbar to the grid via the scrollX attribute
rows:[
{view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
{view: "scrollbar", id: "gridScroll"}
]
},
{resizer: true, width: 1},
{
rows:[
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollHor"}
]
},
{view: "scrollbar", id: "scrollVer"}
]
};
由于將為網格和時間線顯示單獨的滾動條，因此您可能希望同步它們的可見性，因此兩個滾動條將同時可見或隱藏。
可以通過將兩個滾動條分配給同一可見性組來完成：
gantt.config.layout = {
css: "gantt_container",
cols: [
{
width:400,
min_width: 300,
rows:[
{view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
// horizontal scrollbar for the grid
{view: "scrollbar", id: "gridScroll", group:"horizontal"}
]
},
{resizer: true, width: 1},
{
rows:[
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
// horizontal scrollbar for the timeline
{view: "scrollbar", id: "scrollHor", group:"horizontal"}
]
},
{view: "scrollbar", id: "scrollVer"}
]
};
如果至少一個分配給同一組的滾動條可見，則該組的所有滾動條均可見。
關產品推薦：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package：對任務和時間的分配管理的甘特圖
APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
5次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線