工作表选项卡栏

概述本 Demo 展示了如何通过 SpreadJS 的 API 全方位控制工作表选项卡栏的外观和行为。Demo 创建了包含 100 个工作表的工作簿,并通过交互式界面展示了各项配置选项的实时效果。实现思路创建 Workbook 实例并设置 100 个工作表为各个配置选项绑定事件监听器,实现实时交互通过复选框控制布尔类型的选项(如显示/隐藏) 通过下拉框控制枚举类型的选项(如位置、可见性模式) 通过输入框和按钮设置数值类型的选项(如颜色、比例、宽度) 部分选项修改后需要调用 invalidateLayout() 和 repaint() 刷新布局代码解析初始化工作簿和工作表 Demo 首先创建了一个包含 100 个工作表的工作簿,用于演示选项卡栏在大量工作表场景下的导航功能。控制选项卡栏显示和编辑这些选项控制选项卡栏的基本行为。newTabVisible 控制是否显示"+"按钮,tabEditable 控制用户是否可以双击标签重命名工作表。设置选项卡栏位置 tabStripPosition 接受 GC.Spread.Sheets.TabStripPosition 枚举值: 0 (bottom): 底部(默认) 1 (top): 顶部 2 (left): 左侧 3 (right): 右侧当选项卡栏位于左侧或右侧时,用户可以通过鼠标滚轮滚动标签。控制所有工作表按钮 allSheetsListVisible 接受 GC.Spread.Sheets.AllSheetsListVisibility 枚举值: 0 (hide): 始终隐藏 1 (show): 始终显示 2 (auto): 自动(默认,工作表过多时显示) 自定义工作表标签颜色 sheetTabColor 是工作表级别的选项,可以设置单个工作表的标签颜色。支持各种颜色格式,如 "red"、"#FF0000"、"rgb(255,0,0)"。调整选项卡栏尺寸 tabStripRatio 的值在 0 到 1 之间,表示选项卡栏宽度占整个水平滚动条宽度的比例。tabStripWidth 用于选项卡栏位于左侧或右侧时,设置选项卡栏的宽度(最小值 80px)。刷新布局某些选项(如 tabStripVisible、newTabVisible)修改后需要调用 invalidateLayout() 和 repaint() 方法来重新计算布局并刷新显示。运行效果勾选/取消"显示新建选项卡"可以显示/隐藏"+"按钮勾选/取消"选项卡可编辑"可以启用/禁用双击标签重命名功能勾选/取消"显示选项卡栏"可以显示/隐藏整个选项卡栏勾选/取消"显示选项卡导航"可以显示/隐藏左右导航箭头选择"选项卡栏位置"可以将标签栏切换到底部、顶部、左侧或右侧选择"显示所有工作表按钮"可以控制汉堡菜单按钮的显示模式输入颜色值(如 red、blue、#FF0000)并点击"设置"可以更改当前活动工作表的标签颜色输入起始索引并点击"设置"可以导航到指定的工作表标签输入比例值(0-1)并点击"设置"可以调整选项卡栏的宽度比例输入宽度值并点击"设置"可以调整左侧/右侧选项卡栏的宽度 API 参考 tabStripVisible 是否显示工作表标签栏。 tabStripPosition 工作表标签栏的位置。可选值: TabStripPosition.bottom: 底部(默认) TabStripPosition.top: 顶部 TabStripPosition.left: 左侧 TabStripPosition.right: 右侧 tabEditable 是否允许用户编辑工作表标签名称。 newTabVisible 是否显示"+"按钮,允许用户添加新工作表。 tabNavigationVisible 是否显示工作表标签导航箭头。 allSheetsListVisible 是否显示所有工作表列表按钮。可选值: AllSheetsListVisibility.hide: 隐藏 AllSheetsListVisibility.show: 显示 AllSheetsListVisibility.auto: 自动(默认) sheetTabColor 工作表标签的颜色。支持各种颜色格式,如 "red"、"#FF0000"、"rgb(255,0,0)"。 tabStripRatio 工作表标签栏的宽度,以水平滚动条宽度的百分比表示(0-1)。 tabStripWidth 工作表标签栏的宽度,当它位于左侧或右侧时。默认值和最小值为 80。 startSheetIndex 设置起始工作表的索引,用于导航到指定的工作表标签。 invalidateLayout 和 repaint 重新计算布局并刷新显示。某些选项修改后需要调用这两个方法。

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
spread.setSheetCount(100);
initSpread(spread);
_getElementById('newtab_show').addEventListener('click', function() {
spread.options.newTabVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
_getElementById('tab_editable').addEventListener('click', function() {
spread.options.tabEditable = this.checked;
});
_getElementById('tabstrip_visible').addEventListener('click', function() {
spread.options.tabStripVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
_getElementById('tabnavigation_Visible').addEventListener('click', function() {
spread.options.tabNavigationVisible = this.checked;
});
_getElementById('allSheetsButton_Visible').addEventListener('change', function() {
spread.options.allSheetsListVisible = Number(this.value);
});
_getElementById('tabstrip_position').addEventListener('change', function() {
spread.options.tabStripPosition = Number(this.value);
});
_getElementById('setTabStripRatio').addEventListener('click', function() {
var ratio = parseFloat(_getElementById('tabstrip_ratio').value);
if (!isNaN(ratio)) {
spread.options.tabStripRatio = ratio;
}
});
_getElementById('setTabStripWidth').addEventListener('click', function() {
var width = parseInt(_getElementById('tabstrip_width').value);
if (!isNaN(width)) {
spread.options.tabStripWidth = width;
}
});
_getElementById('setStartSheetIndex').addEventListener('click', function() {
var index = _getElementById('startSheetIndex').value;
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index < spread.getSheetCount()) {
spread.startSheetIndex(index);
}
}
});
_getElementById('setSheetTabColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
if (sheet) {
var color = _getElementById('sheetTabColor').value;
sheet.options.sheetTabColor = color;
}
});
function initSpread(spread) {
var sd = dataSource;
var sheet = spread.getActiveSheet();
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);
}
};
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-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>使用这些选项更改选项卡栏的外观和行为。</label>
</div>
<div class="option-row">
<input type="checkbox" id="newtab_show" checked />
<label for="newtab_show">显示新建选项卡</label>
</div>
<div class="option-row">
<input type="checkbox" id="tab_editable" checked />
<label for="tab_editable">选项卡可编辑</label>
</div>
<div class="option-row">
<input type="checkbox" id="tabstrip_visible" checked />
<label for="tabstrip_visible">显示选项卡栏</label>
</div>
<div class="option-row">
<input type="checkbox" id="tabnavigation_Visible" checked />
<label for="tabnavigation_Visible">显示选项卡导航</label>
</div>
<div class="option-row">
<select id="allSheetsButton_Visible">
<option value="2">自动</option>
<option value="0">隐藏</option>
<option value="1">显示</option>
</select>
<label for="allSheetsButton_Visible">显示所有工作表按钮</label>
</div>
<div class="option-row">
<select id="tabstrip_position">
<option value="0">底部</option>
<option value="1">顶部</option>
<option value="2">左侧</option>
<option value="3">右侧</option>
</select>
<label for="tabstrip_position">选项卡栏位置</label>
</div>
<hr>
<label for="sheetTabColor" class="sizedLabel" style="padding-top: 20px">活动工作表选项卡颜色:</label>
<div class="option-row">
<input type="text" id="sheetTabColor" value="red" />
<input type="button" id="setSheetTabColor" value="设置" />
</div>
<label>这将更改活动工作表选项卡的颜色。</label>
<br />
<label for="startSheetIndex" class="sizedLabel" style="padding-top: 20px">起始工作表索引:</label>
<div class="option-row">
<input type="text" id="startSheetIndex" value="0" />
<input type="button" id="setStartSheetIndex" value="设置" />
</div>
<label>这会将工作表选项卡导航到指定索引处的选项卡（从 0 开始）。</label>
<br>
<label for="tabstrip_ratio" class="sizedLabel" style="padding-top: 20px">选项卡栏比例:</label>
<div class="option-row">
<input type="text" id="tabstrip_ratio" value="0.5" />
<input type="button" value="设置" id="setTabStripRatio" />
</div>
<label>这指定了选项卡栏宽度与 Spread 实例宽度的比例（介于 0 和 1 之间）。</label>
<br>
<label for="tabstrip_width" class="sizedLabel" style="padding-top: 20px">选项卡栏宽度:</label>
<div class="option-row">
<input type="text" id="tabstrip_width" value="80" />
<input type="button" value="设置" id="setTabStripWidth" />
</div>
<label>这指定了选项卡栏位于工作簿左侧和右侧时的宽度。最小值为 80。</label>
</div>
</div>
</body>
</html>

.sizedLabel {
display: inline-block;
width: 150px;
}
.colorLabel {
background-color: #F4F8EB;
}
input[type="text"] {
width: 100px;
}
input[type="button"] {
width: 60px;
margin: 0 10px;
}
.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;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

SpreadJS 在线示例