ExtAspNet应用技巧（十五） - 树形菜单与手风琴式菜单

界面截图

手风琴式菜单




树形菜单



数据库表（X_Menu）

设计视图： 


数据： 



ASPX标签定义

在上一篇文章中已经对前台页面定义有了详细的描述。

    <ext:Region ID="regionLeft" Split="true" Width="200px" Margins="0 0 0 0" ShowHeader="true"        Title="菜单" EnableCollapse="true" Layout="Fit" Position="Left" runat="server">    </ext:Region>    

动态创建树形菜单

    protected void Page_Init(object sender, EventArgs e)    {        InitMenu();    }    private void InitMenu()    {        XMenuCollection menus = new Select().From<XMenu>()            .Where(XMenu.ShowColumn).IsEqualTo(true)            .OrderAsc(XMenu.SortIndexColumn.ColumnName)            .ExecuteAsCollection<XMenuCollection>();        if (XConfigHelper.MenuType.ToLower() == "accordion")        {            // TODO 创建手风琴式菜单        }        else        {            ExtAspNet.Tree tree = new ExtAspNet.Tree();            regionLeft.Items.Add(tree);            tree.ShowBorder = false;            tree.ShowHeader = false;            tree.AutoScroll = true;            tree.EnableArrows = true;            ResolveMenuTree(menus, 0, tree.Nodes);        }    }    /// <summary>    /// 生成菜单树    /// </summary>    /// <param name="menus"></param>    /// <param name="parentMenuId"></param>    /// <param name="nodes"></param>    /// <returns>当前节点的子节点个数</returns>    private int ResolveMenuTree(XMenuCollection menus, int parentMenuId, ExtAspNet.TreeNodeCollection nodes)    {        int count = 0;        foreach (XMenu menu in menus)        {            if (menu.ParentMenuId == parentMenuId)            {                ExtAspNet.TreeNode node = new ExtAspNet.TreeNode();                nodes.Add(node);                node.Text = menu.Name;                node.IconUrl = menu.ImageUrl;                if (!String.IsNullOrEmpty(menu.NavigateUrl))                {                    node.NavigateUrl = menu.NavigateUrl;                    node.Target = "main";                }                int childCount = ResolveMenuTree(menus, menu.Id, node.Nodes);                if (childCount == 0)                {                    node.Leaf = true;                }                count++;            }        }        return count;    }    

在这段代码中，有几点需要注意的地方：

• 由于需要动态创建控件，所以最好放在Page_Init中而不是Page_Load
• 使用SubSonic从数据库检索数据相当方便，这里只检索需要显示的菜单
• ResolveMenuTree用于递归生成Tree控件，特别注意这里通过返回值来标示当前节点的子节点数，从而为node.Leaf赋值

创建手风琴式菜单

下面看下 “// TODO 创建手风琴式菜单” 的代码：

    ExtAspNet.Accordion accordion = new ExtAspNet.Accordion();    regionLeft.Items.Add(accordion);    accordion.ShowBorder = false;    accordion.ShowHeader = false;    foreach (XMenu menu in menus)    {        if (menu.ParentMenuId == 0)        {            ExtAspNet.AccordionPane pane = new ExtAspNet.AccordionPane();            accordion.Panes.Add(pane);            pane.Title = menu.Name;            pane.ShowBorder = false;            ExtAspNet.Tree tree = new ExtAspNet.Tree();            pane.Items.Add(tree);            tree.ShowBorder = false;            tree.ShowHeader = false;            tree.AutoScroll = true;            tree.EnableArrows = true;            ResolveMenuTree(menus, menu.Id, tree.Nodes);        }    }    

通过所有的一级菜单（menu.ParentMenuId == 0）创建Accordion控件，然后二级以下菜单创建AccordionPane中的子控件 - Tree。


下一章，我们使用Grid控件来完成“菜单管理”模块，包括菜单的增删改查（CRUD）。


下载全部源代码