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:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import cultureInfos from "sjs-globalization";
cultureInfos.forEach(function(cultureInfo){
GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(),cultureInfo);
})
export function AppFunc() {
let spread = null;
const initSpread = (currSpread) => {
spread = currSpread;
spread.suspendPaint();
initData()
spread.resumePaint();
selectCulture();
}
const initData = () => {
let symbolFormat = '¥#,##0.00';
let fullDateTimePattern = 'dddd, MMMM dd, yyyy h:mm:ss tt';
let shortDateTimePattern = 'dddd tt';
let sheet = spread.getActiveSheet();
sheet.options.allowCellOverflow = true;
let 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);
let 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);
let mydate = new Date();
mydate.setFullYear(1984, 1, 21);
let 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);
}
const selectCulture = () => {
let sheet = spread.getActiveSheet();
spread.suspendPaint();
let cultureName = document.getElementById('cultures').value;
GC.Spread.Common.CultureManager.culture(cultureName);
let culture = GC.Spread.Common.CultureManager.getCultureInfo(cultureName);
let symbolFormat;
if (culture.predefinedFormats.Currency) {
symbolFormat = culture.predefinedFormats.Currency[0];
} else {
symbolFormat = culture.NumberFormat.currencySymbol;
symbolFormat = '"' + symbolFormat + '"' + '#,##0.00';
}
for (let row = 3; row <= 9; row++) {
for (let col = 3; col <= 5; col++) {
sheet.getCell(row, col).formatter(symbolFormat);
}
}
spread.resumePaint();
}
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={initSpread}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<label htmlFor="cultures">Culture: </label>
</div>
<div className="option-row">
<select id="cultures" style={{ width: '100%' }} onChange={selectCulture}>
{
['en-us', 'zh-cn', 'ja-jp', 'ko-kr'].concat(cultureInfos).map(function(cultureInfo){
if(typeof cultureInfo ==='string'){
cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo(cultureInfo);
}
return (<option value={cultureInfo.name()}> {cultureInfo.name()}: {cultureInfo.displayName}</option>)
})
}
</select>
</div>
</div>
</div>;
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import cultureInfos from "sjs-globalization";
const Component = React.Component;
cultureInfos.forEach(function(cultureInfo){
GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(),cultureInfo);
})
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<label htmlFor="cultures">Culture: </label>
</div>
<div className="option-row">
<select id="cultures" style={{ width: '100%' }} onChange={e => this.selectCulture(e)}>
{
['en-us', 'zh-cn', 'ja-jp', 'ko-kr'].concat(cultureInfos).map(function(cultureInfo){
if(typeof cultureInfo ==='string'){
cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo(cultureInfo);
}
return (<option value={cultureInfo.name()}> {cultureInfo.name()}: {cultureInfo.displayName}</option>)
})
}
</select>
</div>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
spread.suspendPaint();
this.initData(spread)
spread.resumePaint();
this.selectCulture();
}
initData(spread) {
let symbolFormat = '¥#,##0.00';
let fullDateTimePattern = 'dddd, MMMM dd, yyyy h:mm:ss tt';
let shortDateTimePattern = 'dddd tt';
let sheet = spread.getActiveSheet();
sheet.options.allowCellOverflow = true;
let 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);
let 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);
let mydate = new Date();
mydate.setFullYear(1984, 1, 21);
let 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);
}
selectCulture() {
let spread = this.spread;
let sheet = spread.getActiveSheet();
spread.suspendPaint();
let cultureName = document.getElementById('cultures').value;
GC.Spread.Common.CultureManager.culture(cultureName);
let culture = GC.Spread.Common.CultureManager.getCultureInfo(cultureName);
let symbolFormat;
if (culture.predefinedFormats.Currency) {
symbolFormat = culture.predefinedFormats.Currency[0];
} else {
symbolFormat = culture.NumberFormat.currencySymbol;
symbolFormat = '"' + symbolFormat + '"' + '#,##0.00';
}
for (let row = 3; row <= 9; row++) {
for (let 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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/js/external/globalize.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/external/globalize.cultures.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></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;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'sjs-globalization': '$DEMOROOT$/spread/source/js/external/sjs-globalization/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
