セルの修飾

SpreadJSでは、装飾オブジェクトを使用して、修飾をセルまたはセル範囲に適用します。オブジェクトは、角折りまたはアイコンなどの設定を含みます。

角折り（ドッグイヤー）の設定

SpreadJSでは、セルの角折りのスタイルを設定することができます。この機能は、セルが無効な状態であることを示すなど、セルの状態をハイライト表示する場合に役に立ちます。

IDecoration インタフェースの cornerFold オプションを使用して、角折りのサイズ、位置および色を設定できます。cornerFold オプションは、サイズ、位置、色などのパラメータを提供する ICornerFold インタフェースから継承されます。

次の図は、セルB6とB8の角折りスタイルをオレンジ色でセルの左上の位置に表示しています。

cornerFold オプションのデフォルト値は次のとおりです。

次のサンプルコードは、ICornerFoldインタフェースとsetStyleメソッドを使用して、角折りスタイルを設定する方法を示します。

var style = new GC.Spread.Sheets.Style();
style.decoration = {
    cornerFold: {
        size: 10,
        position: GC.Spread.Sheets.CornerPosition.leftTop,
        color: "orange"
    }
}
sheet.setStyle(5, 1, style);

アイコンの設定

GC.Spread.Sheets.Style クラスの icons プロパティを使用して、スプレッドシートのセルの内外に、アイコンによる装飾を設定することができます。テキストまたは値を含むセル型は、アイコンを使用して装飾できますが、チェックボックスやコンボボックスなどのセル型は、 icons プロパティをサポートしません。

SpreadJS には、アイコンの装飾のためにソース、幅、高さ、位置など、さまざまなオプションが用意されています。アイコンの位置を指定するには、以下に示すように、IconPosition列挙体を使用します。

次のサンプルコードは、アイコンを使用してセルのスタイルを設定する方法を示します。

// アイコンを左側に設定します。
style = new GC.Spread.Sheets.Style();
style.decoration = {
    icons: [
         {
           src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
            position: GC.Spread.Sheets.IconPosition.left
          }
       ]
   };
 setIcon(1, 1, style); 

 メモ:

• leftOfText および rightOfText値はテキストセルにのみ適用されます。

• 現在のビューの外側にあるアイコンは、隣接する列にのみ影響します。

• 装飾が複数のアイコンをサポートしている場合、アイコンは位置に関係なく並べて描画されます。

• セルの配置は、アイコンの垂直方向の配置に影響します。

• スタイル装飾アイコンが含まれるセルはオーバーフローできません。

デザイナの使用 

デザイナでセルにアイコンを追加するには、次の手順を実行します。

1. セルを選択します。

2. セルを右クリックし、コンテキストメニューから［セルの書式設定...］オプションを選択します。これにより、スプレッドシートの ［セルの書式設定］ダイアログボックスが表示されます。［装飾］タブに移動し、各プロパティを設定します。

   
   

アイコンオプションの追加・更新 

1. ［追加］ボタンをクリックして新しいアイコンオプションを追加します。ソース、位置、幅、または高さを選択してアイコンを更新します。

   
   

   
   

2. ［アイコンの選択］オプションをクリックして、アイコンの場所を参照します。

   
   

   
   

3. 位置にあるコンボボックス（オプション）を使用して位置を指定することができます。

   
   

   
   

4. 幅と高さのスピンボタンを使用して、アイコンの幅と高さのサイズを変更することもできます。

   
   

   
   

アイコンオプションの削除 

1. 削除するオプションを選択します。

   
   

   
   

2. ［削除］ボタンをクリックして、選択したオプションを削除します。