SpreadJS 快速启动

最新推荐文章于 2024-07-26 11:41:15 发布

weixin_30596735

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量169

点赞数

文章标签： javascript ui ViewUI

版权

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 的使用请参考在线帮助文档或在线示例

转载于:https://www.cnblogs.com/C1SupportTeam/articles/four-steps-to-use-spreadjs.html

关注