初始化Spread

此示例演示如何创建Spread.Sheets工作簿组件,还说明如何从初始化的工作簿主机DOM元素中获取组件实例。

<p>SpreadJS 不依赖于任何第三方类库,初始化仅需要以下文件:</p> <ul> <li><strong>gc.spread.sheets.x.x.x.css</strong></li> <li><strong>gc.spread.sheets.all.x.x.x.min.js</strong></li> </ul> <p>将 <strong>gc.spread.sheets.x.x.x.css</strong> 和 <strong>gc.spread.sheets.all.x.x.x.min.js</strong> 文件加入到 HTML 文档 Head 部分并给予其对应路径。例如:</p> <pre><code class="hljs js language-js">&lt;!DOCTYPE html&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'gc.spread.sheets.x.x.x.css'</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">'stylesheet'</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/css'</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'gc.spread.sheets.all.x.x.x.min.js'</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/javascript'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/javascript'</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">'utf-8'</span>&gt;</span> ... <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'ss'</span> <span class="hljs-attr">style</span>=<span class="hljs-string">'width:100%; height:400px;'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span> </code></pre> <p>Spread 控件通过 <strong>new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })</strong>, 函数进行初始化, 并且 spread ( 以下简称 SpreadJS 控件为 'spread') 被添加到 id 为 'ss' 的 Div 元素中。你可以通过函数 <strong>var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'))</strong>获取 spread对象实例。然后, 你就可以定制你的 spread 了。 例如:</p> <pre><code class="hljs js language-js"><span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// Initialize a workbook</span> <span class="hljs-keyword">var</span> workbook = <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">1</span> }); <span class="hljs-comment">// get workbook object</span> <span class="hljs-comment">// var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss'));</span> }; </code></pre> <p>当然,你仍可以配合jQuery来操作SpreadJS, 例如:</p> <pre><code class="hljs js language-js">$(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// Initialize a workbook</span> <span class="hljs-keyword">var</span> workbook = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Workbook($(<span class="hljs-string">'#ss'</span>)[<span class="hljs-number">0</span>], { <span class="hljs-attr">sheetCount</span>: <span class="hljs-number">1</span> }); <span class="hljs-comment">// get spread Workbook object</span> <span class="hljs-comment">// var workbook = $('#ss').data('workbook');</span> }); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); /* * get spread object * var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')); */ initSpread(spread); }; function initSpread(spread) { var sd = dataSource; var sheet = spread.getActiveSheet(); if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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" 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; }