Overview

SpreadJS provides an Excel-like Status Bar the can display various sheet status and summary values. Select different ranges of cells to see how the information in the status bar changes. You can also change the theme to see how the theme changes for the status bar as well as the SpreadJS instance.

<p>The <strong>StatusBar</strong> supports built-in themes.</p> <p>In addition to the themes, <strong>StatusBar</strong> supports some built-in status items, including cellMode, average, count, numericalCount, min, max, sum, and zoom.</p> <p>To create a <strong>StatusBar</strong>, add a host DIV element and bind it to the Spread instance, as shown in the following example:</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>You can also change the context (spread instance) which the <strong>StatusBar</strong> binds to, or unbind the <strong>StatusBar</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>You can use <strong>dispose()</strong> to remove the <strong>StatusBar</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 = [ ["Saleperson", "Birthdate", "Region", "Sales", "Commmision %", "Commission $"], ["Joe", new Date("1999/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], ["Eric", new Date("1994/05/23"), "West", 410, 0.12, 49.2], ["Lynda", new Date("1992/07/21"), "North", 800, 0.15, 120], ["Rob", new Date("1995/11/03"), "South", 900, 0.15, 135], ["Winston", new Date("1987/02/11"), "West", 300, 0.17, 110], ["Elyana", 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 charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.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">Choose a theme:</label> <select id="theme"> <option value="gc.spread.sheets.css">SpreadJS</option> <option value="gc.spread.sheets.excel2013white.css" selected>Excel 2013 White</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> <option value="gc.spread.sheets.excel2016black.css">Excel 2016 Black</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; }