Script Lab 06:事件处理,Excel 基础操作(4)

简介: Script Lab 06:事件处理,Excel 基础操作(4)

准备工作

事件驱动编程,可以让操作变能更丰富,更改事件可能会使事情变得更容易处理。开发者可以靠着各种事件的的触发来设计可以自动执行的 Office 应用,比如可以在工作表中的选择时发生的事件,就是一个常见的应用场景。

如果曾经使用 VBA 的事件,会麻烦一些,而 VSTO 则要方便得多,通过重载运算符来操作。在 OfficeJS 中,事件操作介于两者之间,比 VSTO 要麻烦些,必须没有重载机制,但是比 VBA 又要简单些。我们先来看看传统的 Office 事件声明方式:

image.png

工作表事件

【VBA】

在工作表中的选择时发生的事件,也是事件驱动编程最常用到的一种。VBA 通常使用 Worksheet.SelectionChange 事件来检测工作表上的选择更改:

Private Sub Worksheet_SelectionChange(ByVal Target As Range) Debug.Print Target.AddressEnd Sub

【OfficeJS】

核心代码为:

sheet.onSelectionChanged.add(onSelectionChanged);

Excel.run ( async (context) => 
{ 
 //准备工作 const sheet = await
 OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, "MySheet"); 
 sheet.activate; OfficeHelpers.UI.notify("MySheet worksheet created !"); 
 await context.sync;
 //注册事件 var eventResult = sheet.onSelectionChanged.add(onSelectionChanged); 
 OfficeHelpers.UI.notify("MySheet worksheet SelectionChange event registed !") await context.sync;
 //事件函数 
 function onSelectionChanged(event)
 { 
 console.log(JSON.stringify(event)); 
 } 
} 
);


事件输出效果:

image.png

【小技巧】

Script Lab 编辑器不支持中文:

注释可以先写好,然后贴入代码。

notify 的提示目前中文均是乱码,无解。

image.png

【注销事件】

核心代码为:

eventResult.remove;

eventResult.remove;


后记

一个项目,有了事件驱动,才算能上真正的完整。加上前几节内容讲述了代码框架、Office JavaScript API 助手、Excel Api (数据操作),理论上您己经可以像 VBA 一样,创作出大部分的流程应用了。也希望将你的实践案例分享出来。

相关文章
|
9月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
数据采集 移动开发 前端开发
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下
836 0
|
前端开发 JavaScript 程序员
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
874 0
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
|
9月前
|
前端开发 JavaScript
【边做边学】利用React创建交互式ToDo列表
【边做边学】利用React创建交互式ToDo列表
|
编解码
vue3+element表格调用后台接口实现Excel导出功能以及导出乱码问题解决
vue3+element表格调用后台接口实现Excel导出功能以及导出乱码问题解决
906 0
|
JavaScript 前端开发 程序员
vue+element实现一个excel表格下载的功能
vue+element实现一个excel表格下载的功能
295 0
|
JavaScript
如何使用vue3导出excel表格
如何使用vue3导出excel表格
487 0
|
JavaScript 前端开发 API
Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
jira学习案例36-ccs-in-js创建自定义组件
jira学习案例36-ccs-in-js创建自定义组件
90 0
jira学习案例36-ccs-in-js创建自定义组件
|
数据可视化 JavaScript 开发工具
怎么使用 vue ui 可视化工具创建一个项目
怎么使用 vue ui 可视化工具创建一个项目
451 0
怎么使用 vue ui 可视化工具创建一个项目