SpreadJS V14 Update1 新特性 - 可实现Worksheet页签位置定制
本帖最后由 Lynn.Dou 于 2021-9-6 15:05 编辑在Excel中，Worksheet的页签位置默认在表格下方，横向滚动条左侧，这样的布局方式在桌面端的Excel中已经被广泛接受。但在Web端，由于用户对UI布局、设计的方式有着丰富的个性化需求，
SpreadJS V14 Update1 针对类似这样的需求，我们提供了更为灵活和强大的UI呈现方式，可以根据用户使用的整体UI框架的风格、样式做出灵活的定制。
详细情况如下如下所示：
底部位置(默认)顶部位置：The tab strip will occupy the entire line(100% width) at this time, so:此时页签栏将占据相当于表格宽度100%的整行区域，因此：
[*]调整尺寸的栅将被隐藏；
[*]同时，workbook.options.tabStripRatio 的值将被忽略。
左侧位置：与顶部位置类似，当表单页签栏出现在工作簿的左侧 / 右侧时，调整尺寸的栅将被隐藏，并且workbook.options.tabStripRatio的值将被忽略。右侧位置：页签栏不会与纵向滚动条合并。页签栏宽度：默认情况下，当sheet的名称长度超出了sheet标签的宽度时，sheet名称将被截断，结尾用... 标志。当然我们也提供了对应的配置项，可以设置页签的宽度，以显示出完整的sheet名称。代码如下：spread.options.tabStripWidth = 116;
触摸每个位置的页签都支持触摸响应.主题支持2007主题，以及其它的Spread主题.设计器支持：
API：Enum:///* enum GC.Spread.Sheets.TabStripPosition
/**
* Specifies the position of the tab strip relative to the workbook.
* @enum {number}
*/
export enum TabStripPosition {
/**
* Specifies the position of the tab strip relative to the bottom of the workbook.
*/
bottom = 0,
/**
* Specifies the position of the tab strip relative to the top of the workbook.
*/
top = 1,
/**
* Specifies the position of the tab strip relative to the left of the workbook.
*/
left = 2,
/**
* Specifies the position of the tab strip relative to the right of the workbook.
*/
right = 3
}
Workbook option
interface GC.Spread.Sheets.IWorkBookDefaultOptions {
// ...
tabStripPosition: enum GC.Spread.Sheets.TabStripPosition; // The position of tab strip. The default is bottom.
// ...
}
// Sample
// Change tab strip position when creating workbook
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripPosition: GC.Spread.Sheets.TabStripPosition.top});
// Or change tab strip position by workbook options
spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.top;
Tab strip width
interface GC.Spread.Sheets.IWorkBookDefaultOptions {
// ...
tabStripWidth: number; // The width of the tab strip when it is at the left or right position. The default and mimimum is 80.
// ...
}
// Sample
// Change tab strip width when creating workbook
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripWidth: 200});
// Or change tab strip width by workbook options
spread.options.tabStripWidth = 200;
策略：
1. 当页签栏没有在工作簿底部时，将隐藏调整大小栏和更多按钮。
2. 当页签栏不在工作簿的底部时，标签条将与水平滚动条分离。
3. 编辑工作表名称时，无法通过鼠标滚轮滚动选项卡。
4. 当页签栏不在工作簿的底部时，将忽略Spread选项TabStripradio。
5. 当页签栏不在工作簿的左侧或右侧时，将忽略Spread选项TabStripWidth。
6. Spread.options选项tabStripPosition的默认值为TabStripPosition.bottom。
7. Spread.options.tabStripWidth的默认值和最小值为80。如果设置值小于最小值，则设置值将升级为80。
第一个截图中，样式是怎么设置的？目前看到的只有设置颜色、宽度的属性 第一个截图中，是不是设置了高度？切换的时候样式切换，增加下划线之类的，是要自己写css，还是有api？ hongshanshan 发表于 2021-8-21 14:20
第一个截图中，是不是设置了高度？切换的时候样式切换，增加下划线之类的，是要自己写css，还是有api？
您好，此版块不属于问题监控区，在此提问容易漏贴，请在求助中心发帖咨询。
如涉及本贴内容，可以在贴中描述清楚。
页:
[1]