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

그룹화에서 셀 타입 사용

SpreadJS에서는 그룹화된 열에 서로 다른 셀 타입을 추가할 수 있습니다. 예를 들어 그룹화된 열에 하이퍼링크 셀 타입을 추가하면 사용자가 하이퍼링크 셀을 클릭하여 특정 페이지로 이동할 수 있습니다.

Hyperlink_TSGrouping.0f1ab6.png

참고: 셀 타입은 tabular 그룹화 레이아웃에서만 그룹화된 열에 적용할 수 있습니다.

그룹화된 열에 하이퍼링크를 생성하려면 하이퍼링크 셀 타입을 정의하고 해당 열에 할당합니다. 다음 샘플 코드는 하이퍼링크 셀 타입을 사용하는 그룹화 정보를 추가하고 값이나 목록에 의한 정렬 및 필터링을 비활성화합니다.

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);
    h = new GC.Spread.Sheets.CellTypes.HyperLink();
    h.linkToolTip('This is the link to SpreadJS site');
    spread.commandManager().register('setSheetTabStyle', {
        canUndo: true,
        execute: function (context, options, isUndo) {
           alert("Clicked");
        }
    }, null, false, false, false, false);
    h.onClickAction(() => {
        spread.commandManager().execute({ cmd: 'setSheetTabStyle' });
    });

    // 테이블 시트에 뷰 바인딩
    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" }, style: { cellType: h },
            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" }
                }
            ]
        }
    ]);
}