セルパディングとラベル
セルパディングとラベルを使用することで、データが読みやすくなります。
SpreadJSでは、セルレベルのパディング（セル内部のスペース）とセルラベルがサポートされます。
セルのパディングを追加するには、スタイルプロパティcellPaddingを設定します。セルパディングには、CSSパディングと同じポリシーが適用されます。次に、例を示します。
ラベルの値はウォーターマークから取得されます。したがって、セルラベルを設定するには、ウォーターマークの値を設定しておく必要があります。次に、例を示します。
ラベルのスタイルを設定するには、スタイルプロパティlabelOptionsを設定します。labelOptionsは1つのオブジェクトであり、以下の5つのプロパティを備えます。****
alignment: ラベルの位置。topLeft（左上）、topCenter（中央上）、topRight（右上）、bottomLeft（左下）、bottomCenter（中央下）、bottomRight（右下）の6つの位置のいずれかを指定できます。デフォルト値はtopLeftです。
visibility: ラベルの表示モード。有効値は次の3つです。
visible（表示）: パディング領域にウォーターマークを常時表示します。セルに値があるかどうかにかかわらず、セル領域にはウォーターマークは表示されません。
hidden（非表示）: パディング領域にはウォーターマークを表示せず、値の条件に応じてセル領域にウォーターマークを表示します。
auto（自動）: セルに値があるときはパディング領域にウォーターマークを表示し、セルに値がないときはセル領域にウォーターマークを表示します。これはデフォルトの表示モードです。
font: ラベルのフォント。labelFont値を設定しない場合は、スタイルのフォント値が使用されます。フォント値も設定されていない場合は、シートのデフォルトのフォント値が使用されます。
foreColor: ラベルの前景色。labelForeColor値を設定しない場合は、スタイルのforeColor値が使用されます。foreColor値も設定されていない場合は、前景色は「グレー」となります。
margin: ラベルのマージン。ラベルのマージンには、CSSマージンと同じポリシーが適用されます。
margin-top（上余白）
margin-right（右余白）
margin-bottom（下余白）
margin-left（左余白）
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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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;
}
