Sort
You can sort any field in ascending or descending order.
Keep Structure
In GanttSheet, we sort the task tree under its original structure, so the relationship between the child task and parent task will not change.
We also support flat sorting, but that will break the tree structure. These actions will be forbidden after the GanttSheet has been flat sorted:
collapse/expand outline
indent/outdent tasks
renumber
Renumber
After sorting, the taskNumber will changed. If you want to keep the sorted state in your database, you can re-number all of the tasks.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var myTable;
var ganttSheet;
var sortAscending = true;
var sortStructure = true;
var sortRenumber = false;
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
initSplitView(spread);
};
function initSpread(spread) {
spread.suspendPaint();
initDataSource(spread);
initGanttSheet(spread);
spread.resumePaint();
}
function initDataSource(spread) {
var tableName = "Gantt_Id";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
myTable = dataManager.addTable("myTable", {
batch: true,
remote: {
read: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: "rowOrder" }
}
}
});
}
function initGanttSheet(spread) {
ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
var view = myTable.addView("ganttView", [
{ value: "taskNumber", caption: "NO.", width: 60 },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 120 }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
initSidePanel(ganttSheet);
}
function initSidePanel(ganttSheet) {
var sortFieldItem = document.getElementById("sort-field");
var sortAscendingItem = document.getElementById("sort-ascending");
var sortStructureItem = document.getElementById("sort-structure");
var sortRenumberItem = document.getElementById("sort-renumber");
var sortButton = document.getElementById("sort-action");
sortAscendingItem.addEventListener("click", function() {
if (sortAscendingItem.classList.contains("active")) {
sortAscendingItem.classList.remove("active");
sortAscending = false;
} else {
sortAscendingItem.classList.add("active");
sortAscending = true;
}
});
sortStructureItem.addEventListener("click", function() {
if (sortStructureItem.classList.contains("active")) {
sortStructureItem.classList.remove("active");
sortStructure = false;
if (sortRenumber) {
sortRenumberItem.classList.remove("active");
sortRenumber = false;
}
} else {
sortStructureItem.classList.add("active");
sortStructure = true;
}
});
sortRenumberItem.addEventListener("click", function() {
if (sortRenumberItem.classList.contains("active")) {
sortRenumberItem.classList.remove("active");
sortRenumber = false;
} else {
sortRenumberItem.classList.add("active");
sortRenumber = true;
if (!sortStructure) {
sortStructureItem.classList.add("active");
sortStructure = true;
}
}
});
sortButton.addEventListener("click", function() {
var project = ganttSheet.project;
var sortField = sortFieldItem.value;
project.sort([sortField], [sortAscending], sortStructure, sortRenumber);
});
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
function initSplitView(spread) {
var host = document.getElementById("split-view");
var content = host.getElementsByClassName("split-content")[0];
var panel = host.getElementsByClassName("split-panel")[0];
new SplitView({
host: host,
content: content,
panel: panel,
refreshContent: function() {
spread.refresh();
}
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/splitView/splitView.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="split-view" class="sample-tutorial">
<div id="ss" class="sample-spreadsheets split-content"></div>
<div class="options-container split-panel">
<div class="option-row option-title">
Config the sort options.
</div>
<div class="option-block">
<div class="option-row selection-box">
<label for="sort-field">Sort Field</label>
<select id="sort-field">
<option value="taskNumber">taskNumber</option>
<option value="name">name</option>
<option value="duration">duration</option>
<option value="predecessors">predecessors</option>
</select>
</div>
</div>
<div class="option-block">
<div class="option-row">
<label class="option-checkbox active" id="sort-ascending">Ascending</label>
<div class="option-info">* checkbox toggle whether ascending or descending.</div>
</div>
</div>
<div class="option-block">
<div class="option-row">
<label class="option-checkbox active" id="sort-structure">Keep Structure</label>
<div class="option-info">* checkbox toggle whether to keep structure or not.</div>
</div>
</div>
<div class="option-block">
<div class="option-row">
<label class="option-checkbox" id="sort-renumber">Renumber</label>
<div class="option-info">* checkbox toggle whether to renumber or not.</div>
</div>
</div>
<div class="option-row">
<input type="button" id="sort-action" class="option-button" value="Sort" />
</div>
</div>
</div>
</html>
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
box-shadow: inset 0px 0 4px 0 rgba(0,0,0,0.4);
}
.option-block {
background: #fff;
padding: 8px;
margin: 12px 0;
border-radius: 4px;
border: 1px dashed #82bc00;
box-shadow: 0px 0 6px 0 rgba(0,0,0,0.1);
}
.option-block.toggle {
border: 1px dotted #f7a711;
}
.option-row {
font-size: 14px;
box-sizing: border-box;
padding: 4px 0;
}
.option-title {
font-weight: bold;
color: #656565;
}
.option-info {
font-size: 12px;
color: #919191;
margin-top: 6px;
font-weight: normal;
}
.option-info.valid {
color: #82bc00;
}
.option-info.toggle {
color: #f7a711;
}
.option-button {
width: 100%;
padding: 0;
line-height: 20px;
background: #82bc00;
color: #fff;
transition: 0.3s;
cursor: pointer;
outline: none;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
border: none;
}
.option-button:hover {
background: #82bc00;
color: #fff;
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4);
}
.option-checkbox {
background: #fff;
border: 1px dashed #f7a711;
color: #f7a711;
padding: 2px 4px;
transition: 0.3s;
box-sizing: border-box;
cursor: pointer;
}
.option-checkbox.active {
color: #fff;
background: #f7a711;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
border-radius: 4px;
}
.selection-box {
position: relative;
}
.selection-box > select {
text-align: left;
width: 100%;
height: 20px;
padding: 0;
line-height: 20px;
background: transparent;
border: none;
border-bottom: 2px solid #656565;
color: #656565;
transition: 0.3s;
cursor: pointer;
outline: none;
box-sizing: border-box;
}
.selection-box > select > option {
background: white;
}
.selection-box > select:focus {
border-bottom: 2px solid #82bc00;
color: #82bc00;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
}
.selection-box > label {
position: absolute;
cursor: pointer;
font-size: 12px;
color: #fff;
background: #656565;
padding: 0 4px;
right: 0;
top: 6px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
}
.input-box {
position: relative;
}
.input-box > input[type=text] {
width: 100%;
background: transparent;
border: none;
color: #656565;
border-bottom: 2px solid #656565;
outline: none;
box-sizing: border-box;
transition: 0.3s;
}
.input-box > input[type=text]:focus {
color: #82bc00;
border-bottom: 2px solid #82bc00;
}
.input-box > label {
cursor: pointer;
position: absolute;
right: 0;
top: 5px;
font-size: 12px;
color: #fff;
background: #656565;
padding: 0 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
}
