自定义组件版编辑器——点击按钮打开侧边栏及动态更新

收藏

本帖最后由 Derrick.Jiao 于 2022-3-11 16:36 编辑

现在组件版编辑器从v14发布至今已经迭代至v15了，大家对于自定义编辑器的需求也基本得到满足，但是相关侧边栏的示例较少。有的朋友有这样一个场景，想要像模板按钮那样，点击之后弹出一个侧边栏，然后点击不同的单元格显示不同的内容。那这个怎么实现呢？

首先，比较常规地，我们先在编辑器的ribbon上插入一个按钮，这部分其余教程有描述，这边就不再赘述了。
image.png446085814.png

接下来我们要创建一个侧边栏模板，这个就是一个template对象，大家可以通过getTemplate去取一些常见的模板观察他的结构。里面主要有：templateName、content，其中content是一个数组，里面可以包含不同原子类型的对象，关于原子类型后面会出相关的系列文章做介绍。
由于模板较大，我们就截取部分做分析。content里面的第一个对应一般就是侧边栏的标题，我们可以指定一个类型为TextBlock的原子类型。然后通过css样式给这个标题添加样式。text就对应的是标题的问文本。第二个对象我们制定了一个容器类型名为“Container”，里面有一些子组件，可以可以设置其margin边距、width宽度等，另外还可以设置一个bindingPath，有点类似数据绑定，可以去动态展示数据的前提。
image.png622888793.png

把template创建完成后，我们还需要取注册该模板

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

复制代码

template除了有UI外，还需要有对应的command，我们也需要去定义命令对象。有一个属性需要注意的是visibleContext，这个用于控制模板的显示和关闭比较关键。然后就是处理侧边栏的状态的getState了，在这里，我们可以去对侧边栏的内容做一个更改。如下面的text1和text2就是前面提到的bindingPath，当我们点击到指定的单元格时，侧边栏就会显示对应值。
image.png189824217.png