SpreadJS 快速启动

    xiaoxiao2021-03-26  29

    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://ju.6miu.com/read-663963.html

    最新回复(0)