[學習筆記]Devexpress在MVC上擴展組件，Navbar與TreeView

這兩個都是導航欄，Navbar是隻有二級分類的比較美觀大方的，TreeView支持多級導航欄，是傳統樹狀的。

官網教程傳送門：
https://demos.devexpress.com/MVCxGridViewDemos/Overview

Navbar

組件在局部頁面的實現與設置（基本上用着的設置都在這裏了）：

<div class="leftPanel">
        @* DXCOMMENT: Configure the left panel's menu *@
    @Html.DevExpress().NavBar(settings => {
    settings.Name = "LeftNavBar";
    settings.AllowExpanding = true; //允許點擊展開
    settings.AllowSelectItem = true; //允許選擇Item
    settings.AutoCollapse = true;  //當點擊、一級時，自動縮小其他一級
    settings.SaveStateToCookies = true;  //允許將方案保存本地
    settings.EnableAnimation = true;  //允許動畫效果
    settings.EnableHotTrack = true;  //允許熱跟蹤，鼠標懸浮產生效果
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);  //寬度100%
    settings.ControlStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.ControlStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
}).BindToXML(HttpContext.Current.Server.MapPath("~/App_Data/SideMenu.xml"), "/menu/*").GetHtml()
</div>

綁定的XML文件格式：

<?xml version="1.0" encoding="utf-8" ?>
<menu>
  <group Text="Platform">
    <item Text="Windows" />
    <item Text="Linux" />
    <item Text="Mac OS" />
  </group>
  <group Text="SQL Server">
    <item Text="SQL Server 2005" />
    <item Text="SQL Server 2008" />
    <item Text="SQL Server 2008 R2" />
  </group>
  <group Text="Browser">
    <item Text="Chrome" />
    <item Text="Firefox" />
    <item Text="Internet Explorer" />
    <item Text="Safari" />
    <item Text="Opera" />
  </group>
  <group Text="Language">
    <item Text="C#" />
    <item Text="Visual Basic" />
    <item Text="C++" />
    <item Text="Java" />
    <item Text="PHP" />
  </group>
</menu>

這裏，組件支持直接在頁面寫入導航欄設置，也支持將導航欄設置映射成Model然後載入。具體設置方式，可以看官網教程。

TreeView

樹狀導航欄的所有設置可以從數據庫中動態讀取。

這裏是具體實現方式，用了Lambda表達式
比較有趣的設置是：SaveStateToCookies （自動將選擇方案保存瀏覽器本地），CheckNodesRecursive （需要實現動態導航欄時，可以實時檢查子節點）；

 @Html.DevExpress().TreeView(settings => {
    settings.Name = "leftNavBar";
    settings.AllowSelectNode = true;  //允許點擊選中當前節點
    settings.EnableAnimation = true;  //允許展開動畫
    settings.EnableHotTrack = true;   //允許熱追蹤，鼠標懸浮效果
    settings.SaveStateToCookies = true;  //允許將方案保存本地
    settings.ShowTreeLines = true;  //允許展示樹狀線
    settings.ShowExpandButtons = true;  //允許顯示展開按鈕
    settings.AllowCheckNodes = true;  //允許展示Check按鈕
    settings.CheckNodesRecursive = true;  //允許使用節點檢查

    settings.Nodes.Add(node_one => {//增加一級節點
        node_one.Name = "search";
        node_one.Text = "庫存查詢";
        node_one.ToolTip = "庫存產品的數量重量各種數據查詢";//鼠標懸浮提示信息
        node_one.Expanded = false;  //設置節點不自動展開
        node_one.TextStyle.BackColor = System.Drawing.Color.FromArgb(Int32.Parse("EE7AE9", System.Globalization.NumberStyles.HexNumber));
        //設置節點背景色
        node_one.Image.Url = "~/Content/Images/Test.jpg";//設置節點圖片
        node_one.Image.Width = 10;
        node_one.Nodes.Add(node_two => {//增加二級節點
            node_two.Text = "測試1";
            node_two.Nodes.Add(node_three => {//增加三級節點
                node_three.Text = "測試2";
            });
        });
    });
    settings.Nodes.Add(node_one_Two => {//增加一級節點
        node_one_Two.Nodes.Add(node_two =>
        {
            node_two.Text = "測試1";
            node_two.Nodes.Add(node_three =>
            {
                node_three.Text = "測試2";
            });
        });
    });
}
    ).GetHtml()

總之，我覺得我能想到的功能，Devexpress全都有，如果還有其他有趣的功能，歡迎分享一下奧。