SpreadJS 快速启动

最新推荐文章于 2024-08-06 08:41:21 发布

海蓝树

最新推荐文章于 2024-08-06 08:41:21 发布

阅读量835

点赞数

分类专栏： spreadJS

spreadJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>