国产手机在线,成人亚洲综合天堂,日本天堂免费看

Excel開發利器SpreadJS使用教程：如何進行表格初始化

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

概述：此示例演示如何創建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@fc6vip.cn

文章轉載自：

上一篇：條形碼標簽軟件Bartender使用技巧（10）——利用現有模板制作物流標簽下一篇：LEADTOOLS醫療存儲服務器自定義數據庫系列教程（一）-整體介紹