SpreadJS 快速啟動
阿新 • • 發佈：2019-01-04
SpreadJS 是一款基於 HTML5 和 jQuery 技術的外掛，在網頁中使用 SpreadJS 是十分容易的，在本文章中我們將通過以下四步來使用 SpreadJS
Step 1 建立 HTML 檔案：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Step 2 在 Body 中新增 SpreadJS 容器，需要給容器指定 id 屬性，我們需要通過 id 來獲取容器並且初始化 SpreadJS 外掛，同時你也可以在容器中設定寬度等樣式資訊。
<div id="ss" style="height:500px;border:solid gray 1px;"/>
Step 3 新增指令碼檔案和CSS檔案引用到 Head 標籤。這裡我們使用 CDN 伺服器上的資原始檔。
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui"/>
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.3.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.3.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.3.min.js" type="text/javascript"></script>
<!-- SpreadJS CSS and script -->
<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.1.20131.1.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.1.20131.1.css" rel="stylesheet" type="text/css" />
Step 4. 新增指令碼初始化 SpreadJS 檔案。
<script type="text/javascript">
$(document).ready(function () {
$("#ss").wijspread({ sheetCount: 2 }); // create wijspread widget instance
var spread = $("#ss").wijspread("spread"); // get instance of wijspread widget
var sheet = spread.getActiveSheet(); // get active worksheet of the wijspread widget
// initialize spreadJS
});
</script>
做完以上四個操作，運行當前頁面 SpreadJS 即成功新增到了頁面上：