[]
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) 옵션에서 접근할 수 있습니다.


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

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 });