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

准备工作

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

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


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

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

    效果如下:

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

    代码

    【取色】

    核心代码为:

    $("#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);
      }
    }

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

    上一篇:树(二叉树、红黑树及左旋右旋等调整操作)


    下一篇:Kinect+unity 实现体感格斗闯关小游戏