SpreadJS는 셀 수준의 안쪽 여백 및 셀 레이블을 지원합니다.
스타일 cellPadding 속성을 설정하여 셀의 안쪽 여백을 추가할 수 있습니다. 셀 안쪽 여백에는 CSS 안쪽 여백과 동일한 정책이 있습니다. 예:
레이블 값은 워터마크에서 가져온 것이므로 셀 레이블을 설정할 때 워터마크 값을 설정해야 합니다. 예:
스타일 labelOptions 속성을 설정하여 레이블 스타일을 설정할 수 있습니다. labelOptions는 개체이며 다음 다섯 가지 속성이 있습니다.
alignment: 레이블 위치입니다. topLeft, topCenter, topRight, bottomLeft, bottomCenter 및 bottomRight의 6가지 위치가 있습니다. 기본값은 topLeft입니다.
visibility: 레이블 표시 모드이며, 다음 세 가지가 있습니다.
표시 - 안쪽 여백 영역에 항상 워터마크를 표시하고, 셀에 값이 있는지에 상관없이 셀 영역에 워터마크를 표시하지 않습니다.
숨김 - 안쪽 여백 영역에 워터마크를 표시하지 않고, 값 조건이 있는 셀 영역에 워터마크를 표시합니다.
자동 - 셀에 값이 있을 때 안쪽 여백 영역에 워터마크를 표시하고, 셀에 값이 없을 때 셀 영역에 워터마크를 표시합니다. 기본 표시 값입니다.
font: 레이블 글꼴입니다. labelFont 값이 없으면 스타일의 font 값이 사용됩니다. font 값이 없으면 시트 기본 font 값이 사용됩니다.
foreColor: 레이블 전경색입니다. labelForeColor 값이 없으면 스타일의 foreColor 값이 사용됩니다. foreColor 값이 없으면 forecolor는 'grey'입니다.
margin: 레이블 여백입니다. 레이블 여백에는 CSS 여백과 동일한 정책이 적용됩니다. 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="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}