概述
本 Demo 展示了如何为 SpreadJS 工作簿动态切换主题。Demo 初始化了一个包含表格数据和饼图迷你图的工作表,用户可以通过下拉选择器在不同主题之间切换,包括 SpreadJS 默认主题、Excel 2013 系列主题(白色、浅灰、深灰)和 Excel 2016 系列主题(彩色、深灰、黑色)。
实现思路
初始化工作簿,加载预设的表格数据和饼图迷你图
使用 tables.addFromDataSource 方法创建表格,应用表格样式
使用 PIESPARKLINE 公式创建饼图迷你图
监听主题选择器的 change 事件
动态替换页面中的 CSS 文件引用
调用 spread.refresh() 方法应用新主题
代码解析
初始化表格数据
使用 addFromDataSource 方法从数据源创建表格,自动生成表头和数据行,并应用 light14 表格样式。
添加饼图迷你图
使用 PIESPARKLINE 公式在单元格中创建饼图迷你图,第一个参数指定数据范围,后续参数指定各扇形的颜色。
动态切换主题
切换主题时,先移除当前的主题 CSS 文件,然后动态创建新的 link 元素加载新主题的 CSS 文件。CSS 加载完成后,调用 spread.refresh() 方法刷新工作簿以应用新主题。
运行效果
页面加载后显示一个包含表格和饼图的工作表
通过右上方的下拉选择器可以选择不同的主题
可选主题包括:SpreadJS 默认主题、Excel 2013(白色、浅灰、深灰)和 Excel 2016(彩色、深灰、黑色)
切换主题后,整个工作簿的外观样式会立即更新,包括表格、单元格、选区等所有视觉元素
API 参考
refresh 方法
手动刷新 Workbook 对象的布局和渲染。在修改主题 CSS 后需要调用此方法以应用新样式。
addFromDataSource 方法
name: 表格名称
row、column: 表格起始位置
dataSource: 数据源,可以是数组或数据管理器表
style: 表格主题样式,可选
PIESPARKLINE 公式
percentage: 数据范围引用或百分比值
color1, color2, ...: 各扇形的颜色值
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
spread.suspendPaint();
var sheet = spread.getActiveSheet();
addPieContent(sheet);
var dataColumns = ["Interval", "Javascript", "Java", "Python", "Php", "C++", "C", "Ruby"];
var data = [
["2017", 0.625, 0.397, 0.32, 0.281, 0.223, 0.19, 0.091],
["2018", 0.715, 0.454, 0.379, 0.314, 0.246, 0.221, 0.103],
["2019", 0.678, 0.411, 0.417, 0.264, 0.235, 0.206, 0.084]
];
sheet.tables.addFromDataSource("table1", 1, 1, data, spreadNS.Tables.TableThemes.light14);
sheet.getRange(-1, 1, -1, 6).width(80);
var table = sheet.tables.findByName("table1");
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
table.setColumnName(5, dataColumns[5]);
table.setColumnName(6, dataColumns[6]);
table.setColumnName(7, dataColumns[7]);
sheet.getRange("C3:I5").formatter("0.0%");
function addPieContent(sheet) {
sheet.addSpan(6, 2, 12, 5);
sheet.setFormula(6, 2, '=PIESPARKLINE(C1:I5, "#115f9a", "#1984c5", "#22a7f0", "#48b5c4", "#76c68f", "#a6d75b", "#c9e52f", "#d0ee11", "#d0f400")');
}
spread.resumePaint();
document.getElementById('spreadThemes').onchange = function () {
var header = document.getElementsByTagName('head')[0];
var target = document.querySelector('link[href*="gc.spread.sheets"]');
var href = target.href,
pos = href.indexOf('gc.spread.sheets'),
item = href.substr(0, pos) + this.value;
header.removeChild(target);
if (item) {
addThemeLink(item);
} else {
spread.refresh();
}
};
function addThemeLink(href) {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.onload = function () {
spread.refresh();
};
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
};
<!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-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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="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>在下方定义 Spread 主题：</label>
<select id="spreadThemes">
<optgroup label="SpreadJS">
<option value="gc.spread.sheets.css">SpreadJS</option>
</optgroup>
<optgroup label="Excel2013">
<option value="gc.spread.sheets.excel2013white.css" selected>白色</option>
<option value="gc.spread.sheets.excel2013lightGray.css">浅灰</option>
<option value="gc.spread.sheets.excel2013darkGray.css">深灰</option>
</optgroup>
<optgroup label="Excel2016">
<option value="gc.spread.sheets.excel2016colorful.css">彩色</option>
<option value="gc.spread.sheets.excel2016darkGray.css">深灰</option>
<option value="gc.spread.sheets.excel2016black.css">黑色</option>
</optgroup>
</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;
}
label {
display: block;
margin-bottom: 6px;
}
input,
select {
padding: 4px 6px;
box-sizing: border-box;
margin-bottom: 6px;
}
.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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
