JS自定義工具欄按鈕控制參數欄的顯示與隐藏

1.1 預期效果

報表分頁預覽時，如果需要實現在工具欄點擊某個按鈕直接控制對參數欄的顯示與隐藏，該如何實現？如下圖所示：

1.2 實現思路

利用分頁預覽設置中，增加自定義按鈕的“自定義事件”來控制參數面板的顯示和隐藏效果。

2.1 準備模板

準備内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Parameter\Parameter.cpt

點擊下載模板：Parameter.cpt

2.2 添加按鈕

1）打開模板，點擊模板>模板 We b屬性>分頁預覽設置,選擇爲該模板單獨設置，爲工具欄增加一個自定義按鈕，如下圖所示：

2）進入工具欄按鈕設置，設置按鈕名字爲「顯示參數欄」，點擊自定義事件，添加 JS 代碼，如下圖所示：

JavaScript 代碼如下：

$('.parameter-container').css('visibility','visible');

3）同樣方法，再添加一個自定義按鈕，如圖：

JavaScript 代碼如下：

$('.parameter-container').css('visibility','hidden');

2.3 效果預覽

保存模板，點擊「分頁預覽」，效果如下圖所示：

注：不支持移動端。

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具欄JS實例\07-JS自定義工具欄按鈕控制參數欄的顯示與隐藏.cpt

點擊下載模板：07-JS自定義工具欄按鈕控制參數欄的顯示與隐藏.cpt