SpreadJSライブラリ

SpreadJSサブライブラリをロードすることで、すべてのライブラリをロードしなくても特定の機能を使用できます。

機能	ライブラリ
コア	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js
計算エンジン	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js
基本的な計算機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.calcengine.basicfunctions.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js
高度な計算機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.calcengine.advancedfunctions.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js
自動マージ	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.automerge.xx.x.x.min.js
データバインド機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.bindings.xx.x.x.min.js
ドラッグアンドフィル機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.fill.xx.x.x.min.js
フィルタ機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.conditionalformatting.xx.x.x.min.js gc.spread.sheets.filter.xx.x.x.min.js
数式テキストボックス機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.formulatextbox.xx.x.x.min.js
フローティングオブジェクト機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.floatingobjects.xx.x.x.min.js
範囲グループ機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.outlines.xx.x.x.min.js
タッチ操作機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.touch.xx.x.x.min.js
印刷機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.print.xx.x.x.min.js
セル型およびカスタムセル型機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.celltypes.xx.x.x.min.js
セルの状態	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.cellstate.xx.x.x.min.js
コメント機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.comments.xx.x.x.min.js
条件付き書式機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.conditionalformatting.xx.x.x.min.js
データ検証機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.conditionalformatting.xx.x.x.min.js gc.spread.sheets.datavalidation.xx.x.x.min.js
検索機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.search.xx.x.x.min.js
スパークライン機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.calcengine.basicfunctions.xx.x.x.min.js gc.spread.calcengine.advancedfunctions.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.sparklines.xx.x.x.min.js
テーブル機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js（オプション） gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.bindings.xx.x.x.min.js（オプション） gc.spread.sheets.conditionalformatting.xx.x.x.min.js（オプション） gc.spread.sheets.filter.xx.x.x.min.js（オプション） gc.spread.sheets.tables.xx.x.x.min.js
チャート機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.bindings.xx.x.x.min.js（オプション） gc.spread.sheets.charts.xx.x.x.min.js
テーブルシート機能	gc.spread.common.xx.x.x.js gc.spread.calcengine.xx.x.x.js gc.data.xx.x.x.js gc.spread.sheets.core.xx.x.x.js gc.spread.sheets.calcengine.xx.x.x.js gc.spread.sheets.bindings.xx.x.x.js gc.spread.sheets.tables.xx.x.x.js gc.spread.sheets.automerge.xx.x.x.js gc.spread.sheets.cellstate.xx.x.x.js gc.spread.sheets.statusbar.xx.x.x.js gc.spread.sheets.conditionalformatting.xx.x.x.js gc.spread.sheets.filter.xx.x.x.js gc.spread.sheets.tablesheet.xx.x.x.js
ガントシート機能	gc.spread.common.xx.x.x.js gc.spread.calcengine.xx.x.x.js gc.data.xx.x.x.js gc.spread.sheets.core.xx.x.x.js gc.spread.sheets.calcengine.xx.x.x.js gc.spread.sheets.bindings.xx.x.x.js gc.spread.sheets.tables.xx.x.x.js gc.spread.sheets.automerge.xx.x.x.js gc.spread.sheets.cellstate.xx.x.x.js gc.spread.sheets.statusbar.xx.x.x.js gc.spread.sheets.conditionalformatting.xx.x.x.js gc.spread.sheets.filter.xx.x.x.js gc.spread.sheets.tablesheet.xx.x.x.js gc.spread.sheets.ganttsheet.xx.x.x.js
ドラッグマージ機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.dragmerge.xx.x.x.min.js
アウトライン列機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.outlinecolumn.xx.x.x.min.js
コンテキストメニュー機能	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.contextmenu.xx.x.x.min.js gc.spread.sheets.bindings.xx.x.x.min.js（オプション）
PDF	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.pdf.xx.x.x.min.js
スライサーコンポーネント機能	gc.spread.common.xx.x.x.min.js
スライサー機能	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.conditionalformatting.xx.x.x.min.js gc.spread.sheets.filter.xx.x.x.min.js gc.spread.sheets.tables.xx.x.x.min.js gc.spread.sheets.floatingobjects.xx.x.x.min.js gc.spread.sheets.slicers.xx.x.x.min.js
バーコード	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x..min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.sparklines.xx.x.x.min.js gc.spread.sheets.barcode.xx.x.x.min.js
ピクチャおよびシェイプ	gc.spread.common.xx.x.x.min.js gc.spread.calcengine.xx.x.x.min.js gc.spread.sheets.calcengine.x.x.x.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.floatingobjects.xx.x.x.min.js gc.spread.sheets.shapes.xx.x.x.min.js
ハイパーリンク	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.hyperlink.xx.x.x.js
名前ボックス	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.namebox.xx.x.x.js
ステータスバー	gc.spread.common.xx.x.x.min.js gc.spread.sheets.core.xx.x.x.min.js gc.spread.sheets.statusbar.xx.x.x.js

core js は常にロードする必要があります。関数を使用するには、calcengine jsを最初にロードする必要があります。 calcengine jsは多くの機能によって使用されるため、最初にロードしておきます。ロードされていないjsファイルの関数を使用した場合、この関数は無効になります。

各jsファイルは、メインのSpreadJSスクリプトフォルダの下の、pluggableフォルダに保管されています。

SpreadJSの基本機能の使用

次のサンプルコードは、SpreadJSの基本機能を使用します。

<!DOCTYPE html>
 <html>
 <head>
     <title>Spread.Sheets Pluggable Sample</title>
     <link type="text/css" href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/>
     <!--Spread.Sheets pluggable common function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <script>
        // Spread.Sheetsの定義とほとんどのUI動作は、Spread.Sheetsコアライブラリ内に定義されています。
        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>

基本的な計算機能の使用

次のサンプルコードは、基本的な計算機能を使用します。

<!DOCTYPE html>
 <html>
 <head>
     <title>Spread.Sheets Pluggable Sample</title>
     <link type="text/css" href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/>
     <!--Spread.Sheets pluggable common function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable calcengine function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable calcengine basic function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.basicfunctions.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <script>     
         window.onload = function () {
　　　　 //コアおよび基本の計算機能は、Spread.Sheets calcライブラリ内にあります。    
             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>

計算機能と高度な機能の使用

次のサンプルコードは、計算機能と高度な機能を使用します。

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine advanced function library-->
    <script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.advancedfunctions.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.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>Spread.Sheets Pluggable Sample</title>
 <link type="text/css" href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/>
     <!--Spread.Sheets pluggable common function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable data binding library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.bindings.xx.x.x.min.js"></script>
     <script>
         window.onload = function () {
　　　　　//データバインド関連機能はSpread.Sheets bindingライブラリ内にあります。
            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>Spread.Sheets Pluggable Sample</title>
     <link type="text/css" href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/>
     <!--Spread.Sheets pluggable common function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable calcengine function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable formula text box function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.formulatextbox.xx.x.x.min.js"></script>
     <script>
         // 数式テキストボックス機能はSpread.Sheets commentライブラリ内にあります。
        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>Spread.Sheets Pluggable Sample</title>
     <link type="text/css" href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/>
     <!--Spread.Sheets pluggable common function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable comment library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.comments.xx.x.x.min.js"></script>
     <script>
         window.onload = function () {
　　　　　//コメント機能はSpread.Sheets commentライブラリ内にあります。
            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>

フロートオブジェクト機能の使用

次のサンプルコードは、フロートオブジェクト機能を使用します。

<!DOCTYPE html>
 <html>
 <head>
     <title>Spread.Sheets Pluggable Sample</title>
     <link type="text/css" href="./css/gc.spread.sheets.xx.x.x.css" rel="stylesheet"/>
     <!--Spread.Sheets pluggable common function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.xx.x.x.min.js"></script>
    <!--Spread.Sheets pluggable floating objects function library-->
     <script type="text/javascript" src="./scripts/modules/gc.spread.sheets.floatingobjects.xx.x.x.min.js"></script>
     <script>
         window.onload = function () {
　　　　　//カスタムフローティングオブジェクト/ピクチャ機能はSpread.Sheets floatingobjectライブラリ内にあります。
            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>