WEBSERVICE

SpreadJS は WEBSERVICE関数と FILTERJSON関数をサポートします。

WEBSERVICE関数は、 インターネットや CORS(オリジン間リソース共有)を許可したイントラネット上のウェブサービスから文字列データを返します。

FILTERJSON関数は、有効なjson文字列を解析して、値、オブジェクト、またはオブジェクトの配列(縦にあふれることも可能)に変換します。

WEBSERVICE 要求が 同一オリジンポリシー に従っておらず、ターゲットのWebサイトがソースオリジンからの CORS(オリジン間リソース共有)をサポートしていない場合、#VALUE!エラーを返します。関数の結果は文字列です。 FILTERJSON FILTERJSON関数は、JSON文字列を、スカラ値、オブジェクト、またはオブジェクトの配列(縦にあふれることも可能)に解析します。 FILTERJSON関数とWEBSERVICE関数を組み合わせ、サーバーからjsonオブジェクトを取得してSpreadJS上で使用することができます。
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss")); spread.options.allowDynamicArray = true; initSpread(spread); }; function initSpread(spread) { spread.setSheetCount(1); spread.suspendPaint(); spread.suspendCalcService(); initSheet1(spread.getSheet(0)); spread.resumeCalcService(); spread.resumePaint(); } function initSheet1(sheet) { sheet.suspendPaint(); sheet.name('WebService'); sheet.setColumnWidth(0,27); sheet.setColumnWidth(1,300); sheet.setColumnWidth(2,168); sheet.setColumnWidth(3,168); sheet.setValue(0, 1, '国名または国名の一部を入力してください。'); var inputStyle = new GC.Spread.Sheets.Style(); inputStyle.backColor = "#FEF3CD"; sheet.setStyle(1,1,inputStyle); sheet.setValue(3,1,"国名"); sheet.setValue(3,2,"人口"); sheet.setValue(3,3,"地域"); sheet.setValue(1,1,"united"); var headerStyle = new GC.Spread.Sheets.Style(); headerStyle.backColor = "rgb(222,235,246)"; headerStyle.font = "bold 11pt Calibri"; headerStyle.hAlign = 1; var borderBottom = new GC.Spread.Sheets.LineBorder; borderBottom.color = "black"; borderBottom.style = GC.Spread.Sheets.LineStyle.thin; headerStyle.borderBottom = borderBottom; sheet.setStyle(3,1,headerStyle); sheet.setStyle(3,2,headerStyle); sheet.setStyle(3,3,headerStyle); for (var r = 4; r < 50; r++) { sheet.setFormatter(r,1,'=iferror(property(@,"name"), "")'); sheet.setFormatter(r,2,'#,##0'); sheet.setFormatter(r,3,'#,##0'); } sheet.setFormula(4,1,'=FILTERJSON(IF(LEN(B2)>3,WEBSERVICE("https://restcountries.eu/rest/v2/name/"&B2)))'); sheet.setFormula(4,2,'=IFERROR(PROPERTY(B5#,"population"),"")'); sheet.setFormula(4,3,'=IFERROR(PROPERTY(B5#,"area"),"")'); sheet.resumePaint(); } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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> </body> </html>
input[type="text"] { width: 200px; margin-right: 20px; } label { display: inline-block; width: 110px; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; width:216px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } code { border: 1px solid #000; }