Spread.Sheets
テーブルのスタイルの設定
Spread.Sheets > 開発者の手引き > ユーザーインタフェースの管理 > テーブルの使用 > テーブルのスタイルの設定

テーブル全体に対して組み込みスタイルを使用することも、テーブルの特定領域（行、列など）に個別のスタイルを設定することもできます。

組み込みスタイルのリストについては、 TableThemesクラスを参照してください。特定領域に設定可能なスタイルについては、TableThemeクラスを参照してください。

デフォルトでは表示されない部分や、デフォルトではスタイルが設定されていない部分に適用されるスタイルプロパティもあります。たとえば、 showFooterをtrueに設定しないかぎり、 lastFooterCellStyleは表示されません。次の表に示す Tableメソッドは、関連するテーブルスタイルがテーブルに表示されるために、事前にtrueに設定しておく必要があります。

Table TableTheme
bandColumns firstColumnStripSize, firstColumnStripStyle, secondColumnStripSize, secondColumnStripStyle
bandRows firstRowStripSize, firstRowStripStyle, secondRowStripSize, secondRowStripStyle
highlightFirstColumn highlightFirstColumnStyle
highlightLastColumn highlightLastColumnStyle
showHeader firstHeaderCellStyle, lastHeaderCellStyle, headerRowStyle
showFooter footerRowStyle, firstFooterCellStyle, lastFooterCellStyle

コードの使用

次のサンプルコードは、テーブルを作成し、組み込みスタイルを使用してテーブルスタイルを設定します。

JavaScript
コードのコピー
activeSheet.tables.add("Table1", 0, 0, 3, 3, GC.Spread.Sheets.Tables.TableThemes.dark1);
 activeSheet.getCell(0,0).text("Name");
 activeSheet.getCell(0,1).text("Value");
 activeSheet.getCell(0,2).text("T/F");
 activeSheet.getCell(1,0).text("AW");
 activeSheet.getCell(1,1).text("5");
 activeSheet.getCell(1,2).text("T");

コードの使用

次のサンプルコードは、テーブルフッタのスタイルを表示します。

JavaScript
コードのコピー

window.onload = function(){
           var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
           var activeSheet = spread.getActiveSheet();
        //データを追加します。
         for (var col = 1; col < 6; col++) {
             for (var row = 2; row < 11; row++) {
                activeSheet.setValue(row, col, row + col);
             }
         }
        var tableStyle = new GC.Spread.Sheets.Tables.TableTheme();
        var thinBorder = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.dotted);
        tableStyle.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle("aliceblue", "green", "bold 10pt arial", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, GC.Spread.Sheets.TextDecorationType.none));
        
        var tStyleInfo = new GC.Spread.Sheets.Tables.TableStyle();
        tStyleInfo.backColor = "green";
        tStyleInfo.foreColor = "red";
        tStyleInfo.borderBottom = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
        tStyleInfo.borderLeft = new GC.Spread.Sheets.LineBorder("yellow", GC.Spread.Sheets.LineStyle.medium);
        tStyleInfo.borderTop = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
        tStyleInfo.borderRight = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin);
        tStyleInfo.font = "bold 11pt arial";
        tableStyle.footerRowStyle(tStyleInfo);
        var sTable = activeSheet.tables.add("Custom", 1, 1, 10, 5, tableStyle);
        sTable.showFooter(true);
        //フッタの値を設定します。
        sTable.setColumnValue(0, "Total");
        //フッタの数式を設定します。
        sTable.setColumnFormula(4, "SUM(F3:F11)");
                                        }
        ...
        <div id="ss" style="height: 500px; width: 800px"></div>
参照
add メソッド

 

 

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