sortRange 메서드를 사용하면 지정된 순서로 범위를 정렬할 수 있으며, 다음 코드를 통해 방법을 확인할 수 있습니다.
사용자는 컨텍스트 메뉴 -> 정렬 또는 필터링을 사용하여 데이터를 정렬할 수도 있습니다.
데이터 형식의 우선 순위는 부울 > 문자열 > 숫자입니다. 예를 들면 TRUE > '4' > 8로 우선 순위가 정해집니다.
정렬 사용자 정의
사용자는 콜백 함수를 사용하여 사용자 정의된 비교 방법을 정의하고 정렬할 수 있습니다.
다음 코드에서 localCompare를 사용하여 정렬하는 방법을 확인할 수 있습니다.
셀 색으로 정렬
사용자가 특별한 정렬 정보에 따라 셀 색을 기준으로 셀을 정렬할 수 있습니다. 이 기능은 단색 채우기, 패턴 채우기, 그라데이션 채우기를 지원합니다.
다음 코드에서는 셀 색으로 정렬하기 위한 배경색 사용을 보여 줍니다.
글꼴 색으로 정렬
사용자가 특별한 정렬 정보에 따라 글꼴 색을 기준으로 셀을 정렬할 수 있습니다. 이 기능은 단색 채우기만 지원합니다.
사용자는 RangeSorting 이벤트가 발생하는 경우에 사용할 콜백 함수를 정의할 수 있습니다.
그룹 정렬
groupSort 옵션을 사용하여 데이터를 그룹화된 상태로 유지할지 설정할 수 있습니다. GroupSort는 다음 유형을 제공합니다.
flat: 그룹을 무시하고 정렬합니다.
group: 정렬을 통해 그룹이 이동하며 그룹 내부는 정렬하지 않습니다.
child: 그룹 내부만 정렬합니다.
full: 정렬을 통해 그룹이 이동하며 그룹 내부도 정렬합니다.
다음 코드에서 groupSort 옵션 사용 방법을 확인할 수 있습니다.
사용자는 RangeSorting 이벤트가 발생하는 경우에 사용할 groupSort 옵션을 정의할 수 있습니다.
숨겨진 값 무시 정렬
정렬 시 숨겨진 값을 무시할지 여부를 설정할 수 있습니다.
ignoreHidden이 true로 설정된 경우, Spread는 숨겨진 값을 건너뛰고 옮기지 않습니다.
ignoreHidden이 true로 설정된 경우, Spread는 숨겨진 값을 비교하고 옮깁니다.
groupSort가 group/child/full로 설정된 경우, SpreadJS는 숨겨진 값을 옮기고, 행/열 가시성을 움직여 값을 숨겨진 상태로 유지합니다.
다음 코드에서 ignoreHidden 옵션 사용 방법을 확인할 수 있습니다.
사용자가 RangeSorting 이벤트가 발생하는 경우에 사용할 ignoreHidden 옵션을 정의할 수 있습니다.
기본적으로 정렬 범위에 그룹이 포함되어 있으면 SpreadJS는 그룹 정렬 옵션을 사용하여 데이터를 정렬합니다. 그렇지 않으면 플랫 정렬을 사용하고 숨겨진 값을 무시합니다.
마지막 정렬 상태 유지
마지막 정렬 작업 설정은 워크시트에 의해 기록되며, getSortState 함수를 사용하여 마지막 정렬 상태를 가져올 수 있습니다.
다음 코드에서 getSortState 함수 사용 방법을 확인할 수 있습니다.
그리고 이제 인수를 전달하지 않고도 sortRange를 호출하여 재정렬을 트리거할 수 있으며, 재정렬 작업은 마지막 정렬 상태를 기반으로 합니다.
사용자는 sortRange를 bind 함수와 함께 사용하여 자동 정렬을 구현할 수 있습니다. 다음 코드에서 간단한 코드 예를 볼 수 있습니다.
시트의 값이 변경될 때 위의 코드가 자동으로 호출되므로, 시트의 값을 변경할 때마다 재정렬이 트리거됩니다.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
spread.suspendPaint();
spread.fromJSON(sjsData);
initSheet0(spread.getSheet(0));
initSheet1(spread.getSheet(1));
initSheet2(spread.getSheet(2));
initSheet3(spread.getSheet(3));
initSheet4(spread.getSheet(4));
initSheet5(spread.getSheet(5));
initSheet6(spread.getSheet(6));
initSheet7(spread.getSheet(7));
initSortStatePanel(spread);
spread.resumePaint();
};
const CELL_COLOR_MAPPING = {
red:"#FF0000",
green:"#00B050",
blue: "#00B0F0",
gradient: {
degree:90,
stops:[
{
color:"#ffffff",
position:0,
},
{
color:"#5B9BD5",
position:1,
}
]
},
pattern: {
patternColor:"",
type:14,
backgroundColor:""
}
}
const FONT_COLOR_MAPPING = {
red:"#FF0000",
blue:"#00B0F0",
purple:"#7030A0",
green:"#92D050",
null:""
}
function initSheet0(sheet) {
var style = sheet.getStyle(4, 7);
style.cellButtons= [{
useButtonStyle: true,
caption: "Sort by last name",
width: 222,
command: function() {
sheet.sortRange(4, 0, 27, 5, true, [
{
index: 1,
ascending: true,
compareFunction: function (value1, value2) {
var str1 = value1.split(" ")[1], str2 = value2.split(" ")[1];
return str1.localeCompare(str2);
}
},
])
},
}];
sheet.setStyle(4, 7, style);
var grade = ["Freshmen", "Sophomore", "Junior", "Senior"];
var clothesSize = ["XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large"];
function compareList(obj1, obj2, list) {
var index1 = list.indexOf(obj1), index2 = list.indexOf(obj2);
if (index1 > index2) {
return 1;
} else if (index1 < index2) {
return -1;
} else {
return 0;
}
}
style = sheet.getStyle(5, 7);
style.cellButtons= [{
useButtonStyle: true,
caption: "Sort by Grade",
width: 222,
command: function() {
sheet.sortRange(4, 0, 27, 5, true, [
{
index: 2,
ascending: true,
compareFunction: function (value1, value2) {
return compareList(value1, value2, grade);
}
},
])
},
}];
sheet.setStyle(5, 7, style);
sheet.setRowHeight(5,35);
style = sheet.getStyle(6, 7);
style.cellButtons= [{
useButtonStyle: true,
caption: "Sort by T-Shirt Size",
width: 222,
command: function() {
sheet.sortRange(4, 0, 27, 5, true, [
{
index: 3,
ascending: true,
compareFunction: function (value1, value2) {
return compareList(value1, value2, clothesSize);
}
},
])
},
}];
sheet.setStyle(6, 7, style);
sheet.setRowHeight(6,35);
}
function initSheet1(sheet) {
function sortDomain (value1, value2) {
var str1 = value1.substr(value1.lastIndexOf(".") + 1), str2 = value2.substr(value2.lastIndexOf(".") + 1);
return str1.localeCompare(str2);
}
function sortIP (ip1, ip2) {
var value1 = ip1.split("."), value2 = ip2.split(".");
for (var i=0; i < 4; i++){
var num1 = parseInt(value1[i]), num2 = parseInt(value2[i]);
if (num1 > num2) {
return 1;
} else if (num1 < num2){
return -1;
}
}
return 0;
}
sheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
if (info.col === 0) {
info.compareFunction = sortDomain;
} else if (info.col === 1) {
info.compareFunction = sortIP;
}
});
}
function initSheet2(sheet) {
sheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
info.groupSort = GC.Spread.Sheets.GroupSort.full;
});
}
function initSheet3(sheet) {
sheet.outlineColumn.options({
columnIndex: 0,
showImage: false,
showIndicator: true,
showCheckBox: true,
maxLevel: 10
});
}
function initSheet4(sheet) {
var style = sheet.getStyle(1, 4);
style.cellButtons= [
{
useButtonStyle: true,
caption: "ignoreHidden = true",
command: function() {
sheet.sortRange(2, 0, 15, 1, true, [
{
index: 0,
ascending: sheet.getValue(1, 3) === '1',
},
], {ignoreHidden: true});
},
}, {
useButtonStyle: true,
caption: "ignoreHidden = false",
command: function() {
sheet.sortRange(2, 0, 15, 1, true, [
{
index: 0,
ascending: sheet.getValue(1, 3) === '1',
},
], {ignoreHidden: false});
},
}, {
useButtonStyle: true,
caption: "groupSort = group",
command: function() {
sheet.sortRange(2, 0, 15, 1, true, [
{
index: 0,
ascending: sheet.getValue(1, 3) === '1',
},
], {groupSort: GC.Spread.Sheets.GroupSort.group});
},
}];
sheet.setStyle(1, 4, style);
}
function initSheet5 (sheet){
sheet.setColumnWidth(4,120);
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [{
caption: "Sort By Cell Color",
useButtonStyle:true,
width: 120,
command: function (sheet) {
var value = sheet.getValue(15,3);
var order = sheet.getValue(15,4);
value = value ? value : "red";
order = order ? order : "top";
var color = CELL_COLOR_MAPPING[value];
sheet.sortRange(3,2,10,1,true,[{
index:2,
backColor:color,
order:order,
}])
}
}];
sheet.setStyle(16,4,style);
}
function initSheet6 (sheet){
sheet.setColumnWidth(4,120);
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [{
caption:"Sort By Font Color",
useButtonStyle:true,
width:120,
command:function (sheet){
var value = sheet.getValue(15,3);
var order = sheet.getValue(15,4);
value = value ? value : "red";
order = order ? order : "top";
var color = FONT_COLOR_MAPPING[value];
sheet.sortRange(3,2,10,1,true,[{
index:2,
fontColor:color,
order:order
}])
}
}];
sheet.setStyle(16,4,style);
}
function initSheet7(sheet) {
sheet.sortRange(2, 2, 10, 1, true, [{ index: 2, ascending: false, compareFunction: undefined }]);
sheet.setSelection(2, 2, 10, 1);
sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function(e, info) {
let sortState = sheet.getSortState();
if (inSortStateRange(sortState, info.row, info.col)) {
sheet.sortRange();
}
});
}
function initSortStatePanel(spread) {
_getElementById('get_SortState_Btn').addEventListener('click', function() {
let sheet = spread.getActiveSheet();
let sortState = sheet.getSortState();
if (!sortState) {
return;
}
let { row, col, rowCount, colCount, byRow, sortConditions } = sortState;
if (sortState) {
let sortStateStr = '';
sortStateStr += "row: " + row + ",\n";
sortStateStr += "col: " + col + ",\n";
sortStateStr += "rowCount: " + rowCount + ",\n";
sortStateStr += "colCount: " + colCount + ",\n";
sortStateStr += "byRow: " + byRow + ",\n";
sortStateStr += "sortCondition: " + JSON.stringify(sortConditions); +"}\n";
document.getElementById("showEventArgs").value = sortStateStr;
}
});
}
function inSortStateRange(sortState, row, col) {
if (row >= sortState.row && row < sortState.row + sortState.rowCount && col >= sortState.col && col < sortState.col + sortState.colCount) {
return true;
}
return false;
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/sorting.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 class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div id="settingsDiv">
<br/>
<label>This text box shows sortState information about the last sort action.</label>
<br/>
<textarea id="showEventArgs" cols="85" rows="8" style="max-width: 98%"></textarea>
<div class="option-row">
<input type="button" id="get_SortState_Btn" value="Get Sort State"/>
</div>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}