很多小伙伴反應(yīng)說(shuō)已經(jīng)用羅叔的教程解決了很多 PowerBI 難題并在工作中制作了很多報(bào)告睹欲，導(dǎo)航也是一個(gè)難題，有什么方法可以快速建立導(dǎo)航和菜單系統(tǒng)嗎一屋？

雖然羅叔此前已經(jīng)分享過(guò)多次菜單系統(tǒng)的構(gòu)建方式窘疮，但其中是包含了很多手工量的。今天冀墨，羅叔給出一種最新的構(gòu)建方式闸衫，讓是一勞永逸。

該方法在理論上诽嘉，可以支持：

• 多限層
• 只需要構(gòu)建一次
• 全面可配置化
• 可修改化
• 支持垂直和水平方向

我們?cè)诳戳诵Ч笠黄饘W(xué)習(xí)蔚出。

效果預(yù)覽

先來(lái)看垂直方向無(wú)限級(jí)菜單目錄

image

再來(lái)看水平方向無(wú)限級(jí)菜單目錄：

image

其場(chǎng)景如下：

• 用戶選擇目錄樹(shù)的某個(gè)位置
• 在右側(cè)預(yù)覽其效果，并確定自己要去那頁(yè)
• 點(diǎn)擊【GO】即可到達(dá)目標(biāo)頁(yè)面

我當(dāng)然知道這是你要的含懊。因?yàn)樯矶@也是我要的。

原理揭秘

這里的核心原理是：

根據(jù)用戶選擇的菜單內(nèi)容岔乔，來(lái)動(dòng)態(tài)計(jì)算出目標(biāo)頁(yè)面地址并賦給【GO】按鈕即可诬像。

如下：

image

可配置化

目錄結(jié)構(gòu)如果需要改變匕垫，往往要改很多地方击纬，而本文的方案是完美可配置的馍管，我們用 DAX 公式來(lái)生成一張目錄表，如下：

Report.Content = 
VAR vContentCore = 
SELECTCOLUMNS(
{
    ( "首頁(yè)" , "首頁(yè)" , "" , 0 , 0 ),

    ( "經(jīng)營(yíng)概況" , "指標(biāo)體系" , "http://files.excel120.com/images/20200524171453.png" , 1 , 1 ),
    ( "經(jīng)營(yíng)概況" , "月度同比分析" , "http://files.excel120.com/images/20200524171453.png" , 1 , 2 ),
    ( "經(jīng)營(yíng)概況" , "大區(qū)門(mén)店銷(xiāo)售額等級(jí)分布" , "http://files.excel120.com/images/20200524171453.png" , 1 , 3 ),
    ( "經(jīng)營(yíng)概況" , "區(qū)域月度銷(xiāo)售完成率" , "http://files.excel120.com/images/20200524171453.png" , 1 , 4 ),
    ( "經(jīng)營(yíng)概況" , "業(yè)態(tài)及屬性銷(xiāo)售占比" , "http://files.excel120.com/images/20200524171453.png" , 1 , 5 ),

    ( "區(qū)域分析" , "近期業(yè)績(jī)及賽馬圖比拼" , "http://files.excel120.com/images/20200524171555.png" , 2 , 1 ),
    ( "區(qū)域分析" , "移動(dòng)平均趨勢(shì)分析" , "http://files.excel120.com/images/20200524171555.png" , 2 , 2 ),
    ( "區(qū)域分析" , "區(qū)域內(nèi)門(mén)店排名分析" , "http://files.excel120.com/images/20200524171555.png" , 2 , 3 ),
    ( "區(qū)域分析" , "重點(diǎn)城市帕累托分析" , "http://files.excel120.com/images/20200524171555.png" , 2 , 4),

    ( "單店分析" , "單店業(yè)績(jī)同期對(duì)比分析" , "http://files.excel120.com/images/20200524171821.png" , 3 , 1 ),
    ( "單店分析" , "入庫(kù)與銷(xiāo)售額分析" , "http://files.excel120.com/images/20200524171821.png" , 3 , 2 ),
    ( "單店分析" , "單店完成率分析" , "http://files.excel120.com/images/20200524171821.png" , 3 , 3 ),
    ( "單店分析" , "客單價(jià)/連帶率分析" , "http://files.excel120.com/images/20200524171821.png" , 3 , 4 ),

    ( "尾頁(yè)" , "尾頁(yè)" , "" , 99 , 0 )
} , "L1Name" , [Value1] , "L2Name" , [Value2] , "Preview" , [Value3] , "L1Code" , [Value4] , "L2Code" , [Value5] )
RETURN 
    ADDCOLUMNS( vContentCore , 
        "FullCode" , [L1Code] & "." & [L2Code] , 
        "FullName" , [L1Name] & " \ " & [L2Name] , 
        "OrderBy" , [L1Code] * 100 + [L2Code] 
    )

效果如下：

image

這樣茁影，所有的內(nèi)容就可以集中到一起來(lái)進(jìn)行維護(hù)宙帝。這是我們對(duì)OCP原則的應(yīng)用。

可預(yù)覽化

對(duì)于復(fù)雜的BI報(bào)告系統(tǒng)募闲，用戶很可能并不知道自己要去哪里步脓，那么當(dāng)用戶選擇一個(gè)可能的目標(biāo)頁(yè)面時(shí)，可以先不做跳轉(zhuǎn)浩螺，而是預(yù)覽靴患，讓用戶知道確實(shí)要去那里，再點(diǎn)擊【GO】按鈕到達(dá)目標(biāo)頁(yè)面要出。

image

我們將目標(biāo)頁(yè)面的預(yù)覽圖URL存放鸳君，在用戶選擇導(dǎo)航菜單后，就可以看到預(yù)覽了患蹂，非常巧妙或颊。

總結(jié)

本文給出了無(wú)限層級(jí)菜單的終極方案砸紊。該方案可以支持大型系統(tǒng)的構(gòu)建。

趕快動(dòng)手試試吧囱挑。