您现在的位置： 365建站网 > 365文章 > ExtAspNet应用技巧（十五） - 树形菜单与手风琴式菜单

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

文章来源：365jz.com 点击数：1272 更新时间：2009-09-17 10:29 参与评论

界面截图

手风琴式菜单

树形菜单

数据库表（X_Menu）

设计视图：

数据：

ASPX标签定义

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

</>code
    <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>

动态创建树形菜单

</>code
    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 创建手风琴式菜单” 的代码：

</>code
    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);
        }
    }