데이터 보드

다음 샘플은 DataManager에서 관계 및 계산된 필드를 사용하는 방법을 보여줍니다. 이 예에서는 오른쪽 상단 통합 문서를 사용하여 관계와 함께 데이터 테이블을 표시합니다. 다른 데이터 테이블로 전환하고 열 머리글을 변경하면 데이터를 볼 수 있습니다.

이 샘플에서는 일반 열, 관련 열 및 계산된 열을 보여주고 SpreadJS에서 테이블 시트의 여러 유형을 만들 수 있습니다. 일반 열 테이블 필드 이름을 열 값으로 사용합니다(예: 직원 테이블의 "firstName"). 필드 값이 개체이면 "."를 사용하여 하위 필드를 가져올 수 있습니다(예: 직원 테이블의 "address.city"). 관련 열 두 테이블 간에 관계를 추가하면 관계형 테이블을 필드로 사용할 수 있습니다. 다음은 샘플 코드입니다. 필드가 배열이면 ".1"을 사용하여 첫 번째 항목을 가져올 수 있습니다(예: "orders.1.orderDate"). ".property"를 사용하여 모든 개체에서 속성을 가져오고 새 배열을 가져올 수 있습니다(예: "orders.orderDate"). 계산된 열 "="로 시작하는 수식을 사용하여 열 값을 계산된 열로 설정할 수 있습니다. 아래 필드 참조 구문 규칙을 사용하면 테이블에서 데이터를 참조할 수 있습니다. 개체 유형 구문 예제 설명 샘플 현재 행 필드 =[@column1] column1 필드의 현재 행에서 데이터를 가져옵니다. =[@QtyAvailable] * [@UnitPrice] * 1.5 각 행의 RetailValue을 계산합니다. 전체 필드 =[column1] column1에서 데이터를 모두 가져옵니다. =SUM([column1]) column1의 총합을 가져옵니다. 개체 필드의 특성 =[@column1.abc] column1 필드의 현재 행에서 "abc" 특성 값을 가져옵니다. =[@name.first] & " " & [@name.last] 이름 문자열을 가져옵니다. 배열 필드의 항목 =[@column1.0] column1 필드의 현재 행에서 첫 번째 값을 가져옵니다. =[@awards.0.name] 첫 번째 수상 이름을 가져옵니다. 개체 배열 필드의 특성 =[@column1.abc] 워크시트 =SUM([@orderDetails.weight]) 주문 무게를 가져옵니다. 현재 전체 행 =[@] 현재 행 데이터를 개체로 가져옵니다. 필드 이름에 공백 또는 마침표가 있는 경우에는 대괄호를 추가해야 합니다. 예를 들어 "=[@[column 1].[a.bc]]"는 'column 1' 필드의 현재 행에서 "a.bc" 특성 값을 가져옵니다. 전체 행 및 현재 행 이외에 지정된 행을 가져올 수도 있습니다. 샘플 설명 [#1[column1]] 첫 번째 행에서 column1 값을 가져옵니다. [#1,#last[column1]] 첫 번째 행과 마지막 행에서 column1 값을 가져옵니다. [#odd[column1]] 홀수 행에서 column1 값을 가져옵니다. [#1,#even[column1]] 첫 번째 행과 짝수 행에서 column1 값을 가져옵니다. [@+1[column1]] 다음 행에서 column1 값을 가져옵니다. [@-1[column1]] 이전 행에서 column1 값을 가져옵니다. [@+1:#last] 다음 행부터 마지막 행까지 행을 가져옵니다. [@-1:@+1] 이전 행부터 다음 행까지 행을 가져옵니다. [@:#last] 현재 행부터 마지막 행까지 행을 가져옵니다. [#1,@-1:@+1,#last[column1]] 첫 번째 행, 이전 행의 column1 값을 다음 행과 마지막 행으로 가져옵니다. [#1] 첫 번째 행을 가져옵니다. 샘플 코드는 다음과 같습니다. "=SUM([#1:@[change]])"는 누적 변경 사항을 표시합니다.
var tables = {}; var selectedTable = "order"; window.onload = function () { var mainSpread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); var dataManager = mainSpread.dataManager(); // addTable tables.product = dataManager.addTable("productTable", { data: data.products }); tables.supplier = dataManager.addTable("supplierTable", { data: data.suppliers }); tables.category = dataManager.addTable("categoryTable", { data: data.categories }); tables.order = dataManager.addTable("orderTable", { data: data.orders }); tables.detail = dataManager.addTable("orderDetailTable", { data: data.orderDetails }); tables.shipper = dataManager.addTable("shipperTable", { data: data.shippers }); tables.employee = dataManager.addTable("employeeTable", { data: data.employees }); tables.customer = dataManager.addTable("customerTable", { data: data.customers }); // addRelationship dataManager.addRelationship(tables.product, "supplierId", "supplier", tables.supplier, "id", "products"); dataManager.addRelationship(tables.product, "categoryId", "category", tables.category, "id", "products"); dataManager.addRelationship(tables.order, "customerId", "customer", tables.customer, "id", "orders"); dataManager.addRelationship(tables.order, "shipVia", "shipper", tables.shipper, "id", "orders"); dataManager.addRelationship(tables.order, "id", "details", tables.detail, "orderId", "order"); dataManager.addRelationship(tables.order, "employeeId", "employee", tables.employee, "id", "orders"); dataManager.addRelationship(tables.product, "id", "soldDetail", tables.detail, "productId", "product"); dataManager.addRelationship(tables.employee, "reportsTo", "manager", tables.employee, "id", "subordinate"); var spread = new GC.Spread.Sheets.Workbook(document.getElementById("sampleDiv2")); spread.fromJSON(ssjson); spread.options.scrollbarMaxAlign = true; var columnsSpread = new GC.Spread.Sheets.Workbook(document.getElementById("sampleDiv3")); var sheet = columnsSpread.getActiveSheet(); columnsSpread.options.tabStripVisible = false; columnsSpread.options.showHorizontalScrollbar = false; columnsSpread.options.scrollbarMaxAlign = true; sheet.setColumnCount(2); sheet.setRowCount(12); sheet.setColumnWidth(1, "*"); sheet.setText(0,0,"Caption",1); sheet.setText(0,1,"Value",1); sheet.getRange(-1,1,-1,1).formatter("@"); document.getElementById("sampleDiv2").addEventListener("click", function (e) { var x = e.offsetX; var y = e.offsetY; var target = spread.getActiveSheet().hitTest(x, y); if (target.shapeHitInfo == null && x > 700) { y = y - 300; target = spread.getActiveSheet().hitTest(x, y); } if (target.shapeHitInfo) { var shape = target.shapeHitInfo.shape; var style = shape.style(); if (style.fill) { // skip the connect line style.fill.color = '#'+Math.floor(Math.random()*0xA00000 + 0x100000).toString(16); //random color shape.style(style); var text = shape.text(); switchTable(text); } } }, false); document.getElementById("setButton").addEventListener("click", function (e) { setView(); }, false); switchTable("order"); }; function switchTable (tableName) { selectedTable = tableName; setTimeout(function() { var json = JSON.stringify(tables[selectedTable].get(0),null , 2); // get is internal API document.getElementById("datasample").innerHTML = selectedTable + ".0:\n" + json; }, 0); var spread = GC.Spread.Sheets.findControl( document.getElementById("sampleDiv3")); var sheet = spread.getActiveSheet(); sheet.clear(0, 0, sheet.getRowCount(), sheet.getColumnCount(), GC.Spread.Sheets.SheetArea.viewport,GC.Spread.Sheets.StorageType.data); sheet.setArray(0,0,dataColumns[tableName]); sheet.autoFitColumn(0); setView(); } function setView () { var spread = GC.Spread.Sheets.findControl( document.getElementById("sampleDiv3")); var sheet = spread.getActiveSheet(); var rowCount = sheet.getRowCount(); var fields = []; for (var i = 0; i < rowCount; i++) { var value = sheet.getValue(i, 1); if (value) { fields.push({value: value, caption: sheet.getValue(i, 0), width: 200}); } } var view = tables[selectedTable].addView("selectedTable"+(new Date()).valueOf(), fields); var spread = GC.Spread.Sheets.findControl( document.getElementById("ss")); spread.clearSheets(); spread.clearSheetTabs(); var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; sheet.actionColumn.options({ visible: false }); sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; view.fetch().then(function(args) { sheet.suspendPaint(); sheet.setDataView(view); sheet.resumePaint(); }); }
<!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"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <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-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.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/data/northwind-data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/temple-shape.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"> <div class="inputContainer"> <p>You can click the table.</p> <div id="sampleDiv2" style="height: 143px;"></div> </div> <div class="inputContainer"> <p>You can edit the columns then press the "Set" button.</p> <div id="sampleDiv3" style="height: 200px;"></div> <div class="col-xs-4"> <input id="setButton" class="button" type="button" value="Set"/> </div> </div> <div class="inputContainer"> <p>First data in the data table</p> <pre id="datasample"> </pre> </div> </div> </div> </div> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 500px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 500px; padding: 3px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .sample-options { z-index: 1000; } .inputContainer { width: 100%; height: auto; border: 1px solid #eee; padding: 6px 12px; margin-bottom: 10px; box-sizing: border-box; } .input { font-size: 14px; border: 0; outline: none; background: transparent; } .button { height: 30px; padding: 6px 6px; width: 80px; margin-top: 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }