乐趣区

关于前端:前端干货别再羡慕别人的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

退出移动版