Script Lab 07:引入控件,Excel 基础操作(5)

简介: Script Lab 07:引入控件,Excel 基础操作(5)

准备工作

本教程己经到了 Excel 示例的收尾阶段,掌握前期的内容,基本上可以完成一个 Excel Web add-in 插件了,但如果能够引入一些常用的控件库,能达到事半功倍的效果。这次我们将介绍一个可能会常用的控件库,颜色选择器,用于非常开发的功能。

使用颜色选择器突出显示单元格,可以采用一些现成的库,比如颜色选择器,使用Spectrum库(
http://bgrins.github.io/spectrum/
)来呈现颜色,用于选择单元格颜色。需要在 Libraries 中加入以下引用:

spectrum-colorpicker@1.8.0/spectrum.jsspectrum-colorpicker@1.8.0/spectrum.css

image.png


效果如下:

image.png

代码

【取色】

核心代码为:

$("#colorpicker").spectrum("get").toHexString;

$("#colorpicker").spectrum
(
 { 
 color: "#f00"
 }
);
$("#run").click(run);
async function run 
{ 
 try 
 { 
 await Excel.run(async (context) => { 
 const range = context.workbook.getSelectedRange; 
 range.format.fill.color = $("#colorpicker") .spectrum("get") .toHexString;
 range.load("address"); 
 await context.sync; 
 console.log(`The range address was "${range.address}".`);
 }); 
 }
 catch (error) 
 { 
 OfficeHelpers.UI.notify(error); 
 OfficeHelpers.Utilities.log(error); 
 }
}

image.png

相关文章
|
数据采集 移动开发 前端开发
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下
790 0
|
前端开发 JavaScript 程序员
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
829 0
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
|
数据库
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
641 0
jira学习案例36-ccs-in-js创建自定义组件
jira学习案例36-ccs-in-js创建自定义组件
68 0
jira学习案例36-ccs-in-js创建自定义组件
如何用sketch做交互并导出成html
如何用sketch做交互并导出成html
2188 2
如何用sketch做交互并导出成html
|
SQL 开发框架 安全
Go Web编程实战(10)----模板引擎库text/template包的使用
Go Web编程实战(10)----模板引擎库text/template包的使用
321 0
Go Web编程实战(10)----模板引擎库text/template包的使用
|
数据可视化 Go 索引
Go Web 编程入门:创建动态 HTML 和文本文件
之前的文章学过把模板和视图分离,建立一个 Web 服务器来展现 HTML 模板。我们将学习如何使用 Go 的模板包创建动态 HTML 和文本文件。
|
存储 移动开发 前端开发
Qt开发技术:Qt富文本(三)Qt支持的HTML子集(查询手册)以及涉及的类
Qt开发技术:Qt富文本(三)Qt支持的HTML子集(查询手册)以及涉及的类
Qt开发技术:Qt富文本(三)Qt支持的HTML子集(查询手册)以及涉及的类
Script Lab 07:引入控件,Excel 基础操作(5)
Script Lab 07:引入控件,Excel 基础操作(5)
239 0
Script Lab 07:引入控件,Excel 基础操作(5)
|
JavaScript 前端开发 API
Script Lab 06:事件处理,Excel 基础操作(4)
Script Lab 06:事件处理,Excel 基础操作(4)
177 0
Script Lab 06:事件处理,Excel 基础操作(4)