[{"id":"1b88a165-2563-437e-99bb-ae30bd4b56db","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"a244ead7-a2c6-47a3-ac17-c5dbfa337362","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"33638a1c-7196-42c1-a96d-38b2d9ba8ac4","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"8e72e33e-b4ab-4fb3-98fc-a0b148134aed","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"86662220-9b9e-4940-9ced-d22642ea49a8","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"55fd3bb8-18d4-4edb-9640-ca3a365b798f","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"760b37c7-c713-4b24-b9ba-4bfe7d8437a6","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"3a083583-1d5f-492b-b450-34b2b5c775b8","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"04e73782-aa78-4dfe-a4f9-e72ed4c78a11","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"57c94653-8893-403b-a5b1-0d1e33a0bd0f","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"09a66339-64c0-415c-b142-0691587a8e4a","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"5b7aeac5-c755-426a-95c7-1ae8e547179a","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"790bc77a-9216-48fd-b8f9-fbc374ebb155","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"900e6cab-065d-4f1c-844d-efa3c074e270","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"0baaf91d-84f6-404c-a487-735226b6d5b6","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"5d37413b-3600-4da9-9700-feea54355f59","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"7ded3a22-15eb-49b8-a488-e83c2cd872eb","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"89c707ed-9841-4e53-96fb-940cc3214804","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"a570c8e7-07a2-47da-965b-da44fd1fa5cf","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"a5a73576-16ea-4cbc-925c-ef547389eaa5","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"69e79655-e015-4f9a-a230-2a25c988c926","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"adf3817f-7667-4a4c-8a5f-767b0b7e1e3e","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"1126cfab-6210-4e28-bee0-02c113fb7a0c","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"63c577e6-6cf9-497e-94e1-2307f7d3f498","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"24769ecd-2b08-4a85-b318-4f533bbf8393","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"2605431b-dc80-491d-886e-28981595d277","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"4f41e22e-eb51-49e5-aeae-a42dd6bf352c","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"aa71a884-c5bc-4842-8d6a-873dfd645167","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"b0576ca2-cb84-4390-9f95-9354ec20eda5","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"dacc7931-6785-4675-be31-80930403cf7b","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"c90d5fdf-420f-4978-8bf5-c9a2bb4334b3","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"6e6ac5b1-1501-4e28-89cc-525139488537","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"ff052704-1389-4029-bcdd-73c6cbe9f807","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"21c6131f-0f2d-41d1-9284-6ad9ee803c1f","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"64e2f4a3-2303-4bfa-8a93-6c23ef01de58","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"4a0842a3-20b1-40c3-8e00-cd5941ffdf53","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]}]
        
(Showing Draft Content)

SpreadJS 库

您可以加载 SpreadJS 子库以使用某些功能,而无需加载所有库。

特性

要求的库

核心

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

计算引擎

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

基本函数

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.calcengine.basicfunctions.*.min.js

gc.spread.sheets.core.*.min.js

进阶函数

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.calcengine.advancedfunctions.*.min.js

gc.spread.sheets.core.*.min.js

自动合并

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.automerge.*.min.js

数据绑定

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.bindings.*.min.js

拖拽填充

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.fill.*.min.js

筛选

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.conditionalformatting.*.min.js

gc.spread.sheets.filter.*.min.js

公式文本框

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.formulatextbox.*.min.js

浮动对象

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.floatingobjects.*.min.js

大纲

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.outlines.*.min.js

触控

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.touch.*.min.js

打印

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.print.*.min.js

单元格类型

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.celltypes.*.min.js

单元格状态

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.cellstate.*.min.js

批注

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.comments.*.min.js

条件格式

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.conditionalformatting.*.min.js

数据验证

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.conditionalformatting.*.min.js

gc.spread.sheets.datavalidation.*.min.js

搜索

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.search.*.min.js

迷你图

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.calcengine.basicfunctions.*.min.js

gc.spread.calcengine.advancedfunctions.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.sparklines.*.min.js

表格

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js (optional, for formulas and filters)

gc.spread.sheets.core.*.min.js

gc.spread.sheets.bindings.*.min.js (optional, for data-binding)

gc.spread.sheets.conditionalformatting.*.min.js (optional, for filtering)

gc.spread.sheets.filter.*.min.js (optional, for filtering)

gc.spread.sheets.tables.*.min.js

图表

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.bindings.*.min.js (for data-binding)

gc.spread.sheets.charts.*.min.js

拖动合并

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.dragmerge.*.min.js

大纲列

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.outlinecolumn.*.min.js

上下文菜单

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.contextmenu.*.min.js

gc.spread.sheets.bindings.*.min.js (for data-binding)

PDF

gc.spread.common.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.pdf.*.min.js

切片器组件

gc.spread.common.*.min.js

切片器

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.conditionalformatting.*.min.js

gc.spread.sheets.filter.*.min.js

gc.spread.sheets.tables.*.min.js

gc.spread.sheets.floatingobjects.*.min.js

gc.spread.sheets.slicers.*.min.js

条形码

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.sparklines.*.min.js

gc.spread.sheets.barcode.*.min.js

形状

gc.spread.common.*.min.js

gc.spread.calcengine.*.min.js

gc.spread.sheets.core.*.min.js

gc.spread.sheets.floatingobjects.*.min.js

gc.spread.sheets.shapes.*.min.js

核心js必须始终加载。 必须先加载calcengine js才能使用函数。 许多功能都使用calcengine js,因此您可能希望先加载它。 如果使用尚未加载的js文件中的函数,则该函数不会生效。

JS 文件位于 SpreadJS 脚本文件夹下。

示例代码

本示例使用基本的SpreadJS函数。

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
    <script>
    // The Spread definition and most UI behavior is in the SpreadJS core library.
        window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var sheet = spread.getActiveSheet();
        sheet.setValue(0, 0, 20);
    };
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

示例代码

本示例使用基本的calc函数。

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.13.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine basic function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.13.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
    <script>      
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var sheet = spread.getActiveSheet();
        sheet.setArray(0, 0, [1, 2, 3, 4, 5]);
        sheet.setFormula(5, 1, 'SUM(A1,A5)');
    };
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

示例代码

This example uses calc and advanced functions.

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.13.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine advanced function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.13.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
    <script>
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var activeSheet = spread.getActiveSheet();
        activeSheet.setValue(0, 0, 1);
        activeSheet.setValue(1, 0, 10);
        activeSheet.setValue(2, 0, 7);
        activeSheet.setValue(3, 0, 9);
        activeSheet.setValue(4, 0, "a1");
        activeSheet.setFormula(5, 0, "MAX(A1:A5)");
    };
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

示例代码

本示例使用绑定函数。

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
    <!--SpreadJS pluggable data binding library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.bindings.13.0.0.min.js"></script>
    <script>
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var activeSheet = spread.getActiveSheet();
         var people = [
             { name: "Albert", isAdult: false, country: "American", website: "albert.com" },
             { name: "Alice", isAdult: true, country: "China", website: "alice.com" },
             { name: "Bob", isAdult: false, country: "Canada", website: "bob.com" }
         ];
         activeSheet.autoGenerateColumns = true;
         activeSheet.setDataSource(people);
    };
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

示例代码

本示例使用公式文本框。

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.13.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
    <!--SpreadJS pluggable formula text box function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.13.0.0.min.js"></script>
    <script>
    // The formula text box function is in the Spread formula tex box library. 
        window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var sheet = spread.getActiveSheet();
        sheet.setArray(0, 0, [1, 2, 3, 4, 5]);
        var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));
        fbx.workbook(spread);
    };
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
    <input type="text" id="formulaTextBox" />
</body>
</html>

示例代码

本示例使用批注功能。

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
    <!--SpreadJS pluggable comment library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.comments.13.0.0.min.js"></script>
    <script>
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var activeSheet = spread.getActiveSheet();
        var comment = new GC.Spread.Sheets.Comments.Comment();
        comment.text("new comment!");
        comment.backColor("yellow");
        comment.foreColor("green");
        comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown);
        activeSheet.getCell(5,5).comment(comment);
    };
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
    <input type="text" id="formulaTextBox" />
</body>
</html>

示例代码

本示例使用FloatObject函数。

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.13.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
   <!--SpreadJS pluggable floating objects function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.floatingobjects.13.0.0.min.js"></script>
    <script>
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var activeSheet = spread.getActiveSheet();
        var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 100, 100, 60, 64);
        var btn = document.createElement('button');
        btn.style.width = "60px";
        btn.style.height = "30px";
        btn.innerText = "button";
        customFloatingObject.content(btn);
        activeSheet.floatingObjects.add(customFloatingObject);
    };
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
    <input type="text" id="formulaTextBox" />
</body>
</html>