열 레이아웃 판매 보고서

새 창에서 데모를 열어 디자이너 열기

다음 단계에 따라 열-레이아웃 판매 보고서를 작성할 수 있습니다.

• DataManager에서 판매 표를 정의합니다.
• 템플릿의 스타일을 설정합니다.
• 데이터 열을 템플릿에 바인딩하고 '그룹' 셀 유형을 사용합니다.
• setLayoutSetting API로 열 레이아웃 설정을 지정합니다.
• PaginatedPreview로 전환하여 보고서를 봅니다.

const spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
spread.options.scrollByPixel = true;
spread.options.scrollbarMaxAlign = true;
const records = [
    ['East China', 'John', 'Banana', 180],
    ['East China', 'Mike', 'Banana', 200],
    ['East China', 'Emma', 'Banana', 210],
    ['East China', 'Sophia', 'Banana', 316],
    ['East China', 'Jennifer', 'Banana', 130],
    ['North China', 'Kristen', 'Banana', 410.0],
    ['North China', 'Mia', 'Banana', 290.0],
    ['North China', 'Bella', 'Banana', 342.0],
    ['North China', 'Eva', 'Banana', 214.0],
    ['East China', 'John', 'Strawberry', 230.0],
    ['East China', 'Mike', 'Strawberry', 641.0],
    ['East China', 'Emma', 'Strawberry', 234.0],
    ['East China', 'Sophia', 'Strawberry', 625.0],
    ['East China', 'Jennifer', 'Strawberry', 241.0],
    ['North China', 'Kristen', 'Strawberry', 195.0],
    ['North China', 'Mia', 'Strawberry', 569.0],
    ['North China', 'Bella', 'Strawberry', 698.0],
    ['North China', 'Eva', 'Strawberry', 214.0],
    ['East China', 'John', 'Watermelon', 147.0],
    ['East China', 'Mike', 'Watermelon', 489.0],
    ['East China', 'Emma', 'Watermelon', 347.0],
    ['East China', 'Sophia', 'Watermelon', 652.0],
    ['East China', 'Jennifer', 'Watermelon', 471.0],
    ['North China', 'Kristen', 'Watermelon', 287.0],
    ['North China', 'Mia', 'Watermelon', 349.0],
    ['North China', 'Bella', 'Watermelon', 163.0],
    ['North China', 'Eva', 'Watermelon', 841.0],
    ['East China', 'John', 'Chips', 292.0],
    ['East China', 'Mike', 'Chips', 514.0],
    ['East China', 'Emma', 'Chips', 256.0],
    ['East China', 'Sophia', 'Chips', 148.0],
    ['East China', 'Jennifer', 'Chips', 486.0],
    ['North China', 'Kristen', 'Chips', 285.0],
    ['North China', 'Mia', 'Chips', 741.0],
    ['North China', 'Bella', 'Chips', 249.0],
    ['North China', 'Eva', 'Chips', 105.0],
    ['East China', 'John', 'Cookie', 554.0],
    ['East China', 'Mike', 'Cookie', 311.0],
    ['East China', 'Emma', 'Cookie', 186.0],
    ['East China', 'Sophia', 'Cookie', 654.0],
    ['East China', 'Jennifer', 'Cookie', 247.0],
    ['North China', 'Kristen', 'Cookie', 143.0],
    ['North China', 'Mia', 'Cookie', 617.0],
    ['North China', 'Bella', 'Cookie', 214.0],
    ['North China', 'Eva', 'Cookie', 324.0],
];
const columns = ['Region', 'Salesman', 'Product', 'Sales'];
const salesTable = spread.dataManager().addTable('Sales', {
    data: records.map((x) => {
        const record = {};
        columns.forEach((c, i) => record[c] = x[i]);
        return record;
    })
});

salesTable.fetch().then(() => {
    const reportSheet = spread.addSheetTab(0, 'Column Layout Sales Report', GC.Spread.Sheets.SheetType.reportSheet);
    const templateSheet = reportSheet.getTemplate();

    templateSheet.defaults.colWidth = 100;
    templateSheet.defaults.rowHeight = 30;
    const headerStyle = new GC.Spread.Sheets.Style();
    headerStyle.backColor = '#E1F5FE';
    headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.left;
    headerStyle.textIndent = 1;
    headerStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    headerStyle.foreColor = '#424242';
    headerStyle.font = '12px "Open Sans"';
    const dataStyle = new GC.Spread.Sheets.Style();
    dataStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    dataStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    dataStyle.foreColor = '#424242';
    dataStyle.font = '12px "Open Sans"';
    const border = new GC.Spread.Sheets.LineBorder('#e0e0e0', 1);
    const border1 = new GC.Spread.Sheets.LineBorder('#333333', 1);
    dataStyle.borderBottom = border;
    dataStyle.borderTop = border;
    dataStyle.borderLeft = border;
    dataStyle.borderRight = border;
    const dataStyle2 = dataStyle.clone();
    dataStyle2.borderBottom = border1;
    templateSheet.setValue(0, 0, 'Column Layout Sales Report');
    templateSheet.addSpan(0, 0, 1, 2);
    templateSheet.setRowHeight(0, 50);
    const titleStyle = headerStyle.clone();
    titleStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    titleStyle.font = '16px "Open Sans"';
    titleStyle.backColor = '#81D4FA';
    templateSheet.setStyle(0, 0, titleStyle);

    columns.forEach((columnName, i) => {
        templateSheet.setValue(i + 1, 0, columnName);
        templateSheet.setStyle(i + 1, 0, headerStyle);
        templateSheet.setStyle(i + 1, 1, i === 3 ? dataStyle2 : dataStyle);
        templateSheet.setTemplateCell(i + 1, 1, {
            type: 'Group',
            binding: `Sales[${columnName}]`,
            spillDirection: 'Horizontal',
        });
    });
    templateSheet.setTemplateCell(0, 0, {
        type: 'Static',
        canBreakWhenPaging: false,
    });

    templateSheet.setLayoutSetting({
        type: 'ColumnLayout',
        dataRange: 'B2:B5',
        columnCount: 10,
        repeatCols: {
            start: 0,
            end: 0,
        }
    });

    reportSheet.renderMode('PaginatedPreview');
});