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 即成功添加到了页面上:
更多信息以及 SpreadJS 的使用请参考 在线帮助文档 或 在线示例
