表单名称标签

SpreadJS 表单名称标签与 Excel 类似。你可以点击标签导航按钮来移动表单标签, 点击表单标签来切换活动表单, 拖拽表单标签来重新排列表单集合, 以及拖拽表单标签区域宽度改变按钮来改变表单标签区域的宽度。你也可以通过 API 定制表单标签。

  • 最左侧的标签导航箭头: 如果工作表中的工作表数量超出标签条的容纳范围,则会启用箭头,用户可以使用它们在列表中显示其他工作表标签。
  • 工作表标签: 用户可以双击标签来重命名工作表,也可以拖放标签来重新排序工作表。
  • “⊕”按钮: 在工作簿中添加一个新的工作表。
  • 标签分离器: 当标签栏位于工作簿的底部时,用于在标签栏和水平滚动条之间分离器。
你可以通过设置 tabStripVisible来控制是否显示表单标签。 将tabNavigationVisible设置为false可以隐藏导航箭头按钮(默认是显示的)。 可以通过设置tabEditable选项来允许或者阻止用户重命名表单名。 可以通过设置allowSheetReorder选项来允许或者阻止用户拖拽以调整表单顺序。 你可以设置 sheetTabColor 选项来定制表单标签的颜色。 你可以设置 newTabVisible 选项来允许或者阻止用户通过点击“+”按钮(默认是显示)添加工作表。 你可以拖拽表单标签区域宽度改变按钮来改变表单标签区域的宽度。你也可以通过 tabStripRatio 选项获取或设置以整个水平滚动条宽度比率。 通过tabStripPosition选项来改变表单标签相对于工作簿的位置。有以下四种位置: bottom: 表单标签在工作簿下面(默认值)。 top: 表单标签在工作簿上面。 left: 表单标签在工作簿左面。 right: 表单标签在工作簿右面。 当表单标签在工作簿左边或者右边时,用户可以通过鼠标滚动表单标签。 当表单标签在工作簿左边或者右边时,用户可以使用tabStripWidth来自定表单标签宽度。这对长的表单名很有帮助。默认宽度是80px。
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss')); spread.setSheetCount(2); 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('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/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$/spread/source/data/data.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="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>Use these options to change the appearance and behavior of the tab strip.</label> </div> <div class="option-row"> <input type="checkbox" id="newtab_show" checked /> <label for="newtab_show">ShowNewTab</label> </div> <div class="option-row"> <input type="checkbox" id="tab_editable" checked /> <label for="tab_editable">TabEditable</label> </div> <div class="option-row"> <input type="checkbox" id="tabstrip_visible" checked /> <label for="tabstrip_visible">TabStripVisible</label> </div> <div class="option-row"> <input type="checkbox" id="tabnavigation_Visible" checked /> <label for="tabnavigation_Visible">TabNavigationVisible</label> </div> <div class="option-row"> <select id="tabstrip_position"> <option value="0">bottom</option> <option value="1">top</option> <option value="2">left</option> <option value="3">right</option> </select> <label for="tabstrip_position">tabStripPosition</label> </div> <hr> <label for="sheetTabColor" class="sizedLabel" style="padding-top: 20px">ActiveSheetTabColor:</label> <div class="option-row"> <input type="text" id="sheetTabColor" value="red" /> <input type="button" id="setSheetTabColor" value="Set" /> </div> <label >This changes the color for the tab of the active sheet.</label> <br /> <label for="startSheetIndex" class="sizedLabel" style="padding-top: 20px">startSheetIndex:</label> <div class="option-row"> <input type="text" id="startSheetIndex" value="0" /> <input type="button" id="setStartSheetIndex" value="Set" /> </div> <label >This navigates the sheet tab to the tab at the index specified (starting at 0).</label> <br> <label for="tabstrip_ratio" class="sizedLabel" style="padding-top: 20px">TabStripRatio:</label> <div class="option-row"> <input type="text" id="tabstrip_ratio" value="0.5" /> <input type="button" value="Set" id="setTabStripRatio" /> </div> <label >This specifies the width ratio of the TabStrip to the width of the Spread instance (between 0 and 1).</label> <br> <label for="tabstrip_width" class="sizedLabel" style="padding-top: 20px">tabStripWidth:</label> <div class="option-row"> <input type="text" id="tabstrip_width" value="80" /> <input type="button" value="Set" id="setTabStripWidth" /> </div> <label >This specifies the width of the TabStrip when it is at the left and right of workbook. The minimum is 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; }