SpreadJS 示例
参考文档
API 文档
更多
立即试用
SpreadJS 示例
SpreadJS 示例
功能例子
文化
本地化
主页
快速开始
实例集合
商业仪表
财务关键业绩指标表
应收账款帐龄分析表
收入损益表
费用预算
1040 纳税单
成绩单仪表
菜谱
营业损益预测
决策分析模板
飞机座位表
形状操作流程图
发票单据
年度财务报告
零售指标
功能例子
工作簿
初始化Spread
Spread表单
表单名称标签
滚动条
Spread背景
Spread绘制
Spread事件
Spread JSON 导入/导出
数据源序列化
自定义特性序列化
命中测试
像素滚动
拆分调整大小
表单
初始化表单
边框和网格线
可见性
缩放
表单单元格头区域
行与列
动态调整大小
单元格
合并单元格
冻结行列与可视区域
获取与设置数据
公式
选择单元格
表单行为
通过行为改变值
自定义行为
表单保护
表单事件
表单绘制
分组列
样式
基本应用
字体
单元格内边距和标签
单元格按钮
单元格下拉菜单
列表
时间选择器
月份选择器
日期时间选择器
滑动条
计算器
颜色选择器
工作流列表
文字方向
公式函数
基本函数
INDIRECT 函数
函数使用通配符
自定义函数
异步函数
数组公式介绍
数组公式用例
语言资源
AGGREGATE 函数
动态数组
简介
FILTER 函数
RANDARRAY 函数
SEQUENCE 函数
SORT 函数
SORTBY 函数
UNIQUE 函数
隐式交集运算符 @
数据绑定
表单级别绑定
单元格级别绑定
表格绑定
单元格编辑
单元格导航行为
脏数据
复制粘贴Excel样式
扩展粘贴区域
复制粘贴增强
单引号前缀
自动合并
列方向自动合并
区域自动合并
标题区域自动合并
单元格格式
基本应用
自定义格式
账单格式
单元格类型
基本应用
按钮单元格
复选框单元格
普通组合框单元格
超链接单元格
单选列表
复选框列表
按钮列表
自定义单元格
自定义行列头单元格
区域模板类型
单元格状态
单元格状态介绍
自定义单元格状态
形状
基本应用
基础形状
线条
形状组合
自定义形状
形状与公式
图表
基本应用
自定制
坐标轴
图例
图表区
鼠标悬停
趋势线
误差线
柱形图
折线图
饼形图
面积图
条形图
散点图
股票图
组合图
雷达图
旭日图
树状图
表格
基本应用
自定义表格
表格操作
数据绑定
表格行为
自动扩展
上下文菜单
表头滚动增强
调整表格区域
数据验证与条件格式
选择表格
TAB 键
汇总行
表格样式
条件格式
基本应用
条件规则
数据验证
基本应用
自定义数据验证
填充
基本应用
自定义填充
筛选
基本应用
筛选框及筛选按钮
筛选行为
自定义筛选
区域分组
基本应用
自定制
样式
批注
基本应用
设置
行为
事件
迷你图
基本应用
自定制迷你图
迷你图配置
组成瀑布函数迷你图
箱线函数迷你图
子弹函数迷你图
横向条状/竖向柱状函数迷你图
阶梯瀑布函数迷你图
饼形函数迷你图
面积函数迷你图
散点函数迷你图
散布函数迷你图
堆积函数迷你图
方差函数迷你图
兼容Excel函数迷你图
自定制函数迷你图
月份迷你图
年份迷你图
富文本
基本应用
条形码
基础应用
QR 二维码
Data Matrix 二维码
PDF417 二维码
EAN13 条形码
EAN8 条形码
Codabar 条形码
CODE39 条形码
CODE93 条形码
CODE128 条形码
GS1-128 条形码
CODE49 二维码
状态栏
基础应用
自定义状态栏
查询
基本应用
浮动元素
基本应用
自定制浮动对象元素
图片
浮动元素固定位置
浮动对象元素行为
浮动对象元素事件
命名信息
基本应用
切片器
基本应用
切片器设置
通用切片器数据
表格切片器数据
项目切片器
图表切片器用例
树形切片器用例
聚合切片器
学生信息切片器用例
亚马逊切片器用例
公式编辑器
基本应用
区域选择器
标签
基本应用
标签支持行为
搜索标签
前端导入导出Excel
前端导入导出
导出PDF
基本应用
自定义导出PDF
自定义字体
打印
基本应用
自定制打印
上下文菜单
基本应用
自定义上下文菜单
继承上下文菜单
触摸
基本应用
触摸工具栏
主题
文档主题
主题
Spread 主题
文化
本地化
自定义本地化
全球化
本地化
主题:
Default
Excel 2013darkGray
Excel 2013lightGray
Excel 2013white
Excel 2016colorful
Excel 2016darkGray
Excel 2016black
SpreadJS 内置支持英文 (默认),中文以及日文(需要相应的资源文件)本地化。你可以使用它们来完成应用的本地化工作。
<p>除了英文之外,你需要添加相应的资源文件链接到页面头部来实现本地化。例如:</p> <pre><code class="hljs js language-js"><head> ... <script src=".../spreadjs/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script> <script src=".../spreadjs/resources/ja/gc.spread.sheets.resources.ja.x.x.x.min.js" type="text/javascript"></script> ... </head> </code></pre> <p>然后,你可以选择以下方法中的一种来切换资源文件。</p> <p><strong>本地化 meta 标签</strong></p> <p>你可以设置本地化 meta 标签:</p> <pre><code class="hljs js language-js"><head> ... <meta name="spreadjs culture" content="zh-cn" /> ... </head> </code></pre> <p><strong>通过代码切换</strong></p> <p>你可以通过调用 GC.Spread.Common.CultureManager.<strong>culture</strong> 方法来设置本地化:</p> <pre><code class="hljs js language-js">GC.Spread.Common.CultureManager.culture(<span class="hljs-string">"zh-cn"</span>); </code></pre>
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); document.getElementById('cultureName').onchange = function (e) { GC.Spread.Common.CultureManager.culture(e.target.value); }; } function initSpread(spread) { spread.suspendPaint(); spread.options.showResizeTip = spreadNS.ShowResizeTip.both; spread.options.showScrollTip = spreadNS.ShowScrollTip.both; var sheet = spread.getActiveSheet(); for (var r = 0; r < 10; r++) { for (var c = 0; c < 5; c++) { sheet.setValue(r, c, r + c); } } sheet.rowFilter(new spreadNS.Filter.HideRowFilter(new spreadNS.Range(0, 0, 10, 5))); sheet.setValue(10, 0, "SUM:"); sheet.setFormula(10, 1, "SUM(A1:E10)"); sheet.setValue(11, 0, "PIESPARKLINE:"); sheet.setFormula(11, 1, 'PIESPARKLINE(A1:E10,"yellow", "green")'); sheet.setRowHeight(11, 100); sheet.setColumnWidth(0, 120); sheet.setColumnWidth(1, 100); spread.resumePaint(); GC.Spread.Common.CultureManager.culture(document.getElementById('cultureName').value); }
<!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$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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>Culture:</label> <select id="cultureName"> <option value="en-us" selected>English</option> <option value="zh-cn">Chinese</option> <option value="ja-jp">Japanese</option> </select> </div> <div class="option-row"> <ul style="margin: 0;padding-left: 20px;"> <li>Perform any of the below actions to view the results:</li> <div>- Click a filter dropdown in the column header</div> <div>- Resize a column or row header</div> <div>- Use the scrollbar to scroll the contents</div> <li>To view localized formula descriptions:</li> <div>- Double click cell B11 or B12</div> <div>- Click to edit the formula to view the updated descriptions</div> </ul> </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; padding: 5px; 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; }