负责技术支持的Tao又来了。三天没见面了，客户又给我们发来了新的问题。这次我们需要实现的场景是在前端表格环境中，像一个模板按钮，点击后弹出侧边栏，然后点击不同的单元格显示不同的内容。Squeeze接下来我们就带大家来看看前端电子表格是如何实现这样一个功能的。示例操作首先，按照惯例我们在编辑器的功能区上插入一个按钮。插入按钮后，让我们创建一个侧边栏模板。这个侧边栏模板实际上是一个模板对象。可以通过getTemplate获取一些常用模板，观察其结构。比较常用的元素有：templateName和content。其中content是一个数组，可以包含不同原子类型的对象。后面我们会介绍更多关于原子类型的相关内容。这里，你可以简单的将原子组件理解为新模板的基本单元。由于内容较多，这里只截取一部分给大家介绍一下。内容中第一个对应的一般是侧边栏的标题。我们可以指定一个原子类型的TextBlock，然后通过css样式给标题添加样式。text对应于标题的文本。在第二个对象中，我们指定了一个名为“Container”的容器类型，其中包含一些子组件。你可以设置它的边距、宽度等，另外你还可以设置bindingPath，类似于数据绑定，该参数是选择是否动态显示数据的前提。创建模板后，我们接下来需要注册模板。GC.Spread.Sheets.Designer.registerTemplate("auditOptionTemplate",auditTemplate);除了UI，模板还需要有相应的命令，我们也需要定义命令对象。一个需要注意的属性是visibleContext，它用来控制模板的显示和关闭，这个比较关键。然后是处理侧边栏状态的getState。在这里，我们可以对侧边栏的内容进行更改。比如下面的text1和text2就是上面提到的bindingPath。当我们点击指定的单元格时，侧边栏会显示相应的值。然后，将ui和命令组织到侧边栏对象中。varsidePanelsAuditConfig={position:"right",width:"315px",command:"auditOptionPanel",uiTemplate:"auditOptionTemplate",showCloseButton:true,};并将其添加到我们的配置中。Object.assign(config.commandMap,sidePanelsAuditCommands);最后，回到之前定义的按钮对象，添加控制侧边栏显示的代码，就大功告成了。有兴趣的可以下载demo试试：https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MTk2MTcwfGJkY2EwYjI0fDE2NTAyNjIwNTJ8NjI2NzZ8MTQyNzIx扩展阅读SpreadJS纯前端表单控件官网
