Spread는 여러 가지 유형의 선 스타일을 제공하여 얇은 선, 점선, 이중선 등과 같은 시트의 경계선과 눈금선을 사용자 정의하는 데 도움을 줍니다. 예를 들어, 다음 줄은 표시된 범위의 왼쪽 및 오른쪽 경계선을 점선 스타일로 변경합니다.
Spread는 두 종류의 대각선 테두리 선을 제공합니다. 대각선 테두리 선에는 오른쪽 아래로와 오른쪽 위로가 포함됩니다.
diagonalDown
diagonalUp
예를 들어 다음은 셀에 대한 대각선 테두리 선을 설정합니다.
다음 코드를 사용하여 눈금선을 추가 또는 제거하거나 색을 설정할 수 있습니다:
SheetAreaOffset 옵션을 설정하여 전체 시트 렌더링 영역에서 내용을 좌상단을 기준으로 약간 안쪽으로 이동시킬 수 있습니다. 이렇게 하면 보더가 두껍게 설정 되거나 또는 선택시에도 모든 내용이 가려지지 않고 보이게 됩니다.
sheetAreaOffset의 초기 값은 {left:0,top:0} 입니다.
var spreadNS = GC.Spread.Sheets;
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
var lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin);
var range = sheet.getRange(7, 1, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderLeft(new spreadNS.LineBorder('red', spreadNS.LineStyle.double));
range = sheet.getRange(7, 4, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium));
range = sheet.getRange(7, 7, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed));
range = sheet.getRange(7, 10, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderBottom(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thick), { all: true });
range.diagonalUp(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thin));
range = sheet.getRange(11, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.hair), { all: true });
range.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 7, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.mediumDashed), { all: true });
range.diagonalUp(new spreadNS.LineBorder('plum', spreadNS.LineStyle.double));
range.diagonalDown(new spreadNS.LineBorder('brown', spreadNS.LineStyle.thick));
range = sheet.getRange(11, 10, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.dashDot), { all: true });
range = sheet.getRange(17, 1, 2, 5);
range.setBorder(lineBorder1, { outline: true });
range = sheet.getRange(17, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.slantedDashDot), { inside: true });
range = sheet.getRange(17, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.mediumDashed), { inside: true });
range = sheet.getRange(16, 7, 7, 4);
range.setBorder(new spreadNS.LineBorder('plum', spreadNS.LineStyle.thick), {
left: true,
bottom: true
});
range = sheet.getRange(15, 8, 7, 4);
range.setBorder(new spreadNS.LineBorder('royalblue', spreadNS.LineStyle.slantedDashDot), {
top: true,
right: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('tomato', spreadNS.LineStyle.dashDot), {
left: true,
bottom: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('palegreen', spreadNS.LineStyle.mediumDashed), {
top: true,
right: true
});
range = sheet.getRange(16, 9, 5, 2);
range.setBorder(new spreadNS.LineBorder('violet', spreadNS.LineStyle.dotted), {
left: true,
bottom: true
});
range = sheet.getRange(17, 8, 5, 2);
range.setBorder(new spreadNS.LineBorder('skyblue', spreadNS.LineStyle.hair), {
top: true,
right: true
});
sheet.addSpan(17, 9, 2, 1);
range = sheet.getRange(17, 9, 2, 1);
range.setBorder(new spreadNS.LineBorder('purple', spreadNS.LineStyle.thin), { all: true });
addTableInfo(sheet);
initSheetAreaSheet(spread.getSheet(1));
_getElementById('gridline_show').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = this.checked;
sheet.options.gridline.showVerticalGridline = this.checked;
sheet.resumePaint();
});
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e, args) {
if (args.oldSheet === sheet) {
_forSheetAreaStatus('block');
_getElementByClassName('forBorder')[0].setAttribute('style', 'display:none');
} else {
_forSheetAreaStatus('none');
_getElementByClassName('forBorder')[0].setAttribute('style', 'display:block');
}
});
};
function addTableInfo(sheet) {
sheet.setArray(1, 3, [
[ 'Gender', 'Phone Number', 'Address' ],
[ 'woman', '021-432668', 'Chester Road' ],
[ 'man', '021-432238', 'Gertt Road' ],
[ 'man', '021-432533', 'Jnyliner Road' ],
[ 'man', '021-432125', 'Approach Road' ]
]);
var style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setStyle(1, 2, style, 3);
sheet.setText(1, 2, ' Info Name', spreadNS.SheetArea.viewport);
cell = sheet.getCell(1, 2);
cell.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
sheet.setStyle(1, 3, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 4, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 5, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setText(2, 2, 'John', spreadNS.SheetArea.viewport);
sheet.setText(3, 2, 'linda', spreadNS.SheetArea.viewport);
sheet.setText(4, 2, 'henry', spreadNS.SheetArea.viewport);
sheet.setText(5, 2, 'smith', spreadNS.SheetArea.viewport);
sheet.setRowHeight(1, 30);
sheet.setColumnWidth(4, 120);
sheet.setColumnWidth(5, 120);
range = sheet.getRange(1, 2, 5, 4);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.thin), { all: true });
sheet.resumePaint();
}
function initSheetAreaSheet(sheet) {
sheet.suspendPaint();
sheet.name('SheetAreaOffset');
var data = sheetAreaJSON;
sheet.fromJSON(data);
sheet.options.colHeaderVisible = false;
sheet.options.rowHeaderVisible = false;
sheet.options.sheetAreaOffset = {
left: 2,
top: 2
};
var range = sheet.getRange(0, 0, 3, 10);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.double), {
left: true,
bottom: true,
top: true,
right: true
});
sheet.resumePaint();
_getElementById('headerVisible').addEventListener('change', function() {
sheet.options.rowHeaderVisible = this.checked;
sheet.options.colHeaderVisible = this.checked;
});
_getElementById('setOffset').addEventListener('click', function() {
var left = _getElementById('offsetLeft').value,
top = _getElementById('offsetTop').value;
sheet.options.sheetAreaOffset = {
left: parseInt(left, 10),
top: parseInt(top, 10)
};
});
_forSheetAreaStatus('none');
}
function _getElementById(id) {
return document.getElementById(id);
}
function _getElementByClassName(className) {
return document.getElementsByClassName(className);
}
function _forSheetAreaStatus(status) {
var forSheetAreas = _getElementByClassName('forSheetArea');
for (var i = 0; i < forSheetAreas.length; i++) {
forSheetAreas[i].setAttribute('style', 'display:' + status);
}
}
<!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="$DEMOROOT$/spread/source/data/sheetAreaData.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">
<div class="option-row forBorder">
<input type="checkbox" id="gridline_show"/>
<label for="gridline_show" title="Set whether to display grid line">ShowGridLine</label>
</div>
<div class="option-row forSheetArea">
<input type="checkbox" id="headerVisible"><label for="headerVisible">HeaderVisible</label>
</div>
<div class="option-row forSheetArea">
<label> left: <input type="number" id="offsetLeft" value="2" /></label>
</div>
<div class="option-row forSheetArea">
<label> top: <input type="number" id="offsetTop" value="2" /></label>
</div>
<div class="option-row forSheetArea">
<input type="button" id="setOffset" value="Set Sheet Area Offset">
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: calc(100% - 20px);
overflow: hidden;
float: left;
margin: 10px;
}
.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;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}