UNPKG

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
<!DOCTYPE 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>