jetsum_dhtmlx_gantt
Version:
An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.
166 lines (145 loc) • 5.46 kB
HTML
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Multi level task grouping</title>
<script src="../../codebase/dhtmlxgantt.js?v=7.1.9"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=7.1.9">
<link rel="stylesheet" href="../common/controls_styles.css?v=7.1.9">
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.summary-row,
.summary-row.odd {
background-color: #EEEEEE;
font-weight: bold;
}
.gantt_grid div,
.gantt_data_area div {
font-size: 12px;
}
.summary-bar {
opacity: 0.4;
}
</style>
</head>
<body>
<div class="gantt_control">
<input type='button' id='default' onclick="showGroups()" value="Tree">
<input type='button' id='priority' onclick="showGroups('priority')" value="Group by priority">
<input type='button' id='user' onclick="showGroups('userGroups')" value="Group by owner">
<input type='button' id='stage' onclick="showGroups('stage')" value="Group by stage">
</div>
<div id="gantt_here" style='width:100%; height:calc(100vh - 52px);'></div>
<script>
gantt.plugins({
grouping: true
});
// test data
var tasks = {
data: [
{id: 1, text: "Task #1", start_date: "02-04-2018 00:00", duration: 3, priority: 3, stage: 1, user: 3, open: true, parent: 0},
{id: 5, text: "Task #1.1", start_date: "05-04-2018 00:00", duration: 4, parent: 1, open: true, priority: 1, stage: 1, user: 1},
{id: 6, text: "Task #1.2", start_date: "11-04-2018 00:00", duration: 6, parent: 1, open: true, priority: 2, stage: 2, user: 3},
{id: 2, text: "Task #2", start_date: "11-04-2018 00:00", duration: 2, priority: 1, stage: 3, user: 0, open: true, parent: 0},
{id: 7, text: "Task #2.1", start_date: "13-04-2018 00:00", duration: 2, parent: 2, open: true, priority: 3, stage: 2, user: 2},
{id: 3, text: "Task #3", start_date: "11-04-2018 00:00", duration: 6, priority: 2, stage: 2, user: 1, open: true, parent: 0},
{id: 8, text: "Task #3.1", start_date: "09-04-2018 00:00", duration: 3, parent: 3, open: true, priority: 1, stage: 1, user: 3},
{id: 9, text: "Task #3.2", start_date: "12-04-2018 00:00", duration: 2, parent: 3, open: true, priority: 3, stage: 3, user: 1},
{id: 10, text: "Task #3.3", start_date: "17-04-2018 00:00", duration: 2, parent: 3, open: true, priority: 2, stage: 2, user: 0}
], links: [
{source: "1", target: "5", type: "0"},
{source: "5", target: "8", type: "0"},
{source: "3", target: "7", type: "0"},
{source: "6", target: "7", type: "0"},
{source: "2", target: "10", type: "0"}
]
};
gantt.serverList("stage", [
{key: 1, label: "Planning"},
{key: 2, label: "Dev"},
{key: 3, label: "Testing"}
]);
gantt.serverList("user", [
{key: 0, label: "N/A"},
{key: 1, label: "John"},
{key: 2, label: "Mike"},
{key: 3, label: "Anna"}
]);
gantt.serverList("userGroups", [
{key: 0, label: "N/A", user: 6},
{key: 1, label: "John", user: 4},
{key: 2, label: "Mike", user: 5},
{key: 3, label: "Anna", user: 4},
//multi level groups
{key: 4, label: "Dev"},
{key: 5, label: "QA"},
{key: 6, label: "Other"}
]);
gantt.serverList("priority", [
{key: 1, label: "High"},
{key: 2, label: "Normal"},
{key: 3, label: "Low"}
]);
// end text data
gantt.config.grid_width = 420;
gantt.config.row_height = 24;
gantt.config.grid_resize = true;
gantt.locale.labels.column_priority = gantt.locale.labels.section_priority = "Priority";
gantt.locale.labels.column_owner = gantt.locale.labels.section_owner = "Owner";
gantt.locale.labels.column_stage = gantt.locale.labels.section_stage = "Stage";
function byId(list, id) {
for (var i = 0; i < list.length; i++) {
if (list[i].key == id)
return list[i].label || "";
}
return "";
}
gantt.config.columns = [
{ name: "text", label: "Task name", tree: true, width: '*' },
{ name: "priority", width: 80, align: "center", template: function (item) {
return byId(gantt.serverList('priority'), item.priority)
}},
{ name: "owner", width: 80, align: "center", template: function (item) {
return byId(gantt.serverList('user'), item.user)
}},
{ name: "stage", width: 80, align: "center", template: function (item) {
return byId(gantt.serverList('stage'), item.stage)
}},
{ name: "add", width: 40 }
];
gantt.config.lightbox.sections = [
{name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
{name: "priority", height: 22, map_to: "priority", type: "select", options: gantt.serverList("priority")},
{name: "owner", height: 22, map_to: "user", type: "select", options: gantt.serverList("user")},
{name: "stage", height: 22, map_to: "stage", type: "select", options: gantt.serverList("stage")},
{name: "time", type: "duration", map_to: "auto"}
];
gantt.templates.grid_row_class = gantt.templates.task_row_class = function (start, end, task) {
if (task.$virtual)
return "summary-row"
};
gantt.templates.task_class = function (start, end, task) {
if (task.$virtual)
return "summary-bar";
};
gantt.init("gantt_here");
gantt.parse(tasks);
function showGroups(listname) {
if (listname) {
var relation = listname == 'userGroups' ? 'user' : listname;
gantt.groupBy({
groups: gantt.serverList(listname),
relation_property: relation,
group_id: "key",
group_text: "label"
});
} else {
gantt.groupBy(false);
}
}
</script>
</body>