SpreadJS 데모
비즈니스 특화 기능
리포트시트
데이터 설정
데이터 정렬

데이터 정렬

오름차순, 내림차순 또는 사용자 정의된 순서로 데이터를 정렬하고자 하는 경우가 있습니다.

보고서 템플릿 셀의 데이터 정렬 기능을 사용하여 데이터를 지정된 순서로 정렬할 수 있습니다.

JavaScript
Angular
Vue3
React
설명
app.js
index.html
styles.css
새 창에서 데모를 열어 디자이너 열기

디자이너를 여는 방법

sortOption 인터페이스는 다음과 같습니다.

type DataCellBase = {
    binding?: Binding;
    sortOptions?: SortOption[]; // can set multiple sort rule here.
};
type SortOption = ({
    asc: string;
} | {
    desc: string;
}) & {
    list?: string[]; // custom order list.
};

데이터 정렬 방법은 여러 가지가 있습니다.

  1. 열 값을 기준으로 데이터 정렬

    현재 cellNode의 정렬 기준으로 사용되는 데이터 열을 지정할 수 있으며, 그런 다음 currentNode 부모 그룹 내에서 currentNode 및 자식 노드가 다시 정렬됩니다.

    const spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
const ordersTable = spread.dataManager().addTable('Orders', {
    remote: {
        read: {
            url: 'https://demodata.mescius.io/northwind/api/v1/orders'
        }
    }
});
ordersTable.fetch().then(() => {
    const reportSheet = spread.addSheetTab(0, 'report1', GC.Spread.Sheets.SheetType.reportSheet);
    const templateSheet = reportSheet.getTemplate();
    // set value and binding for the template
    templateSheet.setTemplateCell(1, 0, {
        type: 'List',
        binding: `Orders[customerId]`,
        sortOptions: [ // orderBy freight asc then by shipName asc.
            {
                asc: "freight"
            },
            {
                asc: "shipName"
            }
        ]
    });
    templateSheet.setTemplateCell(1, 1, {
        type: 'List',
        binding: `Orders[freight]`,
    });
    templateSheet.setTemplateCell(1, 2, {
        type: 'List',
        binding: `Orders[shipName]`,
    });
    reportSheet.refresh();
});

  2. 셀을 기준으로 데이터 정렬

    현재 cellNode의 정렬 기준으로 사용되는 cellNode 값을 지정할 수 있습니다. cellNode 값은 현재 cellNode 자식이어야 합니다. 참조된 cellNode에 여러 값이 있으면, 첫 번째 값을 사용합니다.

    참조된 cellNode가 현재 cellNode 자체인 경우, 현재 셀 값을 기준으로 정렬됩니다.

    templateSheet.setTemplateCell(1, 0, {
    type: 'List',
    binding: `Orders[customerId]`,
    sortOptions: [
        {
            desc: "=A2"
        }
    ]
});

  3. 수식을 기준으로 데이터 정렬

    수식을 정렬 옵션으로 사용하여 수식 계산 결과를 기준으로 데이터를 정렬할 수 있습니다.

    templateSheet.setTemplateCell(1, 0, {
    type: 'List',
    binding: 'Orders[orderDate]',
    sortOptions: [
        {
            desc: "=YEAR([@orderDate])"
        },
        {
            asc: "=YEAR([@orderDate])"
        }
    ]
});
templateSheet.setTemplateCell(1, 1, {
    type: "List",
    binding: "Orders[freight]",
});

  4. 목록을 기준으로 데이터 정렬

    각 정렬 옵션의 지정된 값 배열을 사용할 수 있으며, 그런 다음 정렬 결과가 먼저 목록 순서를 기준으로, 그리고 오름차순/내림차순으로 정렬됩니다.

    templateSheet.setTemplateCell(1, 0, {
    type: 'List',
    binding: 'Orders[CustomerId]',
    sortOptions: [
        {
            asc: "customerId",
            list: ["VINET", "TOMSP"]
        }
    ]
});
templateSheet.setTemplateCell(1, 1, {
    type: "List",
    binding: "Orders[freight]",
});
새 창에서 데모를 열어 디자이너 열기 sortOption 인터페이스는 다음과 같습니다. 데이터 정렬 방법은 여러 가지가 있습니다. 열 값을 기준으로 데이터 정렬 현재 cellNode의 정렬 기준으로 사용되는 데이터 열을 지정할 수 있으며, 그런 다음 currentNode 부모 그룹 내에서 currentNode 및 자식 노드가 다시 정렬됩니다. 셀을 기준으로 데이터 정렬 현재 cellNode의 정렬 기준으로 사용되는 cellNode 값을 지정할 수 있습니다. cellNode 값은 현재 cellNode 자식이어야 합니다. 참조된 cellNode에 여러 값이 있으면, 첫 번째 값을 사용합니다. 참조된 cellNode가 현재 cellNode 자체인 경우, 현재 셀 값을 기준으로 정렬됩니다. 수식을 기준으로 데이터 정렬 수식을 정렬 옵션으로 사용하여 수식 계산 결과를 기준으로 데이터를 정렬할 수 있습니다. 목록을 기준으로 데이터 정렬 각 정렬 옵션의 지정된 값 배열을 사용할 수 있으며, 그런 다음 정렬 결과가 먼저 목록 순서를 기준으로, 그리고 오름차순/내림차순으로 정렬됩니다.
window.onload = async () => { const loadingTip = addLoadingTip(); const { spread, designer } = createSpreadAndDesigner(); const res = await fetch('$DEMOROOT$/ko/sample/features/report-sheet/data-settings/data-sort/spread.json'); await spread.fromJSON(correctTableUrl(await res.json())); loadingTip.remove(); if (designer) { designer.refresh(); } } function createSpreadAndDesigner() { const demoHost = document.getElementById('demo-host'); if (window !== top) { return { spread: new GC.Spread.Sheets.Workbook(demoHost, { sheetCount: 1 }), } } else { const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 }); return { designer, spread: designer.getWorkbook(), } } } function addLoadingTip() { const div = document.createElement('div'); div.style.position = 'absolute'; div.style.inset = '0'; div.style.display = 'flex'; div.style.alignItems = 'center'; div.style.justifyContent = 'center'; div.style.background = 'white'; div.style.zIndex = '100'; div.textContent = 'Loading data from server ...'; document.body.appendChild(div); return div; } function correctTableUrl(json) { const baseUrl = '$DEMOROOT$'; const localUrl = 'http://localhost:8070/spreadjs/demos'; const replaceUrl = (obj) => { if (obj && obj.url && obj.url.startsWith(localUrl)) { obj.url = obj.url.replace(localUrl, baseUrl); } } if (json.dataManager && json.dataManager.tables) { json.dataManager.tables.forEach((table) => { if (table.dataSourceOption && table.dataSourceOption.remote) { Object.values(table.dataSourceOption.remote).forEach(replaceUrl); } }); } return json; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script> const designerDependencyScripts = [ '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-excelio/dist/gc.spread.excelio.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-designer-resources-ko/dist/gc.spread.sheets.designer.resource.ko.min.js', '$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js', '$DEMOROOT$/spread/source/js/designer/license.js', ] function appendScriptNode (src) { const script = document.createElement('script'); script.src = src; script.async = false; script.type = 'text/javascript'; document.head.appendChild(script); } if (top === window) { // not in iframe designerDependencyScripts.forEach(appendScriptNode); } </script> <script src="app.js" type="text/javascript"></script> </head> <body> <div class="sample-tutorial"> <div id="demo-host"></div> </div> </body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } #demo-host { width: 100%; height: 100%; overflow: hidden; float: left; }