表格编辑器相关

1. 单行工具栏

传统的 Ribbon 工具栏已经伴随着 SpreadJS 走过了 4 年的时间,如今也是时候做一些不同的尝试了。

随着在线文档的普及,大家对表格在线编辑的需求也日趋旺盛,更节省空间和更智能的单行工具栏已成为在线表格系统的标配,为了顺应这一潮流,SpreadJS 的编辑器组件正式推出了全新的工具栏样式:单行工具栏模式。


(SpreadJS 单行工具栏效果展示)

注意:传统的 Ribbon 工具栏仍然保留,用户可以通过代码在两种编辑器工具栏布局之间进行切换。

2. 定位功能(GoTo)

与 Excel 软件中的定位功能类似,SpreadJS 新版本中的编辑器也支持该功能,效果如下图所示:

3. 替换和全部替换

除了已经支持的“查找”功能外,本次更新,SpreadJS 编辑器还追加了替换和全部替换功能,用户可以从“开始”→“查找”→“替换”下的“主页”选项卡打开此功能选项,效果如下图所示:

4. 格式刷

用户可以在 SpreadJS 的表格编辑器组件中添加和使用 “格式刷”按钮,该按钮与 Excel 的体验完全一致,格式刷效果如下方动图所示:

5. 自动分组(Auto outline)

使用 SpreadJS 的自动分组功能,可以用来创建组和大纲,效果如下所示:

6. 移动和复制工作表

如 Excel 一样,用户在 SpreadJS 编辑器中右键单击工作表选项卡时,将出现“移动或复制工作表”选项:

7. 迷你图工具栏样式

SpreadJS 在该版本中重新设计了插入迷你图的布局样式,如下是新旧版本迷你图工具栏样式对比。

SpreadJS V14.0 Update1 版本:

SpreadJS V14.0 Update2 版本:

8. 工具栏响应式布局

在不同的浏览器窗口大小内,SpreadJS 的工具栏会响应式的更新布局,在不同分辨率的窗口效果如下所示:

# 1920x1080

# 1440x900

# 800x600

9. 形状选择面板

利用 SpreadJS 全新的形状选择面板,用户可以轻松选择工作表中的形状,并可选择是隐藏它们还是显示它们,效果如下所示:

工作簿(Workbook)相关

1. Excel 相关快捷键支持

SpreadJS 支持了多种与 Excel 相同的键盘快捷键,包括 Alt 组合和功能键,例如 Shift + Space 选择一行,或 Ctrl + Home 移动到工作表的开头等。

  • Shift+Space: 用于选择整行,用户可以选中一个或多个选区,之后同时按下Shift和Space,该操作不支持撤销。
  • Ctrl+Space: 选择整列,用户可以选择一个或多个区域,之后同时按下Ctrl和Space,该操作会受系统类型影响,中文环境下,该快捷键会是切换输入法,建议大家改写该快捷键,如何改写在之后会讲到,该操作不支持撤销。
  • Ctrl+'-': 删除一行或一列,用户需要选中某行或某列,该操作支持撤销。
  • Ctrl+End:跳转到当前sheet有内容的右下方单元格,内容不限于值,样式,该操作不支持撤销。
  • Ctrl+Home:跳转到当前sheet页A1单元格,不支持撤销。
  • Ctrl+9:隐藏选中行,支持撤销。
  • Ctrl+'[': 选择当前单元格引用的单元格。
  • Ctrl+']': 选择当前单元格影响的单元格。
  • Ctrl+';':给当前活动单元格设置日期,支持撤销。
  • Alt+'=': 给当前单元格添加sum函数,支持撤销。
  • Alt+Shift+Right Arrow:选中整行或整列,按下Alt+Shift+Right Arrow,会将选中行或列进行分组,如果选中的不是整行或整列,该操作将无效,支持撤销。
  • Alt+Shift+Left Arrow:选中已经分组的整行或整列,撤销分组,支持撤销。
  • Alt+';':只选择可见单元格;
  • Ctrl+D:将选中区域第一行复制到区域下方单元格中,支持撤销。
  • Ctrl+R: 将选中区域第一列复制到区域右侧单元格中,支持撤销。
  • Ctrl+Shift+'+': 插入行或列,选中整行或整列后,同时按下Ctrl、Shift和+,支持撤销;
  • Ctrl+A: 全选整个sheet,不支持撤销。
  • Ctrl+B: 当前选中单元格字体变粗,支持撤销。
  • Ctrl+I: 当前选中单元格字体变为斜体,支持撤销。
  • Ctrl+U:当前选中单元格添加下划线,支持撤销。
  • Ctrl+Shift+'%': 当前选中单元格值变为百分比形式,支持撤销。

具体使用方法见技术博客: SpreadJS V14.2.0新特性解析 - 快捷键增强

2. 增量加载中显示表单名称

使用 SpreadJS 的增量加载功能,可以逐页加载工作簿。 在当前版本中,正在加载的当前工作表的名称将显示在状态栏中,为您的用户提供有关加载状态的详细信息。

3. 新增API:克隆工作表

在当前版本中,用户可以通过调用 SpreadJS 的 API 快速克隆一个已有的 Worksheet,这个应用接口降为模板设计提供极大的方便。


///* field GC.Spread.Sheets.Commands.copySheet: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, targetIndex: number, newName: string, includeBindingSource?: boolean}): void}
/**
 * Represents the command used to copy sheet.
 * @param context The context of the operation.
 * @param options The options of the operation.
 * The arguments of the execute method are as follows.
 * context {GC.Spread.Sheets.Workbook} The context of the operation.
 * options {Object} The options of the operation.
 * options.sheetName {string} The clone sheet name.
 * options.targetIndex {number} The target index.
 * options.newName {number} The new sheet name.
 * options.includeBindingSource {boolean} Whether to bind data source to clone sheet
 * @example
 * //This example clones a sheet.
 * spread.commandManager().execute({cmd: "copySheet", sheetName: "Sheet1", targetIndex: 3, newName: "Sheet1 (2)", includeBindingSource: true});
 */
Commands[COPY_SHEET] = {
    canUndo: false,
    execute: function (context: IWorkbook, options: IWorkSheetOption): boolean {
    }
};
    

4. 获取“状态栏”对象

在 SpreadJS 新版本中,用户可以通过API获取状态栏对象,以便更好的进行定制开发。


// Creating the status bar
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);
 
// Get the status bar if already created
var statusBar = GC.Spread.Sheets.StatusBar.findControl('statusBar');   
    

5. 更新后的构造器语法

在之前版本中,用户需要使用“document.getElementById”来获取 SpreadJS 实例的宿主 DIV 元素,类似于以下内容:

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

在当前版本中,仅需如下代码即可获取:

var spread = new GC.Spread.Sheets.Workbook("ss");

6. 改变Worksheet index


/**
* Change sheet index and reorder sheets.
* @param {string} sheetName The sheet name.
* @param {number} targetIndex The target index.
* @example
* //This example show how to change sheet index.
* var spread = GC.Spread.Sheets.findControl(ss);
* spread.changeSheetIndex("Sheet1", 2);
*/
changeSheetIndex(sheetName: string, targetIndex: number): void {}
    

使用此 API,您可以(例如)使用以下方法将第一个工作表移动到工作簿中的最后一个位置:

spread.changeSheetIndex("sheet1", 2);

7. 框架支持

SpreadJS 当前已经支持 Vue 3 和 Angular 12 等前端开发框架,除此之外,还通过了 iOS 14 的兼容性测试。

历史版本

查看更多关于 SpreadJS 纯前端表格控件的历史版本。