概要と基本的な使い方

SpreadJSはExcelライクなステータスバーを提供します。ここには、シートに関するさまざまなステータス情報が表示されます。

<p><strong>ステータスバー</strong>は、組み込みのテーマをサポートします。</p> <p><strong>ステータスバー</strong>には、セルモード、平均、データの個数、数値の個数、最小値、最大値、合計、表示倍率など、さまざまなステータス情報が標準で表示されます。</p> <p><strong>ステータスバー</strong>を作成するには、<strong>ステータスバー</strong>をホストに追加して、コンテキストをバインドします。これには、次のようなコードを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"ss"</span>)); <span class="hljs-keyword">var</span> statusBar = <span class="hljs-keyword">new</span> GC.Spread.Sheets.StatusBar.StatusBar(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'statusBar'</span>)); statusBar.bind(spread); </code></pre> <p><strong>ステータスバー</strong>をバインドするコンテキストを変更することも、<strong>ステータスバー</strong>のコンテキストをバインド解除することもできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread2 = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>), {<span class="hljs-attr">sheetCount</span>: <span class="hljs-number">3</span> }); statusBar.bind(spread2); statusBar.unbind(); </code></pre> <p><strong>ステータスバー</strong>を削除するには、<strong>dispose()</strong>を使用します。</p> <pre><code class="hljs js language-js"> statusBar.dispose(); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar( document.getElementById('statusBar') ); statusBar.bind(spread); }; function addThemeLink(href) { var link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = href; link.onload = function() { GC.Spread.Sheets.findControl("ss").refresh(); }; var header = document.getElementsByTagName('head')[0]; header.appendChild(link); } function bindThemeChangeEvent() { document.getElementById('theme').onchange = function(e) { var themeLink = document.querySelector('link[href*="gc.spread.sheets"]'); var href = themeLink.href.substr(0, themeLink.href.indexOf('gc.spread.sheets')) + e.target.value; var header = document.getElementsByTagName('head')[0]; themeLink && header.removeChild(themeLink); if (href) { addThemeLink(href); } else { GC.Spread.Sheets.findControl("ss").refresh(); } }; } function initSpread(spread) { var sheet = spread.getSheet(0); var defaultData = [ ["SalesPers", "Birth", "Region", "SaleAmt", "ComPct", "ComAmt"], ["Joe", new Date("2000/01/23"), "North", 260, 0.1, 26], ["Robert", new Date("1988/08/21"), "South", 660, 0.15, 99], ["Michelle", new Date("1995/08/03"), "East", 940, 0.15, 141], ["Erich", new Date("1994/05/23"), "West", 410, 0.12, 49.2], ["Dafna", new Date("1992/07/21"), "North", 800, 0.15, 120], ["Rob", new Date("1995/11/03"), "South", 900, 0.15, 135], ["Jonason", new Date("1987/02/11"), "West", 300, 0.17, 110], ["Enana", new Date("1997/04/01"), "West", 310, 0.16, 99.2], ["Dania", new Date("1997/02/15"), "North", 500, 0.10, 76], ["Robin", new Date("1991/12/28"), "East", 450, 0.18, 35] ]; sheet.setArray(1, 1, defaultData); sheet.getRange(2, 2, 10, 1).formatter("yy/mm/dd"); sheet.setSelection(2, 6, 10, 1); bindThemeChangeEvent(); }
<!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 class="sample-container"> <div id="ss" class="sample-spreadsheets"></div> <div id="statusBar"></div> </div> <div class="sample-options"> <div class="options-toggle" role="button" data-click="toggle"> <svg fill="currentColor" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"> <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/> </svg> </div> <div class="options-container"> <div class="option-row"> <label for="theme">テーマを選択:</label> <select id="theme"> <option value="gc.spread.sheets.excel2013white.css" selected>Excel 2013 White</option> <option value="gc.spread.sheets.css">SpreadJS</option> <option value="gc.spread.sheets.excel2013lightGray.css">Excel 2013 Light Gray</option> <option value="gc.spread.sheets.excel2013darkGray.css">Excel 2013 Dark Gray</option> <option value="gc.spread.sheets.excel2016colorful.css">Excel 2016 Colorful</option> <option value="gc.spread.sheets.excel2016darkGray.css">Excel 2016 Dark Gray</option> </select> </div> </div> </div> </div> </body> </html>
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sample-options { float: right; height: 100%; } .options-toggle { display: none; } @media only screen and (max-width: 768px) { .options-toggle { display: block !important; top: 20px; left: -30px; width: 30px; height: 30px; position: absolute; background-color: #86bd00; line-height: 30px; text-align: center; padding: 4px; box-sizing: border-box; color: #fff; } .options-container { width: 280px !important; overflow: auto; height: 100%; padding: 22px; box-sizing: border-box; } .sample-container { width: 100% !important; height: 100%; overflow: hidden; float: left; } .sample-options { right: 0; padding: 0 !important; overflow: visible !important; position: absolute; box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25); transition: right .25s ease-in-out; z-index: 1000; } .sample-options.hidden { right: -280px; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; float: left; } } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-container { width: calc(100% - 280px); height: 100%; float: left; } .sample-spreadsheets { width: 100%; height: calc(100% - 25px); overflow: hidden; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }