피벗 테이블 레이아웃

SpreadJS 피벗 테이블에서는 압축 형식, 개요 형식 및 표 형식, 이렇게 3가지 종류의 레이아웃을 제공합니다. 레이아웃이 어떻게 바뀌는지 보기 위해 아래 데모에서 드롭다운 메뉴를 사용하여 레이아웃을 변경해 보십시오.

피벗 테이블에는 다음과 같이 3가지 레이아웃이 있습니다. 압축 형식 개요 형식 표 형식 기본 레이아웃은 압축 형식입니다. 각 레이아웃 유형에 대한 설명은 다음과 같습니다. 압축 형식 1.행 레이블 압축 형식에서 각 행 레이블은 별도의 행에 있습니다. 행 필드 레이블은 항상 내부 필드에 대한 레이블 위에 있습니다. 각 행 레이블은 필드와 구분하기 위해 위에 있는 필드보다 약간 들여쓰기됩니다. 행 레이블은 반복할 수 없습니다. 들여쓰기는 레이아웃 및 서식 탭의 피벗 테이블 옵션에서 변경할 수 있습니다. 2.행 필드 압축 형식에서 모든 행 필드는 단일 열에 있습니다. 행 필드 열에는 일반 제목인 행 레이블이 있습니다. 3.부분합 압축 형식에서 부분합은 각 그룹의 맨 위 또는 맨 아래에 표시할 수 있습니다. 이 설정은 모든 행 필드에 영향을 미칩니다. 열 필드의 경우 부분합은 항상 맨 아래에 표시됩니다. 부분합이 맨 아래에 표시되더라도 행 레이블은 맨 위에 있습니다. 개요 형식 1.행 레이블 개요 형식에서 각 행 레이블은 별도의 행에 있습니다. 행 필드 레이블은 항상 내부 필드에 대한 레이블 위에 있습니다. 행 레이블은 반복할 수 있습니다. 2.행 필드 개요 형식에서 각 행 필드는 별도의 열에 있습니다. 각 행 필드의 이름은 열 제목에 표시됩니다. 3.부분합 개요 형식에서 부분합은 각 그룹의 맨 위 또는 맨 아래에 표시할 수 있습니다. 이 설정은 모든 행 필드에 영향을 미칩니다. 열 필드의 경우 부분합은 항상 맨 아래에 표시됩니다. 표 형식 1.행 레이블 표 형식에서 외부 필드에 대한 행 레이블은 관련 내부 필드에 대한 첫 번째 레이블과 동일한 행에 있습니다. 행 레이블은 반복할 수 있습니다. 2.행 필드 표 형식에서 각 행 필드는 별도의 열에 있습니다. 각 행 필드의 이름은 열 제목에 표시됩니다. 3.부분합 표 형식에서 부분합은 각 그룹의 맨 위에만 표시할 수 있습니다. 이 설정은 모든 행 필드에 영향을 미칩니다. 열 필드의 경우 부분합은 항상 맨 아래에 표시됩니다. 사용자는 피벗 테이블의 레이아웃 유형을 가져와 설정할 수 있습니다. PivotTableLayoutType은 아래와 같이 정의된 열거입니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 }); initSpread(spread); var pivotLayoutSheet = spread.getSheet(0); var pt = initPivotTable(pivotLayoutSheet); bindEvent(spread, pt); }; function initSpread(spread) { spread.suspendPaint(); var sheet = spread.getSheet(1); sheet.name("DataSource"); sheet.setRowCount(117); sheet.setColumnWidth(0, 120); sheet.getCell(-1, 0).formatter("YYYY-mm-DD"); sheet.getRange(-1,4,0,2).formatter("$ #,##0"); sheet.setArray(0, 0, pivotSales); let table = sheet.tables.add('tableSales', 0, 0, 117, 6); for(let i=2;i<=117;i++) { sheet.setFormula(i-1,5,'=D'+i+'*E'+i) } table.style(GC.Spread.Sheets.Tables.TableThemes["none"]); var sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); spread.resumePaint(); } function initPivotTable(sheet) { var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8); myPivotTable.suspendLayout(); myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField); let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); let itemList = ["Alan","John", "Tess"]; myPivotTable.labelFilter("Salesperson", { textItem: { list: itemList, isAll: false } }); myPivotTable.sort("Salesperson", { sortType: GC.Pivot.SortType.asc }); let carList = ["Audi","BMW","Mercedes"]; myPivotTable.labelFilter("Cars", { textItem: { list: carList, isAll: false } }); myPivotTable.sort("Cars", { sortType: GC.Pivot.SortType.asc }); let style = new GC.Spread.Sheets.Style(); style.formatter = "$ #,##0"; myPivotTable.setStyle({dataOnly: true}, style); myPivotTable.resumeLayout(); myPivotTable.autoFitColumn(); return myPivotTable; } function bindEvent (spread, pt) { _getElementById("layoutType").addEventListener("change", () => { if (spread) { var type = parseInt(document.getElementById("layoutType").value, 10); pt.layoutType(type); pt.autoFitColumn(); } }); } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <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"> <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-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/pivot-data.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 src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <label><b>Pivot Layout</b> </label></div> <hr> <div class="option-row"> <label>Select a new pivot table layout option below: </label></div> <div class="option-row"> <select id="layoutType"> <option value="0">Compact Form</option> <option value="1" selected>Outline Form</option> <option value="2">Tabular Form</option> </select> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; } .sample-spreadsheets { width: calc(100% - 210px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 210px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }