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 程序员
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
850 0
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
|
4月前
|
JavaScript
js 【实用技巧】给全文代码添加一键复制按钮
js 【实用技巧】给全文代码添加一键复制按钮
63 1
|
JavaScript 前端开发
vue中使用docx-preview插件预览word文档(后端express)
vue中使用docx-preview插件预览word文档(后端express)
1161 0
|
前端开发
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
VSCode使less文件实时转换成css代码【扩展插件(Easy LESS)】
Script Lab 07:引入控件,Excel 基础操作(5)
Script Lab 07:引入控件,Excel 基础操作(5)
247 0
Script Lab 07:引入控件,Excel 基础操作(5)
|
JavaScript 前端开发 API
Script Lab 06:事件处理,Excel 基础操作(4)
Script Lab 06:事件处理,Excel 基础操作(4)
185 0
Script Lab 06:事件处理,Excel 基础操作(4)
|
前端开发 UED
尝试:Script Lab,Excel 基础操作(1)
尝试:Script Lab,Excel 基础操作(1)
650 0
尝试:Script Lab,Excel 基础操作(1)
|
JavaScript 前端开发 API
Script Lab 09:异步调用函数,PowerPoint基础操作
Script Lab 09:异步调用函数,PowerPoint基础操作
174 0
Script Lab 09:异步调用函数,PowerPoint基础操作
|
算法 JavaScript C#
Script Lab 版,九九乘法表,Excel 基础操作(2)
Script Lab 版,九九乘法表,Excel 基础操作(2)
218 0
Script Lab 版,九九乘法表,Excel 基础操作(2)
|
JavaScript 前端开发 算法
Script Lab 04:Script Lab,九九乘法表,Excel 基础操作(2)
Script Lab 04:Script Lab,九九乘法表,Excel 基础操作(2)
249 0
Script Lab 04:Script Lab,九九乘法表,Excel 基础操作(2)