이 샘플에서 셀 내에서 긴 텍스트가 잘려 있는 것을 볼 수 있습니다. autoFitColumn 및 autoFitRow 메서드를 사용하여 열 및 행의 너비 또는 높이를 조정할 수 있습니다. 여러 줄 내용이 있는 셀에 워드 랩을 설정할 수도 있습니다.
여러 열이나 행 또는 전체 시트를 선택한 다음 선택된 열이나 행 중 하나를 두 번 클릭하여 선택된 모든 열이나 행에 자동 맞춤을 적용할 수 있습니다.
GC.Spread.Common.CultureManager.culture("ko-kr");
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
// set style
sheet.setSelection(0,0,10,3);
// set text
const multilineData = [
[
"Alpha beta gamma\ndelta epsilon zeta\neta theta iota\nkappa lambda mu",
"Quick brown fox\njumps over\nthe lazy dog\nspreadjs demo",
"Apple banana\norange mango\npear peach\nplum cherry"
],
[
"Line one here\nline two longer text\nline three end",
"Random words\nwith multiple\nline breaks\ninside cell",
"First row of text\nsecond row\nthird row\nfourth row"
],
[
"Sun moon stars\ngalaxy universe\nblack hole\nsupernova pulsar",
"Dog cat bird\nfish rabbit\nhamster snake\nparrot lizard",
"Programming\nJavaScript\nC++\nPython Rust\nGo"
],
[
"SpreadJS demo\nmultiline cell\nwrap text test\nalignment check",
"North east\nsouth west\ncenter middle\ndirection flow",
"Alpha numeric\nsymbols & signs\nrandom text\nunicode chars"
],
[
"One two three\nfour five six\nseven eight nine\nten eleven",
"Row with\ntaller text\nthat wraps\nin cell",
"Test data\ndemo content\nexample usage\npractice sample"
],
[
"Overlapping\nmultiline\ntesting row\nwrapped content",
"Red green blue\nyellow cyan magenta\nblack white gray",
"East west\nnorth south\ncompass points\nmap directions"
],
[
"Final example\nlast row\nending text\nspreadjs autofit",
"This is a\nvery long line\nthat should\nwrap inside cell",
"Dynamic content\nrandom words\nfiller text\nlonger sample"
],
[
"Table data\nrow eight\ncolumn one\nmulti line text",
"Sample values\nspreadsheet demo\nrich text\nalignment mode",
"Autofit row\nautofit column\nwrap toggle\nword wrap"
],
[
"Testing justify\nalignment demo\nword wrap case",
"Paragraph one\nparagraph two\nparagraph three",
"East side\nwest side\nnorth area\nsouth block"
],
[
"Demo finished\nlast row\nwith content\nspreadjs showcase",
"Final test cell\nend of data\nmultiline wrap",
"Goodbye row\nlast sample\ntesting done"
]
];
sheet.setArray(0, 0, multilineData);
sheet.resumePaint();
document.getElementById('autofit-column').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
for (let c = startCol; c < endCol; c++) {
sheet.autoFitColumn(c);
}
});
sheet.resumePaint();
};
document.getElementById('autofit-row').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
for (let r = startRow; r < endRow; r++) {
sheet.autoFitRow(r);
}
});
sheet.resumePaint();
};
document.getElementById('wrap').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
for (let r = startRow; r < endRow; r++) {
for (let c = startCol; c < endCol; c++) {
let cellStyle = sheet.getStyle(r, c) || new GC.Spread.Sheets.Style();
let currentWrap = cellStyle.wordWrap || false;
cellStyle.wordWrap = !currentWrap;
sheet.setStyle(r, c, cellStyle);
}
}
});
sheet.resumePaint();
};
document.getElementById('toggle-wrap-autoFit').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
// toggle wrap
for (let r = startRow; r < endRow; r++) {
for (let c = startCol; c < endCol; c++) {
let cellStyle = sheet.getStyle(r, c) || new GC.Spread.Sheets.Style();
let currentWrap = cellStyle.wordWrap || false;
cellStyle.wordWrap = !currentWrap;
sheet.setStyle(r, c, cellStyle);
}
}
// autofit col
for (let c = startCol; c < endCol; c++) {
sheet.autoFitColumn(c);
}
// autofit row
for (let r = startRow; r < endRow; r++) {
sheet.autoFitRow(r);
}
});
sheet.resumePaint();
};
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="spreadjs culture" content="ko-kr"/>
<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>
<script src="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.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">
<input type="button" value="AutoFit Column Width" id="autofit-column" />
<input type="button" value="AutoFit Row Height" id="autofit-row" />
<input type="button" value="Toggle Wrap" id="wrap" />
<input type="button" value="Toggle Wrap & AutoFit" id="toggle-wrap-autoFit" />
</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;
}
input {
display: block;
width: 150px;
}
.option-row {
font-size: 14px;
padding: 5px;
}
input {
padding: 4px 6px;
margin-bottom: 6px;
margin-right: 5px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
