[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

데이터 정렬

스프레드시트에서 데이터를 정렬할 수 있으며, 정렬 기준이 되는 열 또는 행 인덱스를 지정하고 정렬 조건을 설정할 수 있습니다.

또한 여러 개의 정렬 키를 지정하여 첫 번째 기준 열 또는 행, 두 번째 기준 열 또는 행 등의 순서로 정렬할 수 있습니다.

오름차순 또는 내림차순으로 범위 정렬하기

sortRange메서드를 사용하여 데이터를 정렬할 수 있으며, 이 메서드에서 sortInfo 객체를 통해 정렬 키와 오름차순 또는 내림차순 여부를 지정합니다.

아래 GIF는 열을 오름차순과 내림차순으로 정렬하는 예시를 보여줍니다.


var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.setValue(0, 0, 10);
activeSheet.setValue(1, 0, 100);
activeSheet.setValue(2, 0, 50);
activeSheet.setValue(3, 0, 40);
activeSheet.setValue(4, 0, 80);
activeSheet.setValue(5, 0, 1);
activeSheet.setValue(6, 0, 65);
activeSheet.setValue(7, 0, 20);
activeSheet.setValue(8, 0, 30);
activeSheet.setValue(9, 0, 35);

$("#button1").click(function(){
     // Column1을 오름차순으로 정렬
    activeSheet.sortRange(-1, 0, -1, 1, true, [{index:0, ascending:true}]);
   });
 $("#button2").click(function(){
    // Column1을 내림차순으로 정렬
     activeSheet.sortRange(-1, 0, -1, 1, true, [
       {index:0, ascending:false}
     ]);
 });
//Add button controls to the page

다중 범위 정렬

sortInfo 객체에 여러 정렬 키를 지정하여 여러 범위 기준으로 정렬할 수 있습니다.


$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3});
    var activeSheet = spread.getActiveSheet();
    activeSheet.setRowCount(6);
    activeSheet.setValue(0, 0, 10);
    activeSheet.setValue(1, 0, 100);
    activeSheet.setValue(2, 0, 100);
    activeSheet.setValue(3, 0, 10);
    activeSheet.setValue(4, 0, 5);
    activeSheet.setValue(5, 0, 10);
    activeSheet.setValue(0, 1, 10);
    activeSheet.setValue(1, 1, 40);
    activeSheet.setValue(2, 1, 10);
    activeSheet.setValue(3, 1, 20);
    activeSheet.setValue(4, 1, 10);
    activeSheet.setValue(5, 1, 40);
    $("#button1").click(function()
    {
     // SortInfo 객체 생성: 첫 번째 기준은 Column1(0번째 열)을 오름차순 정렬,
    // 두 번째 기준은 Column2(1번째 열)을 내림차순 정렬        
     var sortInfo =
        [
            {index:0, ascending:true},
            {index:1, ascending:false}
        ];
        // 전체 6행에 대해 (0행부터 시작), 2열(0,1열)에 대해 정렬을 수행
        spread.getActiveSheet().sortRange(0, 0, 6, 2, true, sortInfo);
    });
});

//Add button control to page

셀 배경색 기준으로 정렬

sortInfo.backColor 옵션을 사용하여 셀의 배경색을 기준으로 정렬할 수 있으며, sortInfo.order 옵션으로 셀 색상의 위치를 범위의 상단 또는 하단으로 지정할 수 있습니다.

아래 GIF는 녹색 셀을 하단으로 정렬하는 예시를 보여줍니다.


sheet.setArray(0, 0, [
    ["Order No.","Order Date","Product Type","Qty","Customer ID","Delivery Status"],
    ["1234", "11-Jul", "Electronic", "1", "861861", "Delivered"],
    ["1235", "12-Jul", "Clothing",   "4", "530317", "Past Due"],
    ["1236", "13-Jul", "Cleaning",   "2", "753904", "Past Due"],
    ["1237", "14-Jul", "Food Item",  "6", "623424", "Delivered"],
    ["1238", "15-Jul", "Electronic", "3", "214403", "Past Due"],
    ["1239", "16-Jul", "Clothing",   "7", "105146", "Due in 4 Days"],
    ["1240", "17-Jul", "Cleaning",   "3", "860876", "Past Due"],
    ["1241", "18-Jul", "Food Item",  "8", "126990", "Delivered"],
    ["1242", "19-Jul", "Electronic", "2", "505788", "Delivered"],
    ["1243", "20-Jul", "Clothing",   "5", "298332", "Due in 4 Days"]
]);
            
spread.getSheet(0).getCell(1, 5).backColor("#E2EFDA");            
spread.getSheet(0).getCell(2, 5).backColor("#FCE4D6");            
spread.getSheet(0).getCell(3, 5).backColor("#FCE4D6");            
spread.getSheet(0).getCell(4, 5).backColor("#E2EFDA");            
spread.getSheet(0).getCell(5, 5).backColor("#FCE4D6");            
spread.getSheet(0).getCell(6, 5).backColor("#FFF2CC");            
spread.getSheet(0).getCell(7, 5).backColor("#FCE4D6");            
spread.getSheet(0).getCell(8, 5).backColor("#E2EFDA");            
spread.getSheet(0).getCell(9, 5).backColor("#E2EFDA");            
spread.getSheet(0).getCell(10, 5).backColor("#FFF2CC");

var ColorList = new GC.Spread.Sheets.CellTypes.RadioButtonList();
ColorList.items([
    { text: "Green", value: "green" },
    { text: "Red", value: "red" }, 
    { text: "Yellow", value: "yellow" }
]);
spread.getSheet(0).getCell(12, 2).cellType(ColorList);

var OrderList = new GC.Spread.Sheets.CellTypes.RadioButtonList();
OrderList.items([
    { text: "Top", value: "top" },
    { text: "Bottom", value: "bottom" }
]);
spread.getSheet(0).getCell(12, 3).cellType(OrderList);
  
sortBackColor(spread.getSheet(0));
    
function sortBackColor (sheet){
    const CELL_COLOR_MAPPING = {
        green: "#E2EFDA",
        red: "#FCE4D6",
        yellow: "#FFF2CC",
    }
    sheet.setColumnWidth(3,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(12,2);
        var order = sheet.getValue(12,3);
        value = value ? value : "green";
        order = order ? order : "top";
        var color = CELL_COLOR_MAPPING[value];
        sheet.sortRange(1,0,10,6,true,[{
            index:5,
            backColor:color,
            order:order,
        }])
    }
    }];
    sheet.setStyle(13,3,style);
}

SpreadJS 디자이너에서 사용하기

SpreadJS 디자이너에서는 "정렬 기준(SortOn)" 드롭다운의 "셀 색(Cell Color)" 옵션을 선택하여 배경색 기준으로 정렬할 수 있습니다.

정렬 대화상자는 홈 > 편집 > 정렬 및 필터 > 사용자 지정 정렬 경로에서 접근할 수 있습니다.


글꼴 색상 기준 정렬

셀의 글꼴 색상을 기준으로 정렬할 수 있습니다. 이를 위해 sortInfo.foreColor 옵션을 사용합니다. 선택된 범위 내에서 글꼴 색상이 일치하는 셀들은 sortInfo.order 옵션에 따라 위(top) 또는 아래(bottom) 에 그룹화됩니다.

아래 GIF는 빨간색 글꼴을 가진 셀들이 맨 위로 정렬되는 모습을 보여줍니다.


spread.getSheet(1).setArray(0, 0, [
    ["Order No.","Order Date","Product Type","Qty","Customer ID","Delivery Status"],
    ["1234", "11-Jul", "Electronic", "1", "861861", "Delivered"],
    ["1235", "12-Jul", "Clothing",   "4", "530317", "Past Due"],
    ["1236", "13-Jul", "Cleaning",   "2", "753904", "Past Due"],
    ["1237", "14-Jul", "Food Item",  "6", "623424", "Delivered"],
    ["1238", "15-Jul", "Electronic", "3", "214403", "Past Due"],
    ["1239", "16-Jul", "Clothing",   "7", "105146", "Due in 4 Days"],
    ["1240", "17-Jul", "Cleaning",   "3", "860876", "Past Due"],
    ["1241", "18-Jul", "Food Item",  "8", "126990", "Delivered"],
    ["1242", "19-Jul", "Electronic", "2", "505788", "Delivered"],
    ["1243", "20-Jul", "Clothing",   "5", "298332", "Due in 4 Days"]
]);

spread.getSheet(1).name("Sort by font color");
spread.getSheet(1).getCell(1, 5).foreColor("#548235");            
spread.getSheet(1).getCell(2, 5).foreColor("#C65911");            
spread.getSheet(1).getCell(3, 5).foreColor("#C65911");            
spread.getSheet(1).getCell(4, 5).foreColor("#548235");            
spread.getSheet(1).getCell(5, 5).foreColor("#C65911");            
spread.getSheet(1).getCell(6, 5).foreColor("#BF8F00");            
spread.getSheet(1).getCell(7, 5).foreColor("#C65911");            
spread.getSheet(1).getCell(8, 5).foreColor("#548235");            
spread.getSheet(1).getCell(9, 5).foreColor("#548235");            
spread.getSheet(1).getCell(10, 5).foreColor("#BF8F00");

var FontColorList = new GC.Spread.Sheets.CellTypes.RadioButtonList();
FontColorList.items([
    { text: "Green", value: "green" },
    { text: "Red", value: "red" }, 
    { text: "Yellow", value: "yellow" }
]);
spread.getSheet(1).getCell(12, 2).cellType(FontColorList);

var FontColorOrder = new GC.Spread.Sheets.CellTypes.RadioButtonList();
FontColorOrder.items([
    { text: "Top", value: "top" },
    { text: "Bottom", value: "bottom" }
]);
spread.getSheet(1).getCell(12, 3).cellType(FontColorOrder);
  
sortFontColor(spread.getSheet(1));

function sortFontColor (sheet){
    const FONT_COLOR_MAPPING = {
        green:"#548235",
        red:"#C65911",
        yellow: "#BF8F00"
    }
    sheet.setColumnWidth(3,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(12,2);
                var order = sheet.getValue(12,3);
                value = value ? value : "green";
                order = order ? order : "top";
                var color = FONT_COLOR_MAPPING[value];
                sheet.sortRange(1,0,10,6,true,[{
                    index:5,
                    fontColor:color,
                    order:order
                }])
            }
        }];
    sheet.setStyle(13,3,style);
}

SpreadJS 디자이너 사용하기

"정렬 기준(SortOn)" 드롭다운에서 "글꼴 색(Font Color)" 옵션을 선택하여 글꼴 색상 기준으로 정렬할 수 있습니다.

정렬 대화 상자는 홈 > 편집 > 정렬 및 필터 > 사용자 지정 정렬(Custom Sort) 옵션에서 접근할 수 있습니다.


마지막 정렬 상태 유지

데이터를 정렬할 때, 기본값이나 마지막으로 적용된 정렬 상태를 유지할 수 있습니다.

정렬 상태는 다른 정렬 순서를 적용해도 변경되지 않습니다. 현재 워크시트의 마지막 정렬 상태를 확인하려면 getSortState 메서드를 사용하고, 데이터를 다시 정렬하려면 sortRange 메서드를 사용합니다.

아래 이미지는 정렬 상태가 유지된 모습을 보여줍니다.

lastsortstate.28a809.png

다음 예제 코드는 워크시트의 ValueChanged 이벤트를 구현한 것으로, 변경이 감지될 때마다 getSortRange로 정렬 상태를 복원하고 sortRange 메서드를 호출합니다.

// 값이 변경될 때마다 자동으로 정렬 호출
sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
     let sortState = sheet.getSortState();
     if (inSortStateRange(sortState, info.row, info.col)) {
         sheet.sortRange();
     }
});

참고:

  • 이 기능은 SSJSON, SJS, XLSX 형식의 내보내기/가져오기를 지원합니다.

  • worksheet.getSortState()로 필터링 시, 정렬 상태는 반환되지 않습니다.

정렬 시 숨겨진 데이터 무시하기

API에서 ignoreHidden 옵션을 사용하면 정렬 시 숨겨진 데이터를 건너뛸 수 있습니다.

셀 또는 범위가 다음 조건 중 하나 이상에 해당하면 숨겨진 것으로 간주됩니다:

  • 행 높이나 열 너비가 0인 경우

  • 행 또는 열이 숨김 처리된 경우

  • 행 또는 열이 필터링되어 제외된 경우

  • 일부 행 또는 열이 그룹화되었고 확장되지 않은 경우

아래 예제에서는 숨겨진 행(A5:A6) 을 포함하고 있으며, ignoreHidden 값에 따라 정렬 결과가 어떻게 달라지는지를 보여줍니다:

원본 데이터

ignoreHidden가 true인 경우

ignoreHidden 가 false인 경우




다음 코드는 숨겨진 행을 건너뛰며 데이터 정렬을 수행하는 방법을 보여줍니다:

// 활성화 시트 가져오기
var activeSheet = spread.getSheet(0);
// 데이터 설정
activeSheet.setValue(0, 0, "Name");
activeSheet.setValue(0, 1, "Age");
activeSheet.setValue(1, 0, "Rick");
activeSheet.setValue(1, 1, 52);
activeSheet.setValue(2, 0, "Tim");
activeSheet.setValue(2, 1, 50);
activeSheet.setValue(3, 0, "Jerry");
activeSheet.setValue(3, 1, 46);
activeSheet.setValue(4, 0, "Jack");
activeSheet.setValue(4, 1, 98);
activeSheet.setValue(5, 0, "Sandy");
activeSheet.setValue(5, 1, 99);
activeSheet.setValue(6, 0, "Smith");
activeSheet.setValue(6, 1, 42);
activeSheet.setValue(7, 0, "Greg");
activeSheet.setValue(7, 1, 41);
activeSheet.setValue(8, 0, "Sia");
activeSheet.setValue(8, 1, 36);
activeSheet.setValue(9, 0, "Jennet");
activeSheet.setValue(9, 1, 38);
activeSheet.setValue(10, 0, "Rachel");
activeSheet.setValue(10, 1, 37);
// 행 숨김
activeSheet.setRowHeight(4, 0.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setRowHeight(5, 0.0, GC.Spread.Sheets.SheetArea.viewport);

ignoreHidden을 true로 설정하여 "Age" 열을 정렬합니다.
activeSheet.sortRange(1, 1, 10, 1, true, [{ index: 1, ascending: true }], { ignoreHidden: true });

SpreadJS는 groupSort 열거형을 사용하여 그룹화된 데이터를 정렬할 수도 있습니다. 그룹화되어 펼쳐지지 않은 데이터는 숨겨진 행 또는 열로 간주됩니다. 그룹화된 데이터 정렬에 대한 자세한 내용은 그룹화된 데이터와 함께 정렬 항목을 참고하시기 바랍니다.

groupSort와 ignoreHidden을 함께 사용할 때의 동작 방식은 아래 표와 같습니다:

groupSort 값

ignoreHidden = true

ignoreHidden = false

ignoreHidden 미설정

group, child 또는 full

그룹 정렬이 작동하며, 숨겨진 값은 무시되지 않음

groupSort flat

숨겨진 값 무시함

숨겨진 값 무시하지 않음

숨겨진 값 무시함

groupSort 미설정

숨겨진 값 무시함

숨겨진 값 무시하지 않음

정렬 범위에 그룹이 있으면 그룹 정렬 적용됨

정렬 범위에 그룹이 없으면 숨겨진 값 무시함

아래 코드는 ignoreHidden과 groupSort를 함께 사용하는 방법을 보여줍니다.

// 데이터 설정
 activeSheet.setArray(3, 0, [
     [6221], [5125], ['Samsung'], [4348], [3432], ['LG'], [1928], [2290], ['Oppo'], [8939], [7006], ['Apple']
 ]);
 activeSheet.rowOutlines.group(3, 2);
 activeSheet.rowOutlines.group(6, 2);
 activeSheet.rowOutlines.group(9, 2);
 activeSheet.rowOutlines.group(12, 2);
 spread.resumePaint();

 // rowFilter 설정
 activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(3, 0, 13, 1)));

 // 행 숨김
 activeSheet.setRowHeight(4, 0.0, GC.Spread.Sheets.SheetArea.viewport);
 activeSheet.setRowHeight(5, 0.0, GC.Spread.Sheets.SheetArea.viewport);

// 1) 필터 대화상자를 사용하여 그룹 기능과 ignoreHidden 기능을 포함한 정렬을 수행하려면 RangeSorting 이벤트를 사용해야 함
 spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
    // groupSort 를 full로 설정
     info.groupSort = GC.Spread.Sheets.GroupSort.full;
    // ignoreHidden 을 true로 설정
     info.ignoreHidden = true;
 });

// 2) API를 사용하여 그룹 기능과 ignoreHidden 기능을 포함한 정렬을 수행하려면 다음 코드 사용
 // activeSheet.sortRange(3, 0, 13, 1, true, [{ index: 0, ascending: true }], { ignoreHidden: true, groupSort: GC.Spread.Sheets.GroupSort.full });

정렬 시 데이터 헤더 제외

워크시트에서 데이터를 정렬할 때, 헤더 행은 고정하여 열 제목이 데이터와 함께 정렬되지 않도록 하는 경우가 많습니다.

SpreadJS는 선택한 범위에서 헤더 행을 자동으로 감지하고, 이를 정렬에서 제외할 수 있습니다.

지원 환경

  • SpreadJS 디자이너의 사용자 지정 정렬(Custom Sort) 대화 상자에서 접근 가능.

  • 테이블, 일반 범위, 조건 필터가 적용된 데이터셋에서도 사용 가능.

  • 헤더 감지는 위에서 아래로(top-to-bottom) 정렬할 때만 적용.

주요 장점

  • 자동 헤더 감지

    SpreadJS가 선택 범위의 최상단 행을 기준으로 헤더를 감지하고 데이터 범위와 분리합니다.

    필요시 바로 위 행까지 평가하며, 셀 유형, 내용, 스타일 차이를 기준으로 판단합니다. 일부 빈 셀은 허용됩니다.

    명확한 헤더를 감지하지 못하면, 기본적으로 현재 선택 범위의 첫 번째 행이 헤더로 사용됩니다.

  • 간편한 워크플로우

    전체 데이터셋을 바로 정렬할 수 있으며, 헤더가 자동으로 보호되므로 열 제목이 잘못 정렬될 가능성이 줄어듭니다.

  • 정확한 정렬 라벨

    헤더가 감지되면, 정렬 대화 상자의 SortBy 목록에 헤더 텍스트가 표시됩니다.

    “My Data Has Headers” 옵션을 해제하면, 열 문자가 기본값으로 표시됩니다(예: Column A, Column B).

정렬 수행 방법

  1. 워크시트에서 정렬하려는 데이터 범위를 선택합니다.

  2. 사용자 지정 정렬(Custom Sort) 대화 상자를 엽니다.

  • 방법 1: 데이터(Data) 탭 → 정렬 및 필터(Sort & Filter) 그룹 → 정렬(Sort) 클릭

    image.63837f.png

  • 방법 2: 선택한 범위에서 마우스 오른쪽 클릭 → 정렬(Sort) → 사용자 지정 정렬(Custom Sort) 선택

    image.31c383.png

정렬 동작 예시

시나리오

동작

예시

헤더가 감지된 범위

  • “My Data Has Headers” 자동 선택

  • Sort 대화 상자에서 헤더 텍스트 표시

헤더가 있는 범위: image.308b89.png

헤더 없는 범위: image.01c576.png

헤더 감지 불가 범위

  • “My Data Has Headers” 해제

  • Sort 대화 상자에서 기본 열 참조 표시(예: Column A, Column B)

image.c850ec.png

테이블, 헤더 표시

  • “My Data Has Headers” 선택 및 비활성화

  • 모든 행 정렬

  • SpreadJS가 헤더 자동 제외 관리

image.6cad02.png

테이블, 헤더 숨김

  • “My Data Has Headers” 해제 및 비활성화

  • 모든 행 정렬

  • SortBy 목록에 기본 열 참조 표시

image.262b4d.png

필터링된 범위

  • “My Data Has Headers” 옵션 비활성화

image.84b366.png

좌→우 정렬

  • “My Data Has Headers” 옵션 비활성화

image.45ffaf.png

헤더 행에 빈 셀 포함

  • SortBy 목록에 기본 열 참조 표시

image.f39fac.png

참고:

  • Custom Sort 기억: 사용자 지정 정렬 대화 상자는 선택한 범위의 마지막 정렬 구성을 자동으로 기억합니다. 나중에 열 수준이나 정렬 순서를 다시 확인하거나 수정할 수 있습니다.

  • 원클릭 정렬: A→Z 또는 Z→A 명령 사용 시

    • 파일을 열고 처음 정렬할 경우, SpreadJS가 선택 범위의 첫 행이 헤더인지 확인 후 정렬에서 제외

    • 이후 사용자 지정 정렬을 수행하면, 마지막 “My Data Has Headers” 옵션 상태가 기억되어 동일 세션 내 모든 원클릭 정렬에 적용