选项卡栏

SpreadJS 有一个可自定义的工作表选项卡栏,并且每个元素都可以通过代码进行控制。

最左侧的标签导航箭头: 如果工作表中的工作表数量超出标签条的容纳范围,则会启用箭头,用户可以使用它们在列表中显示其他工作表标签。 工作表标签:用户可以双击标签重命名工作表,也可以拖动标签重新排序工作表。 汉堡按钮("≡"):显示所有工作表的列表。 “⊕”按钮:在工作簿中添加新的工作表。 标签分隔器:当标签栏位于工作簿底部时,用于分隔标签栏和水平滚动条。 标签条位置:可以指定标签条在电子表格的底部(默认)、顶部、左侧或右侧。 你可以通过设置 tabStripVisible 控制是否显示工作表标签。 将 tabNavigationVisible 设置为 false 可以隐藏导航箭头按钮(默认显示)。 通过设置 tabEditable 选项,可以允许或禁止用户重命名工作表。 通过设置 allowSheetReorder 选项,可以允许或禁止用户拖动标签调整工作表顺序。 可以通过 sheetTabColor 选项自定义工作表标签颜色。 通过设置 newTabVisible 选项,可以允许或禁止用户通过点击“+”按钮添加工作表(默认显示)。 你可以拖动标签区域宽度调整按钮来改变标签区域宽度,也可以通过 tabStripRatio 选项设置标签区域占水平滚动条的比例。 通过 tabStripPosition 选项可以更改标签条在工作簿中的位置,有以下四种: bottom:标签条在工作簿下方(默认) top:标签条在工作簿上方 left:标签条在工作簿左侧 right:标签条在工作簿右侧 当标签条在左侧或右侧时,用户可以通过鼠标滚动标签。 当标签条在左侧或右侧时,可以通过 tabStripWidth 设置标签条宽度,适合标签较长的情况,默认宽度为 80px。 用户可以通过 allSheetsListVisible 选项控制“≡”按钮是否可见: 当工作簿中有很多工作表标签时,可以在工作表列表中搜索以快速定位特定标签。
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; }