JS設置報表主體不可用

1.1 問題描述

報表開發中，很多情況下需要将報表主體或工具欄設置爲不可用，即置灰且不能點擊；或初始化設置爲不可用，點擊某個按鈕恢複可用。報表置灰顯示如下圖所示，那如何實現此效果呢？

1.2 實現思路

給模板添加一個 JS「 加載結束」事件，使報表主體灰化，不可編輯。

2.1 準備模板

準備一個模板。示例爲内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeFrom\FreeFrom.cpt

示例模板點擊可下載：FreeForm.cpt

2.2 添加事件

2.2.1 報表主體不可用

打開模板，點擊模板>模板 Web 屬性>填報預覽設置，選擇「爲該模板單獨設置」，添加一個「加載結束」事件，事件内容爲設置報表主體置灰不可用。如下圖所示：

JavaScript 代碼如下：

$('<div/>').css({
    position:'absolute',//絕對定位
    top:$('.x-toolbar').height(),//元素距離頂部的高度爲工具欄的高度
    width: '100%',//寬度100%顯示
    height: '100%',//高度100%顯示
    filter: 'alpha(opacity=50)',//透明度是0.5
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'//背景色
}).appendTo($('body'));

2.2.2 報表主體和工具欄都不可用

2.2.1 節中 JS 實現設置報表主體置灰不可用，若工具欄也需要設置爲置灰不可用，只需将 JS 中元素距離頂部的高度修改爲 0 即可，如下圖所示：

JavaScript 代碼如下：

$('<div/>').css({
    position:'absolute',//絕對定位
    top:0,//元素距離頂部的高度爲0
    width: '100%',//寬度100%顯示
    height: '100%',//高度100%顯示
    filter: 'alpha(opacity=50)',//透明度是0.5
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'//背景色
}).appendTo($('body'));

2.2.3 點擊按鈕報表主體恢複可用

2.2.1 節中 JS 實現設置報表主體置灰不可用，若要實現初始化不可用，在點擊工具欄中按鈕回複可用，需要在 JS 給 div 添加一個 id 做标識，工具欄按鈕添加「點擊」事件，根據此 id 做移除置灰操作，如下圖所示：

1）點擊模板>模板 Web 屬性>填報預覽設置，選擇「爲該模板單獨設置」，添加「加載結束」事件，如下圖所示：

JavaScript 代碼如下：

$('<div id=lock/>').css({
    position:'absolute',//絕對定位
    top:$('.x-toolbar').height(),//元素距離頂部的高度爲工具欄的高度
    width: '100%',//寬度100%顯示
    height: '100%',//高度100%顯示
    filter: 'alpha(opacity=50)',//透明度是0.5
    opacity: 0.5,
    '-moz-opacity': 0.5,
    'z-index': 10000,
    background: '#cccccc'//背景色
}).appendTo($('body'));

2）在工具欄添加自定義按鈕，修改按鈕名字和圖标，爲按鈕添加「自定義事件」，如下圖所示：

JavaScript 代碼如下：

document.getElementById("lock").remove();

2.3 預覽效果

保存模板，選擇填報預覽，PC 端效果如下圖所示：

報表主體不可用：

報表主體和工具欄都不可用：

點擊按鈕報表主體恢複可用：

注：不支持移動端。

報表主體不可用示例已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\38-JS設置報表主體不可用示例一.cpt

點擊下載模板：38-JS設置報表主體不可用示例一.cpt

報表主體和工具欄都不可用示例已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\38-JS設置報表主體不可用示例二.cpt

點擊下載模板：38-JS設置報表主體不可用示例二.cpt

 點擊按鈕報表主體恢複可用示例已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\38-JS設置報表主體不可用示例三.cpt

點擊下載模板：38-JS設置報表主體不可用示例三.cpt