セルパディングとラベル

セルパディングとラベルを使用することで、データが読みやすくなります。

<h1 id="セルパディングとラベル">セルパディングとラベル</h1> <p>セルパディングとラベルを使用することで、データが読みやすくなります。 SpreadJSでは、セルレベルのパディング(セル内部のスペース)とセルラベルがサポートされます。</p> <p>セルのパディングを追加するには、スタイルプロパティ<strong>cellPadding</strong>を設定します。セルパディングには、CSSパディングと同じポリシーが適用されます。次に、例を示します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> style = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); style.cellPadding = <span class="hljs-string">"10"</span>; </code></pre> <p>ラベルの値はウォーターマークから取得されます。したがって、セルラベルを設定するには、ウォーターマークの値を設定しておく必要があります。次に、例を示します。</p> <pre><code class="hljs js language-js"> style.watermark = <span class="hljs-string">"SpreadJS"</span>; </code></pre> <p>ラベルのスタイルを設定するには、スタイルプロパティ<strong>labelOptions</strong>を設定します。labelOptionsは1つのオブジェクトであり、以下の5つのプロパティを備えます。****</p> <p><strong><em><strong><em>alignment</strong>: ラベルの位置。topLeft(左上)、topCenter(中央上)、topRight(右上)、bottomLeft(左下)、bottomCenter(中央下)、bottomRight(右下)の6つの位置のいずれかを指定できます。デフォルト値はtopLeftです。</em></strong></em></p> <p><strong><em><strong><em>visibility</strong>: ラベルの表示モード。有効値は次の3つです。</em></strong></em></p> <ul> <li><strong><em><strong><em>visible(表示): パディング領域にウォーターマークを常時表示します。セルに値があるかどうかにかかわらず、セル領域にはウォーターマークは表示されません。</em></strong></strong></em></li> <li><strong><em><strong><em>hidden(非表示): パディング領域にはウォーターマークを表示せず、値の条件に応じてセル領域にウォーターマークを表示します。</em></strong></strong></em></li> <li><strong><em><strong><em>auto(自動): セルに値があるときはパディング領域にウォーターマークを表示し、セルに値がないときはセル領域にウォーターマークを表示します。これはデフォルトの表示モードです。</em></strong></strong></em></li> </ul> <p><strong><em><strong><em>font</strong>: ラベルのフォント。labelFont値を設定しない場合は、スタイルのフォント値が使用されます。フォント値も設定されていない場合は、シートのデフォルトのフォント値が使用されます。</em></strong></em></p> <p><strong><em><strong><em>foreColor</strong>: ラベルの前景色。labelForeColor値を設定しない場合は、スタイルのforeColor値が使用されます。foreColor値も設定されていない場合は、前景色は「グレー」となります。</em></strong></em></p> <p><strong><em><strong><em>margin</strong>: ラベルのマージン。ラベルのマージンには、CSSマージンと同じポリシーが適用されます。</em></strong></em></p> <ul> <li><strong><em><strong><em>margin-top(上余白)</em></strong></strong></em></li> <li><strong><em><strong><em>margin-right(右余白)</em></strong></strong></em></li> <li><strong><em><strong><em>margin-bottom(下余白)</em></strong></strong></em></li> <li><strong><em><strong><em>margin-left(左余白)</em></strong></strong></em></li> </ul>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 }); initSpread(spread); addCellType(spread); }; function initSpread(spread) { var sheet = spread.getActiveSheet(); spread.suspendPaint(); spread.options.showHorizontalScrollbar = false; spread.options.showVerticalScrollbar = false; spread.options.tabStripVisible = false; spread.options.grayAreaBackColor = 'white'; sheet.options.isProtected = true; sheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: true, color: 'black' }; sheet.options.rowHeaderVisible = false; sheet.options.colHeaderVisible = false; sheet.setRowCount(14); sheet.setColumnCount(13); initLayout(sheet); setBorder(sheet); spread.resumePaint(); } function initLayout(sheet) { var rowCount = sheet.getRowCount(); var colCount = sheet.getColumnCount(); var i; for (i = 0; i < rowCount; i++) { sheet.setRowHeight(i, 40); } sheet.setColumnWidth(0, 120); sheet.setColumnWidth(1, 80); i = 0; sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 3, 1, colCount - 3); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i, 6, 1, 3); sheet.addSpan(i++, 9, 1, 4); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i, 0, 1, colCount - 4); sheet.addSpan(i++, colCount - 4, 1, 4); sheet.addSpan(i, 0, 1, 3); sheet.addSpan(i, 3, 1, 3); sheet.addSpan(i, 6, 1, 3); sheet.addSpan(i++, 9, 1, 4); for (; i < rowCount; i++) { sheet.addSpan(i, 0, 1, colCount); } } function setBorder(sheet) { sheet.getRange(2, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { top: true }); sheet.getRange(4, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { top: true }); sheet.getRange(4, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(5, 0, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(6, 6, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet .getRange(9, -1, 0, -1) .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.medium), { bottom: true }); sheet.getRange(9, 0, 1, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(10, 0, 2, 9).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(11, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(11, 3, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); } function getCheckBoxCellType(text) { var c = new GC.Spread.Sheets.CellTypes.CheckBox(); c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right); c.caption(text); return c; } function getComboBoxCellType() { var combo = new GC.Spread.Sheets.CellTypes.ComboBox(); combo.items([ { text: 'China', value: '1' }, { text: 'United States', value: '2' }, { text: 'Japan', value: '2' }, { text: 'Germany', value: '2' }, { text: 'France', value: '2' }, { text: 'England', value: '2' } ]); combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); return combo; } function getHyperLinkCellType(text, tooltip) { var h = new GC.Spread.Sheets.CellTypes.HyperLink(); h.text(text); h.linkToolTip(tooltip); return h; } function addCellType(spread) { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.getCell(0, 0).value('Example Form').font('bold 30px Arial'); sheet .getCell(1, 0) .value('Please open an account at') .font('bold 18px Arial') .vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(2, 0).watermark('BRANCH NAME').locked(false).cellPadding('20 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(3, 0).value('Personal Details').font('bold 18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet .getCell(4, 0) .watermark('MARITIAL STATUS') .locked(false) .cellType(getCheckBoxCellType('Married')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(4, 1).locked(false).cellType(getCheckBoxCellType('Single')).cellPadding('15 0 0 0'); sheet.getCell(4, 3).watermark('FULL NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(5, 0) .watermark('EDUCATION') .locked(false) .cellType(getCheckBoxCellType('Under graduate')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(5, 1).locked(false).cellType(getCheckBoxCellType('Graduate')).cellPadding('15 0 0 0'); sheet.getCell(5, 2).locked(false).cellType(getCheckBoxCellType('Others')).cellPadding('15 0 0 0'); sheet .getCell(5, 6) .watermark('NATIONALITY') .locked(false) .cellType(getComboBoxCellType()) .cellPadding('15 0 0 10') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(6, 0).watermark('E-MAIL').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(6, 6).watermark('MOBILE NO.').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(6, 9) .watermark('EXISTING BANK ACCOUNT NO. (IF ANY)') .locked(false) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(7, 0) .watermark('IN CASE OF A MINOR PLEASE PROVIDE DETAILS (NAME OF PARENT AND NATURAL GUARDIAN)') .locked(false) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 6 0 1' }); sheet.getCell(7, 6).watermark('NAME OF FATHER/SPOUSE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(8, 0).value('Residential address').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(9, 0).watermark('FLAT NO. AND BLDG. NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(9, 6).watermark('ROAD NO./NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(10, 0).watermark('AREA AND LANDMARK').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(10, 9).watermark('CITY').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 0).watermark('TELEPHONE RESIDENCE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(11, 3).watermark('OFFICE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 6).watermark('FAX').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 9).watermark('PIN CODE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(12, 0).value('Referenced web site').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet .getCell(13, 0) .watermark('HELP MESSAGE') .locked(false) .cellType(getHyperLinkCellType('Any question, please click here.', 'help')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.resumePaint(); }
<!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" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }