数式テキストボックスをコントロールとして使用

ページ上で、数式テキストボックスをコントロールとして使用できます。

数式テキストボックスコントロールには、次の図に示すように、数式を入力または表示できます。

セル範囲を選択して、数式テキストボックスコントロールに追加することもできます。これには、まずテキストボックス内の数式範囲アイコンを選択します。次に、［Ctrl］キーの押下、またはコンマ（,）の入力を使用して、複数のセル範囲を選択します。

コードの使用

次のサンプルコードは、ページに数式テキストボックスコントロールを追加します。

window.onload = function(){
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
                var activeSheet = spread.getActiveSheet();
activeSheet.setArray(0, 0, [1, 2, 3, 4, 5]);
var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));
fbx.workbook(spread);
                      }
...
<input type="text" id="formulaTextBox" />

次のサンプルでは、複数のセル範囲を選択して数式テキストボックスに追加できます。

<script type="text/javascript">
        window.onload = function(){
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
            rangeSelector = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("ftb"), {rangeSelectMode: true});
            rangeSelector.workbook(spread);
        }
        function buttonClick(){
            alert(rangeSelector.text());
        }
    </script>
...
<div id="ss" style="width:50%; height:400px; border:1px solid gray;"></div>

<div id="ftb" style="width:50%;height:20px;border:1px solid gray"></div>

<button onclick="buttonClick()">Get Range Text</button>

数式テキストボックスのレイアウトを変更する

SpreadJSでは、セル内の数式テキストボックスとそのポップアップ要素のレイアウトをワークシート全体でカスタマイズすることもできます。数式で異なるワークシートのセルを参照する場合に、セル内の数式テキストボックスを非表示にしたり、移動することができます。このために、CSSの gc-across-sheet-ftb クラスと gc-across-sheet-func-popup クラスのプロパティを編集します。

次のサンプルコードは、セル内の数式テキストボックスのレイアウトをワークシート全体でカスタマイズする方法を示します。

// ワークシート全体でセル内の数式テキストボックスを非表示にします。
<style>       
    .gc-across-sheet-ftb {            
        z-index: -1 !important;        
    }        
    .gc-across-sheet-func-popup {            
        z-index: -1 !important;        
    }   
</style>

または    

<style>      
    .gc-across-sheet-ftb {            
        width: 0px !important;            
        height: 0px !important;            
        border: none !important;        
    }      
    .gc-across-sheet-func-popup {            
        width: 0px !important;            
        height: 0px !important;            
        border: none !important;            
        overflow: hidden;        
    }   
</style> 

// セル内の式テキストボックスをワークブックのホストの上に移動します。
    <style>        
        .gc-across-sheet-ftb {            
            top: 10px !important;        
        }        
        .gc-across-sheet-func-popup {            
            max-height: 80px;            
            overflow-y: scroll;       
        }
    </style>

type=warning
メモ：クロスワークシート数式を入力する場合、ワークシートのセル内の数式テキストボックスとそのポップアップ要素は、デザイナでは非表示になっています。