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篇文章来复盘, 主要解决场景如下
752 0
|
前端开发 JavaScript 程序员
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
804 0
Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
|
18天前
|
前端开发 JavaScript 数据可视化
详尽分享表格的编辑插件editable.js
详尽分享表格的编辑插件editable.js
23 0
|
2月前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
19 0
|
2月前
|
JavaScript 前端开发 容器
js---Echarts水球图的简单使用方法(ecarts官方插件)
js---Echarts水球图的简单使用方法(ecarts官方插件)
98 0
jira学习案例36-ccs-in-js创建自定义组件
jira学习案例36-ccs-in-js创建自定义组件
58 0
jira学习案例36-ccs-in-js创建自定义组件
如何用sketch做交互并导出成html
如何用sketch做交互并导出成html
2068 2
如何用sketch做交互并导出成html
Script Lab 07:引入控件,Excel 基础操作(5)
Script Lab 07:引入控件,Excel 基础操作(5)
218 0
Script Lab 07:引入控件,Excel 基础操作(5)
|
JavaScript 前端开发 API
Script Lab 06:事件处理,Excel 基础操作(4)
Script Lab 06:事件处理,Excel 基础操作(4)
164 0
Script Lab 06:事件处理,Excel 基础操作(4)
|
前端开发 UED
尝试:Script Lab,Excel 基础操作(1)
尝试:Script Lab,Excel 基础操作(1)
615 0
尝试:Script Lab,Excel 基础操作(1)