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

그룹화 내 정렬

테이블 시트는 그룹 열과 기본 열 간의 정렬이 작동하는 그룹화 내 정렬을 지원합니다.

아래 이미지는 그룹화 결과를 기반으로 정렬된 결과를 보여주며, “Selling Package” 그룹 열은 오름차순이고 “Year Quarter” 그룹 열과 “Stock Item Key” 기본 열은 내림차순으로 정렬되어 있습니다.



테이블 시트 그룹화에서 정렬을 사용할 때 다음과 같은 동작이 발생합니다:

  • 그룹 열과 해당 원본 열 간에 정렬 상태가 공유됩니다.




  • 그룹 수준에서는 오직 하나의 열만 정렬할 수 있습니다.




  • groupBy를 적용하기 전의 마지막 정렬 상태와 removeGroupBy를 적용한 후의 마지막 정렬 상태가 유지됩니다.

Ask ChatGPT



반면, 필터링은 사용자가 선택한 기준에 따라 관련된 데이터만 표시할 수 있도록 합니다. 기본적으로 그룹화에서는 자동 필터가 활성화되어 있습니다.

Filter_TSGrouping.b2fd90.png

그룹화된 열에서 필터링을 비활성화하려면 allowFilterByValue 및 allowFilterByList 속성을 false로 설정합니다.다음 샘플 코드는 그룹화된 컨텍스트에서 정렬과 필터링을 비활성화하는 예제입니다. 이는 allowSort, allowFilterByValue, allowFilterByList 속성을 false로 설정하여 구현됩니다. 이러한 설정을 통해 사용자는 정렬/필터 대화 상자에 접근할 수 없게 되며, 그룹화된 데이터에서 어떠한 정렬이나 필터링 작업도 수행할 수 없게 됩니다.

var spread, sheet;
$(document).ready(function () {
    // Spread 초기화
    spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 0 });
    spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;

    // 데이터 매니저 초기화
    var dataManager = spread.dataManager();
    var myTable = dataManager.addTable("myTable", {
        remote: {
            read: {
                url: 'https://demodata.grapecity.com/wwi/api/v1/stockItems'
            }
        },
        schema: {
            columns: {
                validFrom: { dataType: "date" }
            }
        }
    });

    // 테이블 시트 초기화
    sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);

    // 테이블 시트에 뷰 바인딩
    myTable.fetch().then(function () {
        var view = myTable.addView("myView", [
            { value: "stockItemKey", width: 150, caption: "Stock Item Key" },
            { value: "stockItem", width: 120, caption: "Stock Item" },
            { value: "buyingPackage", width: 120, caption: "Buying Package" },
            { value: "sellingPackage", width: 120, caption: "Selling Package" },
            { value: "unitPrice", width: 150, caption: "Unit Price" },
            { value: "taxRate", width: 120, caption: "Tax Rate" },
            { value: "validFrom", width: 200, caption: "Valid From" }
        ]);
        sheet.setDataView(view);

    });
});

function grouping() {
    // 단일 필드(Selling package)로 groupBy 생성, 요약 필드 및 슬라이스 필드 포함
    sheet.groupBy([
        {
            caption: "Selling Package", field: "sellingPackage", width: 150, style: { backColor: "#F9CA9A" },
            allowSort: false,
            allowFilterByValue: false,
            allowFilterByList: false,
            summaryFields: [
                {
                    caption: "SUM(Unit Price)",
                    formula: "=SUM([unitPrice])",
                    slice: { field: "=YEAR([@validFrom])", width: 120, style: { backColor: "#FCE3CA", formatter: "#,##0.00" } },
                    width: 150,
                    style: { backColor: "#FAD7B2", formatter: "#,##0.00" }
                }
            ]
        }
    ]);
}

function removeGroup() {
    // 그룹 제거
    sheet.removeGroupBy();
}