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"><span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); <span class="hljs-keyword">var</span> table = sheet.tables.add(<span class="hljs-string">'table1'</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">4</span>, tableStyle); <span class="hljs-string">'table1'</span> === table.name(); <span class="hljs-comment">//true</span> <span class="hljs-number">0</span> === table.headerIndex(); <span class="hljs-comment">//true</span> <span class="hljs-number">3</span> === table.footerIndex(); <span class="hljs-comment">//true</span> table.showHeader(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display a header</span> table.showFooter(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display a footer</span> table.bandRows(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display an alternating row style</span> table.bandColumns(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display an alternating column style</span> table.highlightFirstColumn(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to highlight the first column</span> table.highlightLastColumn(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to highlight the last column</span> <span class="hljs-keyword">var</span> columnName = table.getColumnName(<span class="hljs-number">0</span>); <span class="hljs-comment">//get the header text with the specified table index.</span> table.setColumnName(<span class="hljs-number">1</span>, <span class="hljs-string">'column2'</span>); <span class="hljs-comment">//set the table header text.</span> table.setColumnFormula(<span class="hljs-number">0</span>, <span class="hljs-string">'=SUM(A1:A4)'</span>); <span class="hljs-comment">//Set the table footer formula with the specified index</span> <span class="hljs-string">'SUM(B2:B5)'</span> === table.getColumnFormula(<span class="hljs-number">0</span>); <span class="hljs-comment">//Gets the table footer formula with the specified index.</span> </code></pre> <p>SpreadJS 支持一些内置的表格样式，你也可以自己定制样式。比如：</p> <pre><code class="hljs js language-js">table.style(GC.Spread.Sheets.Tables.TableThemes.dark1); <span class="hljs-keyword">var</span> border = <span class="hljs-keyword">new</span> GC.Spread.Sheets.LineBorder(); <span class="hljs-keyword">var</span> styleInfo = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Tables.TableStyle(<span class="hljs-string">'red'</span>, <span class="hljs-string">'black'</span>, <span class="hljs-string">'10px arial'</span>, border, border, border, border, border, border); <span class="hljs-keyword">var</span> tableStyle = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Tables.TableTheme(); tableStyle.name(<span class="hljs-string">'tableStyle1'</span>); tableStyle.headerRowStyle(styleInfo) table.style(tableStyle); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.bind(spreadNS.Events.SelectionChanged, tableName); var table = sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.medium2); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); sheet.getCell(1, 1).text("First Name"); sheet.getCell(1, 2).text("Last Name"); sheet.getCell(1, 3).text("Score"); sheet.getCell(1, 4).text("Position"); sheet.getCell(2, 1).text("Alexa"); sheet.getCell(2, 2).text("Wilder"); sheet.getCell(2, 3).text("90"); sheet.getCell(2, 4).text("Web Developer"); sheet.getCell(3, 1).text("Victor"); sheet.getCell(3, 2).text("Wooten"); sheet.getCell(3, 3).text("70"); sheet.getCell(3, 4).text(".NET Developer"); sheet.getCell(4, 1).text("Ifeoma"); sheet.getCell(4, 2).text("Mays"); sheet.getCell(4, 3).text("85"); sheet.getCell(4, 4).text("Sales Manager"); spread.resumePaint(); function tableName() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); var name = ""; if (table && table.name) { name = table.name(); } $("#tableName").text(name); } _getElementById("showHeader").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.showHeader(_getElementById("showHeader").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("showFooter").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.showFooter(_getElementById("showFooter").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("highlightFirstColumn").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.highlightFirstColumn(_getElementById("highlightFirstColumn").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("highlightLastColumn").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.highlightLastColumn(_getElementById("highlightLastColumn").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("bandRows").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.bandRows(_getElementById("bandRows").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("bandColumns").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.bandColumns(_getElementById("bandColumns").checked); sheet.invalidateLayout(); sheet.repaint(); } }); //change table style _getElementById("tableStyles").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { var style = getTableStyle(); // if (style) { table.style(style); sheet.repaint(); // } } }); function getTableStyle() { var obj = _getElementById("tableStyles"), styleName = obj.options[obj.selectedIndex].text; if (styleName) { return spreadNS.Tables.TableThemes[styleName.toLowerCase()]; } return null; } } function _getElementById(id) { return document.getElementById(id); }
<!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/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.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"> <p>Try selecting the table in the Spread instance and change the style and properties using the checkboxes and drop-down menu.</p> <div class="option-group"> <input type="checkbox" id="showHeader" checked/> <label for="showHeader">Header Row</label> </div> <div class="option-group"> <input type="checkbox" id="highlightFirstColumn" /> <label for="highlightFirstColumn">First Column</label> </div> <div class="option-group"> <input type="checkbox" id="showFooter" /> <label for="showFooter">Total Row</label> </div> <div class="option-group"> <input type="checkbox" id="highlightLastColumn" /> <label for="highlightLastColumn">Last Column</label> </div> <div class="option-group"> <input type="checkbox" id="bandColumns" /> <label for="bandColumns">Banded Column</label> </div> <div class="option-group"> <input type="checkbox" id="bandRows" /> <label for="bandRows">Banded Row</label> </div> <div class="option-group"> <label for="tableStyles">Built-in Styles:</label> <select id="tableStyles"> <option value="0">Light1</option> <option value="1">Light2</option> <option value="2">Light3</option> <option value="3">Light4</option> <option value="4">Light5</option> <option value="5">Light6</option> <option value="6">Light7</option> <option value="7">Light8</option> <option value="8">Light9</option> <option value="9">Light10</option> <option value="10">Light11</option> <option value="11">Light12</option> <option value="12">Light13</option> <option value="13">Light14</option> <option value="14">Light15</option> <option value="15">Light16</option> <option value="16">Light17</option> <option value="17">Light18</option> <option value="18">Light19</option> <option value="19">Light20</option> <option value="20">Light21</option> <option value="21">Medium1</option> <option value="22" selected>Medium2</option> <option value="23">Medium3</option> <option value="24">Medium4</option> <option value="25">Medium5</option> <option value="26">Medium6</option> <option value="27">Medium7</option> <option value="28">Medium8</option> <option value="29">Medium9</option> <option value="30">Medium10</option> <option value="31">Medium11</option> <option value="32">Medium12</option> <option value="33">Medium13</option> <option value="34">Medium14</option> <option value="35">Medium15</option> <option value="36">Medium16</option> <option value="37">Medium17</option> <option value="38">Medium18</option> <option value="39">Medium19</option> <option value="40">Medium20</option> <option value="41">Medium21</option> <option value="42">Medium22</option> <option value="43">Medium23</option> <option value="44">Medium24</option> <option value="45">Medium25</option> <option value="46">Medium26</option> <option value="47">Medium27</option> <option value="48">Medium28</option> <option value="49">Dark1</option> <option value="50">Dark2</option> <option value="51">Dark3</option> <option value="52">Dark4</option> <option value="53">Dark5</option> <option value="54">Dark6</option> <option value="55">Dark7</option> <option value="56">Dark8</option> <option value="57">Dark9</option> <option value="58">Dark10</option> <option value="59">Dark11</option> <option value="60">None</option> </select> </div> </div> </div> </body> </html>
.sample { position: relative; height: 100%; overflow: auto; } .sample::after { display: block; content: ""; clear: both; } .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; } .option-group { margin-bottom: 6px; } label { display: inline-block; min-width: 90px; margin-bottom: 6px; } select { padding: 4px 6px; } p { padding: 0 0 12px; margin: 0; } .options-toggle { display: none; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
USA - International
Japan
South
Korea