인벤토리 추적기

SpreadJS를 사용하면 JavaScript 애플리케이션에 대한 대화식 인벤토리 추적기 보고서를 만들 수 있습니다. 다음은 동적 인벤토리 추적기 대시보드를 만들기 위한 하이퍼링크, 사용자 정의 서식, 셰이프, 드롭다운 및 다양한 기능의 사용을 강조하는 샘플입니다.

예시에서는 fromJSON을 사용하여 사전 정의된 템플릿을 로드합니다. 참고: 인벤토리 보고서 페이지의 모든 정보는 다른 페이지에서 가져옵니다. 따라서 해당 페이지에 데이터를 입력할 필요가 없습니다. 스톡 항목의 이름을 클릭하여 특정 항목과 관련된 정보를 변경할 수 있습니다. 거기에 관련된 모든 인벤토리 이동(유입 및 유출) 정보를 추가합니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 5 }); initSpread(spread); }; function initSpread(spread) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(data); spread.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"> <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$/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/inventory-tracker.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" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }