You can modify the culture string and create a custom culture using the CultureInfo class.
Add the custom culture by using the addCultureInfo method along with a culture name. Use the culture by setting the Culture method with the corresponding name.
You can custom the line breaking rules of word wrap by the TextFormat property.
In cn culture, SpreadJS will line breaking between the Chinese characters, you can custom the lineBreakingStrategy to line breaking by words:
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="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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;
}
