国产精品911,国产一区二区久久精品,国产热综合

Excel開(kāi)發(fā)利器SpreadJS使用教程：如何進(jìn)行表格初始化

轉(zhuǎn)帖|使用教程|編輯：鮑佳佳|2021-01-11 13:24:00.890|閱讀 371 次

概述：此示例演示如何創(chuàng)建Spread.Sheets工作簿組件，還說(shuō)明如何從初始化的工作簿主機(jī)DOM元素中獲取組件實(shí)例。

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶青睞。SpreadJS 為用戶帶來(lái)親切的 Excel 使用體驗(yàn)的同時(shí)，滿足 Web Excel 組件開(kāi)發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、Excel 類報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

點(diǎn)擊下載最新版SpreadJS

此示例演示如何創(chuàng)建Spread.Sheets工作簿組件，還說(shuō)明如何從初始化的工作簿主機(jī)DOM元素中獲取組件實(shí)例。

SpreadJS 不依賴于任何第三方類庫(kù)，初始化僅需要以下文件:

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 部分并給予其對(duì)應(yīng)路徑。例如:

<!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 控件通過(guò) new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }), 函數(shù)進(jìn)行初始化, 并且 spread ( 以下簡(jiǎn)稱 SpreadJS 控件為 'spread') 被添加到 id 為 'ss' 的 Div 元素中。你可以通過(guò)函數(shù) var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'))獲取 spread對(duì)象實(shí)例。然后, 你就可以定制你的 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'));      
};

當(dāng)然，你仍可以配合jQuery來(lái)操作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;
}

本篇文章你學(xué)會(huì)了嗎！趕快下載體驗(yàn)吧！為慶祝慧都成立17周年。我們推出購(gòu)正版送上萬(wàn)豪禮活動(dòng)，界面開(kāi)發(fā)工具正版授權(quán)最高直降10000+元，SpreadJS正版授權(quán)低至3490元！歡迎咨詢慧都在線客服了解詳情！

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：條形碼標(biāo)簽軟件Bartender使用技巧（10）——利用現(xiàn)有模板制作物流標(biāo)簽下一篇：LEADTOOLS醫(yī)療存儲(chǔ)服務(wù)器自定義數(shù)據(jù)庫(kù)系列教程（一）-整體介紹