全球化

SpreadJS 提供了 CultureInfo 来支持全球化。

你可以通过 CultureInfo 类来调整文化设置或者创建自定义的文化。 通过 addCultureInfo 方法来添加自定义文化并指定对于的文化名称。 并使用 culture 方法来根据文化名字改变文化。
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 name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }