세계화

Theme:

SpreadJS는 CultureInfo를 제공하여 세계화를 지원합니다.

문화권 문자열을 수정하고 CultureInfo 클래스를 사용하여 사용자 정의 문화권을 만들 수 있습니다.

    var myCulture = new GC.Spread.Common.CultureInfo();
    myCulture.NumberFormat.currencySymbol = '€'
    myCulture.NumberFormat.numberDecimalSeparator = ',';
    // other settings ...

addCultureInfo 메서드와 문화권 이름을 함께 사용하여 사용자 정의 문화권을 추가합니다. Culture 메서드와 해당 이름을 설정하여 문화권을 사용합니다.

    GC.Spread.Common.CultureManager.addCultureInfo('de-DE', myCulture);
    GC.Spread.Common.CultureManager.culture('de-DE');

TextFormat 속성을 사용하여 워드 랩(Word srap)의 줄 바꿈 규칙을 사용자 정의할 수 있습니다.

    var myCulture = GC.Spread.Common.CultureManager.getCultureInfo();

    myCulture.TextFormat.lineBreakingChar = ["+", "-"]; // can line breaking when "+" "-"
    myCulture.TextFormat.lineBreakingForbidStart = ["》"]; // the 》won't be start of the breaking line
    myCulture.TextFormat.lineBreakingForbidEnd = ["《"]; // the 《 won't be end of the breaking line

    activeSheet.setValue(0, 0, "1-1+2+3+4+5+6+7");
    activeSheet.getCell(0, 0).wordWrap(true);  // the "1-" won't be in a separate line
    activeSheet.setValue(1, 0, "《abc》《def》《ghk》");
    activeSheet.getCell(1, 0).wordWrap(true);  // the《 》will looks better

중국 문화권에서 SpreadJS는 한자 사이를 줄바꿈하므로 lineBreakingStrategy을 단어별로 줄 바꿈하도록 사용자 정의할 수 있습니다.

var myCulture = new GC.Spread.Common.CultureInfo();
myCulture.TextFormat.lineBreakingStrategy = function (line) {
    // Add your text splitting logic here so that one word doesn't split in two lines
    // parameter "SpreadJS 是葡萄城结合 40 余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件"
    // return ["SpreadJS"," ","是","葡萄城","结合"," ","40"," ","余年","专业","控件","技术","和","在","电子","表格","应用","领域","的","经验","而","推出","的","纯前端","表格","控件"]
    var reg = /( )|(葡萄城)|(结合)|(余年)|(专业)|(控件)|(技术)|(电子)|(表格)|(应用)|(领域)|(经验)|(推出)|(纯前端)/g;
    var result = line.replace(reg, "\r$&\r").split("\r"); // split by the words
    return result.reduce((result, value)=>{value && result.push(value); return result}, []); // remove empty string
}

문화권 문자열을 수정하고 CultureInfo 클래스를 사용하여 사용자 정의 문화권을 만들 수 있습니다. addCultureInfo 메서드와 문화권 이름을 함께 사용하여 사용자 정의 문화권을 추가합니다. Culture 메서드와 해당 이름을 설정하여 문화권을 사용합니다. TextFormat 속성을 사용하여 워드 랩(Word srap)의 줄 바꿈 규칙을 사용자 정의할 수 있습니다. 중국 문화권에서 SpreadJS는 한자 사이를 줄바꿈하므로 lineBreakingStrategy을 단어별로 줄 바꿈하도록 사용자 정의할 수 있습니다.

window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
addCultureInfo();
initSpread(spread);
selectCulture();
};
function initSpread(spread) {
spread.suspendPaint();
var cultureEle = document.getElementById('cultures');
cultureEle.value = 'en-US'; // set default value
cultureEle.onchange = selectCulture;
initData(spread);
selectCulture();
spread.resumePaint();
}
function addCultureInfo(){
var culturesEle = document.getElementById("cultures");
['en-us', 'zh-cn', 'ja-jp', 'ko-kr'].concat(cultureInfos).forEach(function (cultureInfo) {
if(typeof cultureInfo === 'string'){
cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo(cultureInfo);
}else{
GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(), cultureInfo);
}
var optionEle = document.createElement("option");
optionEle.innerText = cultureInfo.name()+ ":"+ cultureInfo.displayName;
optionEle.setAttribute("value", cultureInfo.name());
culturesEle.appendChild(optionEle);
});
}
function initData(spread) {
var symbolFormat = '¥#,##0.00';
var fullDateTimePattern = 'dddd, MMMM dd, yyyy h:mm:ss tt';
var shortDateTimePattern = 'dddd tt';
var sheet = spread.getActiveSheet();
sheet.options.allowCellOverflow = true;
var table = sheet.tables.add("Table1", 2, 2, 8, 4, GC.Spread.Sheets.Tables.TableThemes.medium9);
table.highlightFirstColumn(true);
sheet.setColumnWidth(0, 20);
sheet.setColumnWidth(1, 20);
sheet.setColumnWidth(2, 80);
sheet.setColumnWidth(3, 180);
sheet.setColumnWidth(4, 180);
sheet.setColumnWidth(5, 200);
//header
sheet.setValue(2, 2, "Names");
sheet.setValue(2, 3, "Sale");
sheet.setValue(2, 4, "Buy");
sheet.setValue(2, 5, "Total");
sheet.setValue(3, 2, "Cindy");
sheet.setValue(4, 2, "Wills");
sheet.setValue(5, 2, "Sara");
sheet.setValue(6, 2, "Faith");
sheet.setValue(7, 2, "Halley");
sheet.setValue(8, 2, "Ken");
sheet.setValue(9, 2, "Newell");
sheet.setValue(3, 3, 1089468.3);
sheet.setValue(4, 3, 1078758.3);
sheet.setValue(5, 3, 1094684.6);
sheet.setValue(6, 3, 1034683.2);
sheet.setValue(7, 3, 1013685.1);
sheet.setValue(8, 3, 1013468.8);
sheet.setValue(9, 3, 1034686.2);
sheet.getCell(3, 3).formatter(symbolFormat);
sheet.getCell(4, 3).formatter(symbolFormat);
sheet.getCell(5, 3).formatter(symbolFormat);
sheet.getCell(6, 3).formatter(symbolFormat);
sheet.getCell(7, 3).formatter(symbolFormat);
sheet.getCell(8, 3).formatter(symbolFormat);
sheet.getCell(9, 3).formatter(symbolFormat);
sheet.setValue(3, 4, 1094682.6);
sheet.setValue(4, 4, 1094683.9);
sheet.setValue(5, 4, 1016856.9);
sheet.setValue(6, 4, 1046858.4);
sheet.setValue(7, 4, 1034685.9);
sheet.setValue(8, 4, 1074851.5);
sheet.setValue(9, 4, 1034682.9);
sheet.getCell(3, 4).formatter(symbolFormat);
sheet.getCell(4, 4).formatter(symbolFormat);
sheet.getCell(5, 4).formatter(symbolFormat);
sheet.getCell(6, 4).formatter(symbolFormat);
sheet.getCell(7, 4).formatter(symbolFormat);
sheet.getCell(8, 4).formatter(symbolFormat);
sheet.getCell(9, 4).formatter(symbolFormat);
sheet.getCell(3, 5).formula("=D4+E4-100.1");
sheet.getCell(4, 5).formula("=D5+E5-100.1");
sheet.getCell(5, 5).formula("=D6+E6-100.1");
sheet.getCell(6, 5).formula("=D7+E7-100.1");
sheet.getCell(7, 5).formula("=D8+E8-100.1");
sheet.getCell(8, 5).formula("=D9+E9-100.1");
sheet.getCell(9, 5).formula("=D10+E10-100.1");
sheet.getCell(3, 5).formatter(symbolFormat);
sheet.getCell(4, 5).formatter(symbolFormat);
sheet.getCell(5, 5).formatter(symbolFormat);
sheet.getCell(6, 5).formatter(symbolFormat);
sheet.getCell(7, 5).formatter(symbolFormat);
sheet.getCell(8, 5).formatter(symbolFormat);
sheet.getCell(9, 5).formatter(symbolFormat);
var table2 = sheet.tables.add("Table2", 12, 2, 5, 4, GC.Spread.Sheets.Tables.TableThemes.medium9);
table2.highlightFirstColumn(true);
sheet.setValue(12, 2, "Name");
sheet.setValue(12, 3, "Birthday");
sheet.setValue(12, 5, "Date");
sheet.setValue(13, 2, "Cindy");
sheet.setValue(14, 2, "Sara");
sheet.setValue(15, 2, "Faith");
sheet.setValue(16, 2, "Nami");
sheet.addSpan(12, 3, 1, 2);
sheet.addSpan(13, 3, 1, 2);
sheet.addSpan(14, 3, 1, 2);
sheet.addSpan(15, 3, 1, 2);
sheet.addSpan(16, 3, 1, 2);
var mydate = new Date();
mydate.setFullYear(1984, 1, 21);
var date;
date = new Date("1984/01/21 15:32:26");
sheet.setValue(13, 3, date);
sheet.setValue(13, 5, date);
date = new Date("1991/08/17 21:36:52");
sheet.setValue(14, 3, date);
sheet.setValue(14, 5, date);
date = new Date("2008/08/08 08:08:08");
sheet.setValue(15, 3, date);
sheet.setValue(15, 5, date);
date = new Date("2014/01/01 0:00:00");
sheet.setValue(16, 3, date);
sheet.setValue(16, 5, date);
sheet.getCell(13, 3).formatter(fullDateTimePattern);
sheet.getCell(14, 3).formatter(fullDateTimePattern);
sheet.getCell(15, 3).formatter(fullDateTimePattern);
sheet.getCell(16, 3).formatter(fullDateTimePattern);
sheet.getCell(13, 5).formatter(shortDateTimePattern);
sheet.getCell(14, 5).formatter(shortDateTimePattern);
sheet.getCell(15, 5).formatter(shortDateTimePattern);
sheet.getCell(16, 5).formatter(shortDateTimePattern);
}
function selectCulture() {
var spread = GC.Spread.Sheets.findControl(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
spread.suspendPaint();
var cultureName = document.getElementById('cultures').value;
GC.Spread.Common.CultureManager.culture(cultureName);
var culture = GC.Spread.Common.CultureManager.getCultureInfo(cultureName);
var symbolFormat;
if (culture.predefinedFormats.Currency) {
symbolFormat = culture.predefinedFormats.Currency[0];
} else {
symbolFormat = culture.NumberFormat.currencySymbol;
symbolFormat = '"' + symbolFormat + '"' + '#,##0.00';
}
for (var row = 3; row <= 9; row++) {
for (var col = 3; col <= 5; col++) {
sheet.getCell(row, col).formatter(symbolFormat);
}
}
spread.resumePaint();
}

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr"/>
<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/external/sjs-globalization/dist/spreadjs.globalization.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" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label for="cultures">Culture: </label>
</div>
<div class="option-row">
<select id="cultures" style="width: 100%"></select>
</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;
}
.option-row {
font-size: 14px;
margin-top: 10px;
}
label {
display: block;
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;
}