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（オプション） 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（オプション） |
| 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は常にロードする必要があります。 関数を使用するには、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 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>
|
|