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。

hongshanshan · hongshanshan

第一个截图中，样式是怎么设置的？目前看到的只有设置颜色、宽度的属性

hongshanshan · hongshanshan

第一个截图中，是不是设置了高度？切换的时候样式切换，增加下划线之类的，是要自己写css，还是有api？

Lynn.Dou · Lynn.Dou

hongshanshan 发表于 2021-8-21 14:20
第一个截图中，是不是设置了高度？切换的时候样式切换，增加下划线之类的，是要自己写css，还是有api？

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

		自动登录	找回密码
密码			立即注册

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

3 个回复

浏览过的版块

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

圣诞拼拼乐