Spread.Sheets
Spread.Sheetsライブラリの使用
Spread.Sheets > 開発者の手引き > はじめに > Spread.Sheetsライブラリの使用

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

機能 ライブラリ
コアおよび基本の計算機能 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.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.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 (optional, for formulas and filters)
gc.spread.sheets.core.xx.x.x.min.js
gc.spread.sheets.bindings.xx.x.x.min.js (optional, for data-binding)
gc.spread.sheets.conditionalformatting.xx.x.x.min.js (optional, for filtering)
gc.spread.sheets.filter.xx.x.x.min.js (optional, for filtering)
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 (optional, for data-binding)
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 (optional, for data-binding)
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

core jsは常にロードする必要があります。 関数を使用するには、calc jsを最初にロードする必要があります。 calc 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 calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.xx.x.x.min.js"></script>
    <!--Spread.Sheets pluggable calcengine advanced function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.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.functionsライブラリで定義されます。
              //すべての機能はCalcに基づくため、calcライブラリを最初にロードする必要があります。
            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>

コードの使用

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

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>

 

 

© 2016-2018, GrapeCity inc. All rights reserved.