SpreadJS製品ヘルプ
SpreadJSライブラリ
SpreadJS > 開発者の手引き > はじめに > 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.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.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.core.xx.x.x.min.js
自動マージ gc.spread.common.*.*.*.min.js
gc.spread.sheets.core.*.*.*.min.js
gc.spread.sheets.automerge.*.*.*.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.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.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.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.*.*.*.min.js
gc.spread.sheets.core.*.*.*.min.js
gc.spread.sheets.cellstate.*.*.*.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.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.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.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.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.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.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.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.core.xx.x.x.min.js
gc.spread.sheets.floatingobjects.xx.x.x.min.js
gc.spread.sheets.shapes.xx.x.x.min.js

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

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

コードの使用

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

JavaScript
コードのコピー 
<!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/pluggable/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/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>

コードの使用

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

JavaScript
コードのコピー 
<!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/pluggable/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable calcengine function library-->
     <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable calcengine basic function library-->
     <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/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>

コードの使用

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

コードの使用

次のサンプルコードはバインド機能を使用します。

JavaScript
コードのコピー 
<!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/pluggable/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable data binding library-->
     <script type="text/javascript" src="./scripts/pluggable/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>

コードの使用

次のサンプルコードは数式テキストボックス機能を使用します。

JavaScript
コードのコピー 
<!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/pluggable/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable calcengine function library-->
     <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable formula text box function library-->
     <script type="text/javascript" src="./scripts/pluggable/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>

コードの使用

次のサンプルコードはコメント関数を使用します。

JavaScript
コードのコピー 
<!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/pluggable/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable comment library-->
     <script type="text/javascript" src="./scripts/pluggable/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>

コードの使用

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

JavaScript
コードのコピー 
<!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/pluggable/gc.spread.common.xx.x.x.min.js"></script>
     <!--Spread.Sheets pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.xx.x.x.min.js"></script>
    <!--Spread.Sheets pluggable floating objects function library-->
     <script type="text/javascript" src="./scripts/pluggable/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>

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.