反饋已提交

網絡繁忙

當前為10.0版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

A08-04 按鈕元件

一、概述

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

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

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

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

二、屬性內容

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

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

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

1.gif

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

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

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

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

2.gif

3
基本-可用。
  1. 【勾選】可用時,正常顯示

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

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

3.gif

4
基本-可見。
  1. 勾選【可見】時,可看得到元件。

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

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

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

4.gif

5
進階-按鈕型別-普通。
  1. 可自行設定按鈕名稱。

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

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

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

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

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

5.gif

6
進階-按鈕型別-自訂。
  1. 可自行設定按鈕名稱。

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

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

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

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

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

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

6.gif

7
進階-按鈕型別-插入列。
  1. 【按鈕名字】預設為插入列,可自行修改按鈕名字。

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

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

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

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

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

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

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

7.gif

8
進階-按鈕型別-刪除列。
  1. 【按鈕名字】預設為刪除列,可自行修改按鈕名字。

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

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

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

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

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

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

8.gif

9
進階-按鈕型別-樹節點按鈕。
  1. 樹節點按鈕是用來制作樹形展開的折疊報表。

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

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

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

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

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

9.gif

附件列表


主題: 報表設計器
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉