사용자 정의 지역화

사용자 정의 지역화는 특정 언어로 SpreadJS를 사용자 정의하는 기능을 제공합니다.

사용자는 스키마를 사용하여 지역화 개체를 정의하고, CultureManager에 추가한 다음, 정의된 문화권으로 전환해야 합니다. 워크시트에는 정의된 단어로 다양한 속성이 표시됩니다. 예: 힌트: 일부 문이 설정되지 않은 경우 Spread는 영어를 표시합니다(빈 문자열 “”로 설정된 경우에는 아무것도 표시하지 않음). 인수에는 표시의 경우 {0}, {1}, …가 사용됩니다(예: "Invalid {0}: {1} (must be between {2} and {3}).", "Height: {0} pixels"). 사용자 정의 지역화는 fromJson/toJson을 지원하지 않으므로 사용자가 필요할 때마다 추가해야 합니다. 샘플의 네임스페이스("common", "Sheets", "Filter")는 선택 사항이지만, "Functions" 및 "TableFunctions"는 필수입니다. 유효한 형식은 다음과 같습니다.
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); } function initSpread(spread) { var sheet = spread.getActiveSheet(); spread.suspendPaint(); spread.options.showScrollTip = 3; spread.options.showResizeTip = 3; var table = sheet.tables.addFromDataSource("table1", 0, 0, source, GC.Spread.Sheets.Tables.TableThemes.medium2) table.showFooter(true); table.showHeader(true); table.highlightFirstColumn(true); table.setColumnFormula(2, "=SUM(C2:C10)"); table.setColumnFormula(3, "=SUM(D2:D10)"); table.setColumnValue(0, "Total"); sheet.setColumnWidth(0, 130); sheet.setColumnWidth(4, 100); GC.Spread.Common.CultureManager.addCultureInfo("de", null, de); GC.Spread.Common.CultureManager.addCultureInfo("zh_tw", null, zh_tw); GC.Spread.Common.CultureManager.addCultureInfo("fr", null, fr); GC.Spread.Common.CultureManager.addCultureInfo("ha_ha", null, ha_ha); var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar')); statusBar.bind(spread); spread.resumePaint(); var select = document.getElementById('CultureSelect'); select.addEventListener('change', function () { var culture = this.value; GC.Spread.Common.CultureManager.culture(culture); document.getElementById('l_description').innerText = langDescription[culture]; if (culture === "en") { document.getElementById('language').value = ""; } else { document.getElementById('language').value = JSON.stringify(window[culture], null, 2); } }); }
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/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/customLocalization.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 class="sample-container"> <div id="ss" class="sample-spreadsheets"></div> <div id="statusBar"></div> </div> <div class="sample-options"> <div class="options-container"> Switch Culture: <select id="CultureSelect"> <option value="en">en</option> <option value="zh_tw">zh-tw</option> <option value="fr">fr</option> <option value="de">de</option> <option value="ha_ha">Ha-Ha</option> </select> <p id="l_description">The base and default language.</p> <textarea id="language" cols="85" rows="40" style="max-width: 98%" readonly="readonly"></textarea> <div class="sample-options"> <div class="options-container"> </div> </div> </div> </div> </div> </body> </html>
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sample-options { float: right; height: 100%; } .options-toggle { display: none; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-container { width: calc(100% - 280px); height: 100%; float: left; } .sample-spreadsheets { width: 100%; height: calc(100% - 25px); overflow: hidden; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; } .options-container { float: right; width: 280px; padding: 12px; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; box-sizing: border-box; width: 100%; } input[type=button] { margin-top: 6px; display: block; } .summary { background-color: #e6e6fa; padding: 3px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }