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

사용자 정의 정렬

단순한 오름차순 또는 내림차순 정렬만으로는 충분하지 않은 다양한 상황이 있을 수 있습니다. 예를 들어, 의류 사이즈를 XXS, XS, S, M, L, XL, XXL 등의 순서로 정렬하려면 항목을 비교한 후 정렬해야 합니다.

이러한 유형의 정렬은 사용자 정의 정렬(Customized Sorting)이라고 하며, SpreadJS는 이를 위해 Events.RangeSorting 이벤트와 이벤트 정보 내 compareFunction 기능을 제공합니다.

아래 GIF는 의류 사이즈에 대해 사용자 정의 정렬을 수행하는 예시를 보여줍니다.




아래 코드는 의류 사이즈 목록을 사용자 정의 정렬하는 방법을 보여줍니다.

// Spread 초기화 
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 활성 시트 가져오기
var activeSheet = spread.getActiveSheet();
// 데이터 설정
activeSheet.setArray(1, 1, [
    ["Men's clothing sizes"], [],
    ["XXS", "166–170"],
    ["XS", "168–173"],
    ["S", "171–176"],
    ["M", "174–179"],
    ["L", "177–182"],
    ["XL", "180–184"],
    ["XXL", "182–186"],
    ["3XL", "184–188"],
    ["4XL", "187–190"]]);
// 의류 사이즈를 XXS부터 7XL까지 정렬하는 함수
function compareList(obj1, obj2) {
    var list = ["XXS", "XS", "S", "M", "L", "XL", "XXL", "3XL", "4XL", "5XL", "6XL", "7XL"];
    var index1 = list.indexOf(obj1), index2 = list.indexOf(obj2);
    if (index1 > index2) {
        return 1;
    } else if (index1 < index2) {
        return -1;
    } else {
        return 0;
    }
}
activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(3, 1, 9, 2)));
activeSheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
    info.compareFunction = compareList;
});

참고: 사용자 정의 UI 정렬에서는 색상(스타일)에 대한 정렬은 지원되지 않습니다.

Ask ChatGPT