Excel开发利器SpreadJS使用教程：如何进行表格初始化

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

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

SpreadJS 不依赖于任何第三方类库，初始化仅需要以下文件:

gc.spread.sheets.x.x.x.css
gc.spread.sheets.all.x.x.x.min.js

将 gc.spread.sheets.x.x.x.css 和 gc.spread.sheets.all.x.x.x.min.js 文件加入到 HTML 文档 Head 部分并给予其对应路径。例如:

<!DOCTYPE html>      <html>         <head>            <link href='gc.spread.sheets.x.x.x.css' rel='stylesheet' type='text/css'/>            <script src='gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>            <script type='text/javascript' charset='utf-8'>            ...            </script>         </head>         <body>              <div id='ss' style='width:100%; height:400px;'></div>         </body>      </html>

Spread 控件通过 new GC.Spread.Sheets.Workbook(document.getElementById(‘ss’), { sheetCount: 1 }), 函数进行初始化, 并且 spread ( 以下简称 SpreadJS 控件为 ‘spread’) 被添加到 id 为 ‘ss’ 的 Div 元素中。你可以通过函数 var spread = GC.Spread.Sheets.findControl(document.getElementById(‘ss’))获取 spread对象实例。然后, 你就可以定制你的 spread 了。例如:

window.onload = function ( ) { // Initialize a workbook var workbook = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); // get workbook object // var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss')); }; 
当然，你仍可以配合jQuery来操作SpreadJS， 例如：
$(document).ready(function ( ) { // Initialize a workbook var workbook = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 }); // get spread Workbook object // var workbook = $('#ss').data('workbook'); });
app.js：
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);}
index.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>Style.css.sample-tutorial {position: relative;height: 100%;overflow: hidden;}body {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
本篇文章你学会了吗 ！赶快下载体验吧！为庆祝成立17周年。我们推出购正版送上万豪礼活动，界面开发工具正版授权最高直降10000+元 ，SpreadJS正版授权低至3490元！欢迎咨询在线客服了解详情！
标签：
来源：慧都
                                                        
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

Excel开发利器SpreadJS使用教程：如何进行表格初始化

相关推荐

发表回复