SpreadJS V14 Update1 新特性 - 可实现Worksheet页签位置定制

在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名称。代码如下：

1. spread.options.tabStripWidth = 116;
   

复制代码

触摸

每个位置的页签都支持触摸响应.

主题

支持2007主题，以及其它的Spread主题.

设计器支持：

API：

Enum:

1. ///* enum GC.Spread.Sheets.TabStripPosition
   
2. /**
   
3. * Specifies the position of the tab strip relative to the workbook.
   
4. * @enum {number}
   
5. */
   
6. export enum TabStripPosition {
   
7.     /**
   
8.      * Specifies the position of the tab strip relative to the bottom of the workbook.
   
9.      */
   
10.     bottom = 0,
    
11.     /**
    
12.      * Specifies the position of the tab strip relative to the top of the workbook.
    
13.      */
    
14.     top = 1,
    
15.     /**
    
16.      * Specifies the position of the tab strip relative to the left of the workbook.
    
17.      */
    
18.     left = 2,
    
19.     /**
    
20.      * Specifies the position of the tab strip relative to the right of the workbook.
    
21.      */
    
22.     right = 3
    
23. }

复制代码

Workbook option

1. interface GC.Spread.Sheets.IWorkBookDefaultOptions {
   
2.     // ...
   
3.     tabStripPosition: enum GC.Spread.Sheets.TabStripPosition; // The position of tab strip. The default is bottom.
   
4.     // ...
   
5. }
   
6. 
   
7. // Sample
   
8. // Change tab strip position when creating workbook
   
9. var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripPosition: GC.Spread.Sheets.TabStripPosition.top});
   
10. // Or change tab strip position by workbook options
    
11. spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.top;
    

复制代码

Tab strip width

1. interface GC.Spread.Sheets.IWorkBookDefaultOptions {
   
2.     // ...
   
3.     tabStripWidth: number; // The width of the tab strip when it is at the left or right position. The default and mimimum is 80.
   
4.     // ...
   
5. }
   
6. 
   
7. // Sample
   
8. // Change tab strip width when creating workbook
   
9. var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripWidth: 200});
   
10. // Or change tab strip width by workbook options
    
11. 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？

您好，此版块不属于问题监控区，在此提问容易漏贴，请在求助中心发帖咨询。
如涉及本贴内容，可以在贴中描述清楚。