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）。


下载全部源代码