作为葡萄城旗下备受青睐的 JavaScript 电子表格控件，SpreadJS 始终以"类 Excel 体验、低代码开发、企业级性能"为核心，赋能开发者快速构建贴合业务场景的表格应用。

近日，SpreadJS 迎来 V18.2 版本更新，聚焦实时协作、视觉定制、操作效率三大维度，推出 beta 版协同插件、多主题设计器、LAMBDA 数据转换等十余项核心特性，同时全面适配现代前端框架。本文将带您深度拆解这些新功能，看看它们如何解决团队协作、界面定制与开发效率的痛点。

一、实时协作新纪元：协同插件（Beta）正式登场

在多人协作场景中，"版本混乱、同步延迟、冲突难解决"是长期困扰团队的难题。

SpreadJS V18.2 引入协同插件 （SpreadJS Sheets Collaboration Add-on），基于自研协作框架打造，为电子表格带来媲美 Office Excel for Web 的实时编辑体验，目前处于 beta 阶段，将根据用户反馈持续优化。

1. 模块化架构：灵活扩展，适配多场景

协同插件的核心是"协同框架 + 表格协同插件"的双层架构，兼顾通用性与表格场景的专业性：

• 底层：协同框架（Collaboration Framework）
  支持表格、富文本、代码编辑器等多文档类型协作，包含三大核心模块：
• js-collaboration：处理实时双向数据交换与消息广播，确保用户操作即时同步
• js-collaboration-ot：基于操作转换（OT） 算法解决并发冲突，集成数据库适配器，避免多用户编辑同一单元格时的数据混乱
• js-collaboration-presence：提供用户存在感感知，实时显示活跃用户的光标、选区，让协作状态可视化

• 上层：表格协同插件（Sheets Collaboration Add-on）
  针对表格场景优化，提供即插即用的能力，包含两个核心包：
• spread-sheets-collaboration：定义表格专属 OT 类型，处理单元格编辑、行列增减等场景的冲突转换
• spread-sheets-collaboration-addon：将本地修改转换为"操作集（Ops）"并分组为"变更集（ChangeSet）"，通过服务器同步至所有客户端

2. 核心能力：覆盖协作全流程需求

协同插件从"编辑、感知、权限、追溯"四个维度，构建完整的协作体验：

（1）实时编辑与冲突自动处理

多用户可同时编辑同一工作簿，系统通过 OT 算法自动合并操作。例如：当用户 A 修改 B2 单元格为"100"，用户 B 同时修改 B2 为"200"时，插件会根据操作顺序智能合并，避免数据覆盖，且双方视图实时更新。

（2）用户存在感可视化

通过不同颜色的光标和选区，清晰标记当前活跃用户，结合"正在编辑"的状态提示，让团队成员明确他人操作焦点，减少无效沟通。

（3）精细化权限管控

支持"查看模式"与"编辑模式"切换：

• 查看模式：只读权限，允许本地排序、调整列宽等 UI 交互，但修改不会同步
• 编辑模式：完整编辑权限，操作实时同步至所有用户

（4）协同撤销/重做与 ChangeSet 管理

• 撤销栈以 Ops 形式存储，仅影响用户自身操作，不干扰他人；
• ChangeSet（变更集）作为逻辑修改单元，支持原子性应用、冲突解决与历史追溯，结合 API 可实现操作溯源与版本回滚（如 applyChangeSet 应用变更、onChangeSet 监听变更）。

3. 应用价值：从团队效率到企业合规

• 提升协作效率：分布式团队可实时共同编辑项目计划、财务报表，消除"邮件传文件、版本号混乱"的问题，任务完成周期缩短 30%+；
• 适配企业场景：支持多人评审、审计追溯（符合金融、政务等行业合规要求），权限管控确保敏感数据安全；
• 降低开发成本：开发者无需从零构建协同逻辑，通过插件 API 快速集成，专注业务场景而非底层同步机制。

二、视觉与定制升级：设计器主题更灵活

为适配不同使用场景与品牌风格，SpreadJS V18.2 对设计器主题进行全面增强，提供"预设+自定义"双体系，满足从基础使用到深度品牌化的需求。

1. 三大预设主题：覆盖主流使用场景

设计器内置 3 种主题，可根据环境与用户习惯快速切换：

2. 三种自定义方法：精准匹配品牌形象

基于 Light/Dark 主题扩展，支持通过 API、CSS、JavaScript 调整视觉属性（背景色、圆角、阴影等），实现"表格界面与产品品牌一体化"。

（1）API 动态定制（推荐）

通过 setTheme() 方法实时修改主题，未定义属性保持默认，示例代码：

// 自定义主题：浅蓝背景、深灰文本、6px 圆角
GC.Spread.Sheets.Designer.setTheme({
  colorBackground: "#F0F4F8",
  colorForeground: "#2D3436",
  borderRadiusM: "6px",
  shadow8: "rgba(142, 148, 156, 0.1) 0px 2px 4px, rgba(142, 148, 156, 0.06) 0px 1px 2px"
});

// 重置为预设主题
Designer.setTheme(null);

// 获取当前主题配置
let currentTheme = GC.Spread.Sheets.Designer.getTheme();
console.log(currentTheme.colorBackground); // 输出 "#F0F4F8"

（2）CSS 静态覆盖

在全局 CSS 中定义主题变量，适合无需动态切换的场景：

:root {
  --sjs-color-background: #F0F4F8;
  --sjs-color-foreground: #2D3436;
  --sjs-border-radius-m: 6px;
  --js-shadow-8: rgba(142, 148, 156, 0.1) 0px 2px 4px, rgba(142, 148, 156, 0.06) 0px 1px 2px;
}

（3）JavaScript 动态更新

通过操作 DOM 切换主题，支持用户自主选择风格：、

// 动态设置主题属性
document.documentElement.style.setProperty(
  GC.Spread.Sheets.Designer.ThemeTokens.colorBackground, 
  '#F0F4F8'
);
document.documentElement.style.setProperty(
  GC.Spread.Sheets.Designer.ThemeTokens.colorForeground, 
  '#2D3436'
);

三、效率倍增：设计器功能深度优化

SpreadJS V18.2 围绕"数据处理、操作便捷性"优化设计器功能，让复杂任务一步完成，减少重复操作。

1. LAMBDA 公式：一键转换单元格区域

借助"转换单元格（Transform）"功能，可将单参数 LAMBDA 公式直接应用于选中区域，支持按"单元格、行、列、整个区域"设置作用域，转换后源区域清空，样式保持不变，仅更新值。

示例 1：按列汇总销售数据

• 源区域：产品 A/B/C 三个月销量（B2:D4）；
• 公式：=LAMBDA(x, SUM(x))（对 x 区域求和）；
• 作用域：按列（By Column）；
• 效果：一键计算出每个产品的总销量，无需手动输入多次 SUM 公式。

示例 2：拆分订单详情文本

• 源区域：包含"产品,数量;产品,数量"格式的订单详情（如"苹果,5个;香蕉,10个"）；
• 公式：=LAMBDA(x, TEXTSPLIT(x, ";", ","))（按分号和逗号拆分文本）；
• 作用域：按单元格（By Cell）；
• 效果：自动拆分出"产品"和"数量"两列，无需手动分列。

2. 名称管理器：排序筛选，快速定位

在包含大量自定义名称的工作簿中（如财务模板），V18.2 为名称管理器新增排序（升序/降序） 与筛选功能，支持按"名称、引用位置、范围"筛选，快速找到目标名称，避免滚动查找的繁琐。

3. 字体选择器：直接编辑，无需跳转

此前修改字体需在下拉框中选择，V18.2 支持在字体选择器组件内直接输入字体名称（如"微软雅黑"），系统实时匹配结果，提升操作效率。

4. 表格与 DataTable：双向无缝转换

支持普通表格（Regular Tables）与数据表（Data Tables）的双向转换，两种实现方式满足不同需求：

• API 驱动：通过 convertToDataTable（普通转数据）、convertFromDataTable（数据转普通）实现程序化控制；
• UI 操作：在设计器中右键表格，直接选择"转换为数据表"或"转换为规则表"。

该功能解决了"前端编辑表格、后端绑定数据"的衔接问题，数据更新更灵活。

四、交互更流畅：UI&UX 体验全面提升

从细节优化出发，SpreadJS V18.2 解决了用户日常操作中的"小痛点"，让交互更符合直觉。

1. 数据验证下拉搜索：长列表"秒定位"

当数据验证下拉列表包含数百个选项时（如员工姓名、产品型号），传统滚动查找易出错。V18.2 新增搜索框，输入关键词实时过滤匹配选项，快速锁定目标值。

2. 工作表列表搜索：多标签"快找表"

对于包含几十上百个工作表的工作簿（如多部门报表、项目多模块表格），在工作表标签栏新增搜索入口，输入工作表名称关键词即可即时定位，告别"翻页找表"。

3. 复选框：单点击"秒切换"

此前操作复选框需多步点击，现在只需单次点击单元格内的复选框，即可切换"选中/未选中"状态，与 Excel 操作逻辑一致，适合数据标记、任务勾选等场景。

4. 批注填充色：视觉定制更灵活

支持自定义批注背景色，可根据数据重要性设置颜色（如浅黄色标注提醒、浅蓝色标注说明），提升批注辨识度，同时对齐 Excel 操作习惯，降低用户切换成本。

5. 形状文本方向：多语言排版适配

为"形状"组件新增垂直文本 和从右到左（RTL） 方向支持，满足中文竖排标题、阿拉伯语/希伯来语等 RTL 语言的排版需求，拓宽多语言项目应用场景。

五、数据可视化升级：新增漏斗图与树状图

SpreadJS V18.2 新增两种高频图表类型，助力更直观的数据分析与展示。

1. 漏斗图：追踪流程转化效率

以"顶部宽、底部窄"的漏斗形态，展示各阶段数据递减趋势，核心应用场景：

• 销售漏斗：潜在客户→意向客户→报价客户→成交客户，定位流失率高的环节；
• 访客转化：首页访问→产品页浏览→加入购物车→支付，优化转化链路；
• 招聘流程：简历投递→初筛→面试→录用，评估招聘效率。

支持多维度自定义（代码/设计器可视化操作）：

• 基础样式：漏斗类型（标准/金字塔）、调色板、透明度；
• 结构参数：顶部宽度、底部宽度、颈部高度；
• 布局方向：横向/纵向、是否反转。

2. 树状图：展示层级数据占比

以嵌套矩形展示层级结构数据，矩形大小与数值成比例，便于比较不同类别占比。例如：按"地区→产品类别→单品"展示销量，直观看出哪个地区的哪类产品贡献最大。

支持自定义调色板、边框样式、提示框（tooltip）等，可通过代码或设计器"检查器"配置。

六、生态兼容：适配现代开发框架

为跟上前端技术发展，SpreadJS V18.2 全面适配主流框架，确保开发流畅性：

• 支持 Next.js 15：兼容服务器端渲染，与现代 React 应用无缝集成；
• 支持 React 19：适配新 Hook 与并发渲染改进，提升 React 项目性能；
• 数据透视表全列数据源：可直接使用整列（如 Sheet1!C:D）作为数据源，简化数据引用；
• 报表插件优化：模板设计时可暂时显示隐藏的行/列，便于编辑与验证。

总结：SpreadJS V18.2 赋能"协作+效率+体验"

SpreadJS V18.2 并非简单的功能堆砌，而是围绕"用户实际需求"的精准升级：

• 对团队：协同插件打破时空限制，实时协作提升效率；
• 对开发者：主题定制、框架适配、API 简化降低开发成本；
• 对终端用户：LAMBDA 转换、交互优化让操作更流畅。

目前，SpreadJS V18.2 已正式发布，协同插件（beta）可通过葡萄城官网下载试用。如果您在使用中遇到问题或有功能建议，欢迎通过官方技术社区反馈，我们将持续迭代优化，打造更贴合企业需求的电子表格控件。

立即前往 葡萄城官网 下载 SpreadJS V18.2，体验全新特性！