スタイル

SpreadJSには、テーブルを処理するための多数のAPIが用意されています。これらのAPIを使用することで、グループ化した関連データを簡単に管理および分析できます。

テーブルのヘッダまたはフッタを表示するかどうか、交互行または交互列スタイルを表示するかどうか、先頭列または最終列を強調表示するかどうかを定義できます。次に、例を示します。 SpreadJSでは、組み込みの数種類のテーブルスタイルを使用することも、これらのスタイルをカスタマイズすることもできます。次に、例を示します。
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); var table = sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.medium4); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); sheet.getCell(1, 1).text("First Name"); sheet.getCell(1, 2).text("Last Name"); sheet.getCell(1, 3).text("Score"); sheet.getCell(1, 4).text("Position"); sheet.getCell(2, 1).text("Alexa"); sheet.getCell(2, 2).text("Wilder"); sheet.getCell(2, 3).text("90"); sheet.getCell(2, 4).text("Web Developer"); sheet.getCell(3, 1).text("Victor"); sheet.getCell(3, 2).text("Wooten"); sheet.getCell(3, 3).text("70"); sheet.getCell(3, 4).text(".NET Developer"); sheet.getCell(4, 1).text("Ifeoma"); sheet.getCell(4, 2).text("Mays"); sheet.getCell(4, 3).text("85"); sheet.getCell(4, 4).text("Sales Manager"); spread.resumePaint(); _getElementById("showHeader").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.showHeader(_getElementById("showHeader").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("showFooter").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.showFooter(_getElementById("showFooter").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("highlightFirstColumn").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.highlightFirstColumn(_getElementById("highlightFirstColumn").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("highlightLastColumn").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.highlightLastColumn(_getElementById("highlightLastColumn").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("bandRows").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.bandRows(_getElementById("bandRows").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("bandColumns").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.bandColumns(_getElementById("bandColumns").checked); sheet.invalidateLayout(); sheet.repaint(); } }); //change table style _getElementById("tableStyles").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { var style = getTableStyle(); // if (style) { table.style(style); sheet.repaint(); // } } }); function getTableStyle() { var obj = _getElementById("tableStyles"), styleName = obj.options[obj.selectedIndex].text; if (styleName) { return spreadNS.Tables.TableThemes[styleName.toLowerCase()]; } return null; } } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>シートのテーブル領域を選択後に以下のスタイルを変更してください。</p> <div class="option-group"> <input type="checkbox" id="showHeader" checked/> <label for="showHeader">ヘッダ行</label> </div> <div class="option-group"> <input type="checkbox" id="highlightFirstColumn" /> <label for="highlightFirstColumn">最初の列</label> </div> <div class="option-group"> <input type="checkbox" id="showFooter" /> <label for="showFooter">合計行</label> </div> <div class="option-group"> <input type="checkbox" id="highlightLastColumn" /> <label for="highlightLastColumn">最後の列</label> </div> <div class="option-group"> <input type="checkbox" id="bandColumns" /> <label for="bandColumns">1列おきに網掛け</label> </div> <div class="option-group"> <input type="checkbox" id="bandRows" /> <label for="bandRows">1行おきに網掛け</label> </div> <div class="option-group"> <label for="tableStyles">組み込みスタイル:</label> <select id="tableStyles"> <option value="0">Light1</option> <option value="1">Light2</option> <option value="2">Light3</option> <option value="3">Light4</option> <option value="4">Light5</option> <option value="5">Light6</option> <option value="6">Light7</option> <option value="7">Light8</option> <option value="8">Light9</option> <option value="9">Light10</option> <option value="10">Light11</option> <option value="11">Light12</option> <option value="12">Light13</option> <option value="13">Light14</option> <option value="14">Light15</option> <option value="15">Light16</option> <option value="16">Light17</option> <option value="17">Light18</option> <option value="18">Light19</option> <option value="19">Light20</option> <option value="20">Light21</option> <option value="21">Medium1</option> <option value="22" selected>Medium2</option> <option value="23">Medium3</option> <option value="24">Medium4</option> <option value="25">Medium5</option> <option value="26">Medium6</option> <option value="27">Medium7</option> <option value="28">Medium8</option> <option value="29">Medium9</option> <option value="30">Medium10</option> <option value="31">Medium11</option> <option value="32">Medium12</option> <option value="33">Medium13</option> <option value="34">Medium14</option> <option value="35">Medium15</option> <option value="36">Medium16</option> <option value="37">Medium17</option> <option value="38">Medium18</option> <option value="39">Medium19</option> <option value="40">Medium20</option> <option value="41">Medium21</option> <option value="42">Medium22</option> <option value="43">Medium23</option> <option value="44">Medium24</option> <option value="45">Medium25</option> <option value="46">Medium26</option> <option value="47">Medium27</option> <option value="48">Medium28</option> <option value="49">Dark1</option> <option value="50">Dark2</option> <option value="51">Dark3</option> <option value="52">Dark4</option> <option value="53">Dark5</option> <option value="54">Dark6</option> <option value="55">Dark7</option> <option value="56">Dark8</option> <option value="57">Dark9</option> <option value="58">Dark10</option> <option value="59">Dark11</option> <option value="60">未設定</option> </select> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .option-group { margin-bottom: 6px; } label { display: inline-block; min-width: 90px; margin-bottom: 6px; } select { padding: 4px 6px; } p { padding: 0 0 12px; margin: 0; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }