dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表。可滿足項目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。
點擊下載dhtmlxGantt試用版
指定列
網(wǎng)格的列配置有columns參數(shù)。
// 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 }
];
總覽
默認情況下，網(wǎng)格包含4列：
-
任務(wù)名稱
-
開始日期
-
持續(xù)時間
-
“ +”列。帶有的特殊列name="add"顯示“ +”號，允許用戶添加任務(wù)的子代。
注意，您無需指定columns參數(shù)即可在網(wǎng)格中顯示默認列。
該列參數(shù)是一個數(shù)組，每一個對象，其中呈現(xiàn)的單個列。因此，例如，要在網(wǎng)格中定義5列：“任務(wù)”，“開始日期”，“結(jié)束日期”，“持有人”，“進度”，請按以下方式指定columns參數(shù)：
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'是數(shù)據(jù)屬性的名稱。
隱藏某些任務(wù)的“添加”按鈕
阻止用戶將子任務(wù)添加到特定任務(wù)的一種非常簡單的方法是通過CSS隱藏“添加”按鈕。
1.首先，使用grid_row_class模板為每個任務(wù)行分配一個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;
}
寬度
要設(shè)置列的寬度，請在相關(guān)列的對象中使用屬性寬度：
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");
使用“ *”值，使該列占據(jù)所有剩余空間。
請注意，Grid列的寬度取決于兩個屬性：列的寬度和grid_width。如果列寬的總和不等于網(wǎng)格的寬度，則甘特將更改參數(shù)之一。
-
通過gantt.init（）初始化甘特圖時，列的寬度是優(yōu)先級。
-
通過gantt.render（）渲染甘特圖時，grid_width是優(yōu)先級。
-
通過gantt.init（）初始化甘特圖時，如果未指定列的寬度或?qū)⑵湓O(shè)置為'*'，則grid_width是優(yōu)先級。
最小/最大列寬
所述MIN_WIDTH / MAX_WIDTH屬性可以被用來限制列的寬度在大小調(diào)整操作的情況下：
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");
數(shù)據(jù)映射和模板
默認情況下，dhtmlxGantt使用與列名稱相對應(yīng)的數(shù)據(jù)屬性填充網(wǎng)格。例如，如果為列設(shè)置名稱：“ holder”，則dhtmlxGantt將在傳入的JSON數(shù)據(jù)中查找此類數(shù)據(jù)屬性，如果存在此類屬性，則將其加載到該列。
使用模板獲取列數(shù)據(jù)
如果要在列中同時顯示多個數(shù)據(jù)屬性，則可以為該列使用任何名稱，但可以通過columns參數(shù)的template屬性設(shè)置數(shù)據(jù)模板。例如，您可以為列指定名稱：“ staff”，并定義一個模板函數(shù)，該函數(shù)將返回holder和progress數(shù)據(jù)屬性以加載到該列中。
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");
文字對齊
要設(shè)置列中文本的水平對齊方式，請在相關(guān)列的對象中使用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代碼
您可以添加一列，以顯示任務(wù)的大綱編號（其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}
];
獲取任務(wù)的WBS代碼
該getWBSCode方法返回的必要任務(wù)的WBS代碼。例如，我們將以下任務(wù)加載到甘特圖中：
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的任務(wù)的WBS代碼。為此，我們將任務(wù)的對象作為參數(shù)傳遞給getWBSCode方法。它將返回帶有任務(wù)的WBS代碼的字符串：
var wbs_code = gantt.getWBSCode(gantt.getTask(3)); // -> returns "1.2"
通過WBS代碼獲取任務(wù)
您還可以通過將任務(wù)的WBS代碼傳遞給getTaskByWBSCode方法來獲取任務(wù)的對象：
var task = gantt.getTaskByWBSCode("1.2");
// => {id:"t1", text:"Task #1, unscheduled: true, duration: 1, …}
任務(wù)的時間限制
您可以添加單獨的網(wǎng)格列，如果選擇的類型需要，則可以設(shè)置任務(wù)的時間約束類型和約束日期。這些列分別具有“ 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 }
];
這些列鏈接到內(nèi)聯(lián)編輯器的對象，這些對象允許為任務(wù)選擇必要的約束類型并在網(wǎng)格中直接編輯其日期。
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)
};
調(diào)整大小
以下功能僅在PRO版中可用
為了使用戶可以通過拖動右列的邊框來調(diào)整列的大小，請在相關(guān)列的對象中使用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" }
];
要通過拖動網(wǎng)格的邊框使整個網(wǎng)格可調(diào)整大小，請使用gantt.config.layout選項，并在內(nèi)部指定具有必要配置的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");
要在調(diào)整列大小時保留網(wǎng)格的大小，請將keep_grid_width選項設(shè)置為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個事件來處理調(diào)整大小行為：
-
onColumnResizeStart-在用戶開始拖動列的邊框以調(diào)整列大小之前觸發(fā)
-
onColumnResize-當用戶拖動列的邊框以調(diào)整列大小時觸發(fā)
-
onColumnResizeEnd-用戶完成拖動列邊框以調(diào)整列大小后觸發(fā)
-
onGridResizeStart-在用戶開始拖動網(wǎng)格邊框以調(diào)整網(wǎng)格大小之前觸發(fā)
-
onGridResize-在用戶拖動網(wǎng)格邊框以調(diào)整網(wǎng)格大小時觸發(fā)
-
onGridResizeEnd-在用戶完成拖動網(wǎng)格的邊框以調(diào)整網(wǎng)格大小后觸發(fā)
能見度
要操縱列的可見性，請在相關(guān)列的對象中使用hide屬性。
通過更改“ hide”屬性的值并刷新甘特圖，可以動態(tài)切換可見性：
此功能僅在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可滾動。 閱讀有關(guān)將布局視圖綁定到滾動條的信息。
網(wǎng)格中水平滾動條的存在使甘特能夠在調(diào)整網(wǎng)格寬度的大小時自動調(diào)整列的寬度。閱讀有關(guān)如何啟用此功能的更多信息。
除了scrollable屬性，您還需要向布局中添加一個水平滾動條元素，并將其連接到網(wǎng)格，如下所示：
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"}
]
};
由于將為網(wǎng)格和時間線顯示單獨的滾動條，因此您可能希望同步它們的可見性，因此兩個滾動條將同時可見或隱藏。
可以通過將兩個滾動條分配給同一可見性組來完成：
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"}
]
};
如果至少一個分配給同一組的滾動條可見，則該組的所有滾動條均可見。
關(guān)產(chǎn)品推薦：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package：對任務(wù)和時間的分配管理的甘特圖
APS幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)計劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計劃，提高準時交貨能力，提高產(chǎn)能和資源利用率
標簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
18次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線