A08-04 按鈕元件

1. 在設計報表時，可以將按鈕控制元件和JS事件綁定，觸發報表事件。

2. 在設計表單時，可以在儲存格中插入按鈕元件，從而實現插入、刪除列的功能。在表單中使用按鈕元件，需要使用填報預覽。

3. 按鈕元件可以實現樹結構的展開功能，此功能需要使用資料分析預覽。

4. 按鈕元件分成5種類型：普通、自訂、插入列、刪除列、樹節點。

1

插入按鈕元件。

1. 選中B2儲存格，點擊【元件設定】，點擊下拉框，選擇【按鈕元件】。

2. 同樣操作給C2儲存格也插入按鈕元件。

3. 點擊【填報預覽】，在瀏覽器中查看效果。

2

基本-元件名。

1. 可以為B2、C2中插入的文字元件分別設定元件名。

2. 元件名可手動輸入任意名稱，也可選擇全域參數或伺服器資料源參數。

3. 元件名選擇參數，即將參數和元件進行了綁定，在元件中輸入的值，可通過參數來實時傳遞。

4. 擁有名稱後，可以通過JavaScript獲取元件，從而修改元件屬性。

3

基本-可用。

1. 【勾選】可用時，正常顯示。

2. 【不勾選】可用時，顏色會被淡化掉，元件也無法點擊執行。

3. 設定B2儲存格元件不可用，C2儲存格元件可用，預覽效果。

4

基本-可見。

1. 勾選【可見】時，可看得到元件。

2. 勾選【不可見】時，元件會被隱藏起來不顯示。

3. 設定元件不可見時，需先點擊【範本】→【範本web屬性】→【填報頁面設定】，勾選【直接顯示元件】。

4. 設定B2儲存格元件不可見，C2儲存格元件可見，預覽效果。

5

進階-按鈕型別-普通。

1. 可自行設定按鈕名稱。

2. 點擊【圖示】旁邊3個點，彈出 選擇圖標視窗，可以在按鈕元件中加上圖示，增加視覺效果。

3. 通過設定【快捷鍵】，預覽時可使用快捷鍵來執行按鈕，這邊使用enter快捷鍵為例子。

4. 快捷鍵設定只有支援部份快捷鍵，滑鼠移到【快捷鍵】設定框，會彈出能支援的快捷鍵內容。

5. 點擊【事件】添加一個按鈕點擊事件，查看按鈕效果，輸入js程式碼alert("test");

6. 點擊【填報預覽】，在瀏覽器中查看效果。

6

進階-按鈕型別-自訂。

1. 可自行設定按鈕名稱。

2. 點擊【圖示】旁邊3個點，彈出 選擇圖標視窗，可以在按鈕元件中加上圖示，增加視覺效果。

3. 通過設定【快捷鍵】，預覽時可使用快捷鍵來執行按鈕，這邊使用enter快捷鍵為例子。

4. 快捷鍵設定只有支援部份快捷鍵，滑鼠移到【快捷鍵】設定框，會彈出能支援的快捷鍵內容。

5. 可自訂按鈕初始背景、滑鼠懸浮背景和滑鼠點擊背景，增加交互效果。

6. 點擊【事件】添加一個按鈕點擊事件，查看按鈕效果，輸入js程式碼alert("test");

7. 點擊【填報預覽】，在瀏覽器中查看效果。

7

進階-按鈕型別-插入列。

1. 【按鈕名字】預設為插入列，可自行修改按鈕名字。

2. 【圖示】預設為  ，點擊旁邊3個點，彈出 選擇圖標視窗，可以在按鈕元件中加上圖示，增加視覺效果。

3. 通過設定【快捷鍵】，預覽時可使用快捷鍵來執行按鈕，這邊使用enter快捷鍵為例子。

4. 快捷鍵設定只有支援部份快捷鍵，滑鼠移到【快捷鍵】設定框，會彈出能支援的快捷鍵內容。

5. 在【指定儲存格】後設定需要插入的儲存格位置，並給該儲存格設定擴展方向。

6. 在【列數】後輸入點擊一次插入列按鈕想要插入的列數。

7. 點擊【填報預覽】，在瀏覽器中查看效果。

8. 設定擴展，可參考A06-00 擴展-擴展方向。

8

進階-按鈕型別-刪除列。

1. 【按鈕名字】預設為刪除列，可自行修改按鈕名字。

2. 【圖示】預設為  ，點擊旁邊3個點，彈出 選擇圖標視窗，可以在按鈕元件中加上圖示，增加視覺效果。

3. 通過設定【快捷鍵】，預覽時可使用快捷鍵來執行按鈕，這邊使用enter快捷鍵為例子。

4. 快捷鍵設定只有支援部份快捷鍵，滑鼠移到【快捷鍵】設定框，會彈出能支援的快捷鍵內容。

5. 在【指定儲存格】後設定需要刪除的儲存格位置，並給該儲存格設定擴展方向。

6. 點擊【填報預覽】，在瀏覽器中查看效果。

7. 設定擴展，可參考A06-00 擴展-擴展方向。

9

進階-按鈕型別-樹節點按鈕。

1. 樹節點按鈕是用來制作樹形展開的折疊報表。

2. 在B2儲存格中輸入Manger，設定B2儲存格縱向擴展，並給B2儲存格設定樹節點按鈕元件。

3. 在B3儲存格中輸入Lily，設定B3儲存格的父格為B2。

4. 點擊資料分析預覽，在瀏覽器中查看效果。

5. 設定擴展，可參考A06-00 擴展-擴展方向。

6. 設定父格，可參考A06-01 擴展-左父格。