【前端乾貨】別再羨慕別人的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試試：
