你可以在 SpreadJS 上使用 bootstrap 主题。这将需要在 HTML 页面的 Head 部分添加一个 bootstrap 样式文件的链接并置于 SpreadJS 样式文件链接的后面。例如, 在你工程的 css 文件夹下有 bootstrap.css 以及 bootstrap-theme.css , 你可以添加如下样式文件引用:
SpreadJS 支持 jQuery UI 主题。这将需要在 HTML 页面的 Head 部分添加一个 jQuery UI 样式文件的链接并置于 SpreadJS 样式文件链接的后面。例如, 你可以添加如下样式链接来使用 jQuery UI sunny 主题:
window.onload = function () {
var customizeHref;
function addThemeLink(href) {
var isJqueryUI = href && href.indexOf('jqueryui') > -1;
if (isJqueryUI) {
toggleCustomizeCss(true);
}
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.setAttribute("name", "externalTheme");
link.onload = function () {
spread.refresh();
}
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
function toggleCustomizeCss(enable) {
var customizeLink = document.querySelector('link[name="customize"]');
if (!customizeHref) {
customizeHref = customizeLink.getAttribute('href');
}
if (enable) {
customizeLink.setAttribute('href', customizeHref);
} else {
customizeLink.removeAttribute('href');
}
}
document.getElementById('themes').onchange = function (e) {
var href = e.target.value,
themeLinks = document.querySelectorAll('link[name="externalTheme"]');
var header = document.getElementsByTagName('head')[0];
themeLinks.forEach(function (themeLink) {
themeLink && header.removeChild(themeLink);
});
toggleCustomizeCss(false);
if (href) {
href.split("&&").forEach(function (item) {
addThemeLink(item);
});
} else {
spread.refresh();
}
};
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
var sheet = spread.getActiveSheet();
var sd = dataSource;
if (sd.length > 0) {
sheet.setDataSource(sd);
}
sheet.setColumnWidth(0, 160);
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, 90);
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(6, 110);
sheet.setSelection(2, 2, 3, 4);
addThemeLink(document.getElementById('themes').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-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">
<link rel="stylesheet" type="text/css" href="customize.css" name="customize">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label>Use Theme:</label>
<select id="themes">
<optgroup label="SpreadJS">
<option value="">SpreadJS</option>
</optgroup>
<optgroup label="Bootstrap">
<option
value="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&&https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
Bootstrap 3.3.4
</option>
</optgroup>
<optgroup label="jQuery UI">
<option
value="https://code.jquery.com/ui/1.14.0/themes/black-tie/jquery-ui.css">
Black Tie
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/blitzer/jquery-ui.css">
Blitzer
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/cupertino/jquery-ui.css">
Cupertino
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/dark-hive/jquery-ui.css">
Dark Hive
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/dot-luv/jquery-ui.css">
Dot Luv
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/eggplant/jquery-ui.css">
Eggplant
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/excite-bike/jquery-ui.css">
Excite Bike
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/flick/jquery-ui.css">
Flick
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/hot-sneaks/jquery-ui.css">
Hot Sneaks
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/humanity/jquery-ui.css">
Humanity
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/le-frog/jquery-ui.css">
Le Frog
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/mint-choc/jquery-ui.css">
Mint Chocolate
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/overcast/jquery-ui.css">
overcast
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/pepper-grinder/jquery-ui.css">
Pepper Grinder
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/redmond/jquery-ui.css">
Redmond
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/smoothness/jquery-ui.css">
Smoothness
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/south-street/jquery-ui.css">
South Street
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/start/jquery-ui.css">
Start
</option>
<option value="https://code.jquery.com/ui/1.14.0/themes/sunny/jquery-ui.css"
selected="selected">Sunny
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/swanky-purse/jquery-ui.css">
Swanky Purse
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/trontastic/jquery-ui.css">
Trontastic
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/ui-darkness/jquery-ui.css">
UI Darkness
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/ui-lightness/jquery-ui.css">
UI Lightness
</option>
<option
value="https://code.jquery.com/ui/1.14.0/themes/vader/jquery-ui.css">
Vader
</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;
}
