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

相关文章
Script Lab 07:引入控件,Excel 基础操作(5)
Script Lab 07:引入控件,Excel 基础操作(5)
259 0
Script Lab 07:引入控件,Excel 基础操作(5)
|
JavaScript 前端开发 API
Script Lab 06:事件处理,Excel 基础操作(4)
Script Lab 06:事件处理,Excel 基础操作(4)
203 0
Script Lab 06:事件处理,Excel 基础操作(4)
|
前端开发 UED
尝试:Script Lab,Excel 基础操作(1)
尝试:Script Lab,Excel 基础操作(1)
667 0
尝试:Script Lab,Excel 基础操作(1)
|
前端开发 JavaScript 程序员
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
874 0
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
|
JSON JavaScript 小程序
开源Vue表格组件,表格插件源码
开源Vue表格组件,表格插件源码
226 0
开源Vue表格组件,表格插件源码
|
9月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
前端开发
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
|
Web App开发 JavaScript 前端开发
js 创建书签小工具之理论
我们一直在寻找增加浏览体验的方法,有的方法众所周知,有的则鲜为人知。我原本认为书签小工具属于后者,非常令人讨厌的东西。令我非常懊恼的是我发现在这个问题上我完全是错误的。它并不是令人厌烦的,而是以用户为中心的,能实现很多出色的功能,而且就像人们所预期的一样,它成为了我与浏览者以及网络交互的核心部分。
1021 0
|
算法 JavaScript C#
Script Lab 版,九九乘法表,Excel 基础操作(2)
Script Lab 版,九九乘法表,Excel 基础操作(2)
229 0
Script Lab 版,九九乘法表,Excel 基础操作(2)
|
JavaScript 前端开发 算法
Script Lab 04:Script Lab,九九乘法表,Excel 基础操作(2)
Script Lab 04:Script Lab,九九乘法表,Excel 基础操作(2)
266 0
Script Lab 04:Script Lab,九九乘法表,Excel 基础操作(2)

热门文章

最新文章