1. 程式人生 > >報表:JS自定義隱藏/顯示sheet頁面

報表:JS自定義隱藏/顯示sheet頁面

在報表的使用過程中,有一種特殊需求:針對某個多sheet頁面的報表,需要針對不同的使用者,隱藏/顯示不同的sheet頁面,從而達到許可權控制的效果,同時,需要將這種功能實現視覺化,由使用者來控制不同使用者的許可權和更新許可權,不由開發人員預設設定。

在常規的報表製作中,一般都是根據業務上的使用規定,開發時就已經做好了多個頁面,事先設定好不同使用者具有什麼許可權,可以檢視什麼頁面了;此處因為使用者需要自己根據業務情況控制不同使用者的可檢視頁面,就不可以使用上面的方案了。

這裡提供的方案是:在已有一張多sheet頁面報表的情況下,製作一個視覺化的填報報表,分組羅列所有使用者和報表sheet,供使用者針對不同的使用者勾選不同的可視頁面,並將結果儲存起來,最後,在多sheet報表的“載入起始”中新增javascripts事件,使得頁面初始載入時,獲取當前使用者並查詢該使用者具有哪些sheet的檢視許可權,根據返回的結果,對應地隱藏/顯示對應的sheet。

如下:

1、使用者許可權視覺化介面示例:

2、多sheet報表介面設計:

3、javascripts事件編輯

程式碼如下:

//示例隱藏sheet標籤1、3的頁面
sheet=[1,3];
//隱藏sheet標籤為1、3的標籤
$.each(sheet,function(index, value) {
    $('[title="' + value + '"]').hide();
})
//隱藏sheet標籤為1、3的頁面,此處主要是隱藏sheet標籤為1的頁面,因為前面的步驟只隱藏了標籤沒有隱藏頁面
$.each($('.mr-sheetbutton-container'),function(index, value) {
    if(!($(value).is(':hidden'))){
        $(value).click();
        return false;
    }
})

4、效果圖:

如上,製作一個視覺化的填報頁面,供使用者自定義不同使用者的可檢視頁面並儲存起來;再根據這一前提,在多sheet報表載入起始時,讀取當前使用者資訊並查詢當前使用者的可檢視許可權,顯示/隱藏不同的頁面(此處示例隱藏sheet為1、3的頁面,不顯示讀資料庫資料步驟),即可滿足上述需求,使用者就可以靈活地選擇和更新不同使用者的檢視許可權和資料許可權,開發者也可以省去複製貼上生成多個報表再根據不同使用者去設定不同許可權的多次步驟。

這一方案,可以讓使用者在前端頁面就完成不同使用者的許可權控制,不需要進入後臺,甚至讀懂程式碼再做使用者許可權設定,個人認為是一個比較舒適的許可權控制的體驗。