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

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

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

界面截图

手风琴式菜单




树形菜单



数据库表(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)。


下载全部源代码


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (1252人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 建站公司
· 杰创官网
· 建站工具

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2022 版权所有 鄂ICP备17013400号