关于前端:前端干货别再羡慕别人的Excel啦教你点击按钮直接打开侧边栏

负责技术支持的葡萄又来啦。

三日不见，咱们的客户又为咱们发来新的问题。

这次咱们须要实现的场景是在前端表格环境中，像模板按钮那样，点击之后弹出一个侧边栏，而后通过点击不同的单元格显示不同的内容。

挤接下来咱们就带大家一起来看看，如何在前端电子表格中实现这样的性能。

首先，惯例地咱们先惯例地在编辑器的 ribbon 上插入一个按钮。

按钮插入结束后，咱们来创立一个侧边栏模板。这个侧边栏模板其实是一个 template 对象，大家能够通过 getTemplate 去取一些常见的模板，察看它的构造。

比拟罕用的元素有：templateName 和 content。其中 content 是一个数组，外面能够蕴含不同原子类型的对象，。对于原子类型前面咱们会为大家介绍更多相干内容，大家在这里能够简略将原子组件了解为新增 template 的根本单位。

因为内容容量很多，咱们这里只截取局部为大家介绍。content 外面的第一个对应个别就是侧边栏的题目，咱们能够指定一个类型为 TextBlock 的原子类型，而后通过 css 款式给这个题目增加款式。text 就对应题目的文本。在第二个对象中咱们指定了一个容器类型名为 ”Container”，外面蕴含一些子组件，能够能够设置其 margin 边距、width 宽度等，除此之外还能够设置 bindingPath，有点相似数据绑定，这个参数是能够抉择是否动静展现数据的前提。

将 template 创立实现后，接下来咱们须要注册该模板。

GC.Spread.Sheets.Designer.registerTemplate(
  "auditOptionTemplate",
  auditTemplate
);

template 除了有 UI 外，还须要有对应的 command，咱们也须要去定义命令对象。有一个须要留神的属性须要留神的是 visibleContext，这个用于管制模板的显示和敞开，比拟要害。而后就是解决侧边栏的状态的 getState 了，在这里，咱们能够去对侧边栏的内容做一个更改。如上面的 text1 和 text2 就是后面提到的 bindingPath，当咱们点击到指定的单元格时，侧边栏就会显示对应值。

再接着，将这个 ui 和 command 规整为一个侧边栏对象中。

var sidePanelsAuditConfig = {
  position: "right",
  width: "315px",
  command: "auditOptionPanel",
  uiTemplate: "auditOptionTemplate",
  showCloseButton: true,
};

并且增加到咱们的 config 外面。

 Object.assign(config.commandMap, sidePanelsAuditCommands);

最初再回到后面定义的按钮的对象中将管制侧边栏显隐的代码加上，这样就全副功败垂成啦。

大家感兴趣能够下载 demo 试试：

https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MTk2MTcwfGJkY2EwYjI0fDE2NTAyNjIwNTJ8NjI2NzZ8MTQyNzIx

实例操作