bardelman-dhtmlx-gantt-redux
Version:
An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.
55 lines (48 loc) • 1.57 kB
HTML
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Custom sorting function</title>
<script src="../../codebase/dhtmlxgantt.js?v=9.0.10"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=9.0.10">
<link rel="stylesheet" href="../common/controls_styles.css?v=9.0.10">
<script src="../common/testdata.js?v=9.0.10"></script>
</head>
<body style="margin: 0">
<div class="gantt_control">
<input type='button' value='Sort by the number of users' onclick='sortByHolders(direction)'>
</div>
<div id="gantt_here" style='width:100%; height:calc(100vh - 52px);'></div>
<script>
var direction = false;
function sortByHolders(direction1) {
direction = !direction;
gantt.sort(sortHolders);
}
function sortHolders(a, b) {
a = a.users.length;
b = b.users.length;
if (direction) {
return a > b ? 1 : (a < b ? -1 : 0);
} else {
return a > b ? -1 : (a < b ? 1 : 0);
}
}
gantt.config.columns = [
{name: "text", label: "Task name", tree: true, resize: true, width: 160},
{ name: "start_date", label: "Start time", resize: true, width: 100 },
{ name: "duration", label: "Duration", resize: true, width: 50 },
{
name: "users", label: "Users", width: 120, resize: true, align: "center", template: function (task) {
if (task.users && Array.isArray(task.users)){
return task.users.join();
} else {
return "";
}
}
},
{ name: "add", label: "", width: 44 }
];
gantt.init("gantt_here");
gantt.parse(users_data);
</script>
</body>