[{"id":"747121ac-49bc-471f-bc1f-0133870ee875","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"39c6ef9f-b47f-468b-8a45-04778ad1454f","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"7f774c2b-b28e-41ae-81ac-183442215b95","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"824f32c9-3d2d-4e0c-8bf9-1c2a80cb5f20","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"da48e9e7-aa3e-48e6-885c-24cd573a865c","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"f2c0b7a3-7408-4bd7-9231-25964deea82b","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"c17720a0-f9c9-40e3-9672-26624219e8d5","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"92fb4492-b5b0-45f0-821d-41746aab90d9","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]},{"id":"1070c201-fb4f-43d9-8ed5-44a24a41b94e","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"53c62891-30fd-4a36-b187-4ec844b88209","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]},{"id":"be16fbd7-0143-464b-a141-58ef3d591d2e","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"c1678172-6644-4e8e-9443-5ca0ad3758b8","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"3598d6df-cd0c-4ef5-8960-64cd765d97bc","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"3e535e34-01bb-4774-8d3a-6586619f935c","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"cec9554a-4f21-49e7-af09-6c064d2fd987","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"2c834bb0-6205-410a-91ae-6f244e77ba67","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"7a798f45-e434-41dd-8eec-767f47c93c6e","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]},{"id":"eb1b46dc-ef67-4261-98bb-77796b51f708","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"a219559a-5427-4a48-82ba-7fd4ebc1b4a2","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]},{"id":"f3565254-b7cd-41df-98ff-93802efb8de4","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"fc8628bd-2baa-4986-86f0-93bca5f0ce6a","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]},{"id":"f9fd9204-20b3-4966-ad86-a67eee8df4e2","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]},{"id":"b4333f37-fda5-41c1-bfbb-a8f2f539a682","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"fab5687c-4d05-4bd4-9d18-b14c696f3e9f","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"3ec14a40-47aa-4569-8e84-b575e1f3107e","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"e102b4d6-1235-42bf-9180-b70ba5ed1fc8","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"81df5251-a207-4b22-a3e7-c8e422b68d47","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"fac5f39e-339c-44de-81d6-c98ce52a7d5b","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]},{"id":"6446ae46-3073-40f5-a385-d3c80d4987f1","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"77595f09-3c3a-4bf7-a628-dca3969f8a48","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"6b1c4c88-5cba-4f4c-9cc3-dcf75a4fa444","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"e979ca93-1262-4139-8ae0-e510fcc6f32f","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"3729e0d4-a56c-4e6e-8f9f-f555dd94e1f8","tags":[{"name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3"}]},{"id":"f088427d-98d8-4ea0-af40-f8d29c80565d","tags":[{"name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa","links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c"}]}]
        
(Showing Draft Content)

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

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

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


セル範囲を選択して、数式テキストボックスコントロールに追加することもできます。これには、まずテキストボックス内の数式範囲アイコンを選択します。次に、[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

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