Excel开发利器SpreadJS使用教程：如何进行表格初始化-控件新闻-慧都网

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

转帖|使用教程|编辑：鲍佳佳|2021-01-11 13:24:00.890|阅读 291 次

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

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。

点击下载最新版SpreadJS

此示例演示如何创建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元！欢迎咨询慧都在线客服了解详情！

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@wqylolg.cn

文章转载自：

上一篇：条形码标签软件Bartender使用技巧（10）——利用现有模板制作物流标签下一篇：LEADTOOLS医疗存储服务器自定义数据库系列教程（一）-整体介绍