ExtAspNet应用技巧（十六） 菜单管理

界面截图

模拟树的Grid，这个是ExtAspNet中Grid控件的一个特色哦，是不是很方便： 


点击CheckBox自动回发，并修改数据库此条数据的状态： 


点击删除弹出确认对话框，注意这个对话框是在父页面中弹出的： 


通过可以按下的按钮（EnablePress）来设置简单的过滤条件： 


点击编辑弹出窗口（这个窗口是编辑页面IFrame，会在下一章介绍），注意这个弹出窗口也是在父页面弹出的，这也是ExtAspNet的一大特色： 



ASPX标签

    <ext:PageManager ID="PageManager1" AutoSizePanelID="Grid1" runat="server" />
    <ext:Grid ID="Grid1" runat="server" ShowBorder="false" EnableCheckBoxSelect="false"
        EnableRowNumber="true" DataKeyNames="Id" OnRowCommand="Grid1_RowCommand" Title="菜单管理">
        <Toolbars>
            <ext:Toolbar ID="Toolbar1" Position="Top" runat="server">
                <Items>
                    <ext:Button ID="btnOnlyTwoLevelMenu" EnablePress="true" OnClick="btnOnlyTwoLevelMenu_Click"
                        runat="server" Text="仅显示一二级菜单">
                    </ext:Button>
                    <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
                    </ext:ToolbarSeparator>
                    <ext:Button ID="btnNoHiddenMenu" EnablePress="true" OnClick="btnNoHiddenMenu_Click"
                        runat="server" Text="不显示隐藏菜单">
                    </ext:Button>
                    <ext:ToolbarFill ID="ToolbarFill1" runat="server">
                    </ext:ToolbarFill>
                    <ext:Button ID="btnNew" runat="server" SystemIcon="New" EnablePostBack="false" Text="新增菜单">
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </Toolbars>
        <Columns>
            <ext:BoundField DataField="Name" HeaderText="名称" DataSimulateTreeLevelField="TreeLevel"
                Width="120px" />
            <ext:BoundField DataField="NavigateUrl" HeaderText="链接" ExpandUnusedSpace="true" />
            <ext:CheckBoxField ColumnId="cbxShow" DataField="Show" HeaderText="显示" RenderAsStaticField="false"
                AutoPostBack="true" CommandName="Show" Width="50px" />
            <ext:BoundField DataField="SortIndex" HeaderText="排序" Width="50px" />
            <ext:WindowField Text="编辑" WindowID="Window1" Title="编辑" DataIFrameUrlFields="Id"
                DataIFrameUrlFormatString="~/admin/menu_edit.aspx?id={0}" Width="50px" />
            <ext:LinkButtonField Text="删除" ConfirmText="确定删除此菜单？" ConfirmTarget="_parent" CommandName="Delete"
                Width="50px" />
        </Columns>
    </ext:Grid>
    <ext:Window ID="Window1" runat="server" Height="350px" IsModal="true" Popup="false"
        Target="_parent" EnableIFrame="true" IFrameUrl="about:blank" Width="500px">
    </ext:Window>
    

整体上来看，这个页面包括三个ExtAspNet控件：PageManager, Gird, Window。 在Grid内部，又包含了一些其他ExtAspNet控件：Toolbar, Button, ToolbarFill。

虽然一些应用技巧在前几篇文章中已经出现过，不过有一些新的应用技巧：

• Button的EnablePress="true"，则此按钮拥有按下弹出的效果
• ToolbarFill，用来将工具栏分隔成左右两部分
• Button的SystemIcon="New"，则此按钮前面会显示预定义的图标（SystemIcon是枚举类型，可用的还有Close, Delete, Save, Search等）
• Grid的DataKeyNames="Id"，用来定义行的主键（可以是多个，比如DataKeyNames="Id,Name"），在后台代码中可以通过DataKeys属性获取其值
• 为Grid的每一列设置宽度，剩下的一列应用ExpandUnusedSpace="true"属性，则此列会占据所有剩余的空白空间
• LinkButtonField的ConfirmTarget="_parent"，则确认对话框在父页面弹出
• Window的Target="_parent"，用来控制此窗口在父页面弹出（这在IFrame框架中非常重要）
• DataSimulateTreeLevelField="TreeLevel"用来实现模拟树的行为

重定义Menu的实体类

因为需要生成模拟树的表格，我们需要重定义从数据库表X_Menu映射过来的实体类，增加public int TreeLevel属性。

    public class MyMenu
    {
        private int id;
        private string name;
        private string imageUrl;
        private string navigateUrl;
        private bool show;
        private int parentMenuId;
        private int sortIndex;
        private int treeLevel;
        private string remark;
        public string Remark
        {
            get { return remark; }
            set { remark = value; }
        }
        public int TreeLevel
        {
            get { return treeLevel; }
            set { treeLevel = value; }
        }
        public int SortIndex
        {
            get { return sortIndex; }
            set { sortIndex = value; }
        }
        public int ParentMenuId
        {
            get { return parentMenuId; }
            set { parentMenuId = value; }
        }
        public bool Show
        {
            get { return show; }
            set { show = value; }
        }
        public string NavigateUrl
        {
            get { return navigateUrl; }
            set { navigateUrl = value; }
        }
        public string ImageUrl
        {
            get { return imageUrl; }
            set { imageUrl = value; }
        }
        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        public int Id
        {
            get { return id; }
            set { id = value; }
        }
    }
    

页面后台代码

    public partial class menu : PageBase
    {
        private static readonly log4net.ILog logger = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
        #region Page_Load
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                LoadData();
            }
        }
        private void LoadData()
        {
            btnNew.OnClientClick = Window1.GetShowReference("~/admin/menu_new.aspx", "新增");
            BindGrid();
        }
        private void BindGrid()
        {
            // TODO BindGrid
        }
        #endregion
        #region Events
        protected void Grid1_RowCommand(object sender, ExtAspNet.GridCommandEventArgs e)
        {
            // TODO Grid1_RowCommand
        }

        protected void btnOnlyTwoLevelMenu_Click(object sender, EventArgs e)
        {
            BindGrid();
        }
        protected void btnNoHiddenMenu_Click(object sender, EventArgs e)
        {
            BindGrid();
        }
        #endregion
    }
    

在页面第一次加载时，注册点击“新增菜单”按钮的客户端脚本。
Window1.GetShowReference函数的第一个参数是Window中IFrame的页面地址，注意此时Window1必须设置了EnableIFrame="true"属性。


BindGrid函数

这个是本页面的核心函数，首先从数据库查询数据，然后经过一定的转换，最后绑定到Grid控件。

    private void BindGrid()
    {
        SqlQuery q = new Select().From<XMenu>();
        if (btnNoHiddenMenu.Pressed)
        {
            q.Where(XMenu.ShowColumn).IsEqualTo(true);
        }
        q.OrderAsc(XMenu.SortIndexColumn.ColumnName);
        XMenuCollection menus = q.ExecuteAsCollection<XMenuCollection>();

        List<MyMenu> newMenus = null;
        if (btnOnlyTwoLevelMenu.Pressed)
        {
            newMenus = XMenuHelper.GetMyMenuCollection(menus, 1);
        }
        else
        {
            newMenus = XMenuHelper.GetMyMenuCollection(menus);
        }
        Grid1.DataSource = newMenus;
        Grid1.DataBind();
    }
    

这里引入了另一个静态类，用来将XMenuCollection转换为List<MyMenu>，同时计算每个菜单项的深度（MyMenu中的TreeLevel属性）。

    public class XMenuHelper
    {
        public static List<MyMenu> GetMyMenuCollection(XMenuCollection oldMenus)
        {
            return GetMyMenuCollection(oldMenus, 100);
        }
        public static List<MyMenu> GetMyMenuCollection(XMenuCollection oldMenus, int maxLevel)
        {
            List<MyMenu> newMenus = new List<MyMenu>();
            ResolveMenuCollection(oldMenus, newMenus, 0, 0, maxLevel);
            return newMenus;
        }
        private static void ResolveMenuCollection(XMenuCollection oldMenus, List<MyMenu> newMenus, int parentId, int level, int maxLevel)
        {
            foreach (XMenu menu in oldMenus)
            {
                if (menu.ParentMenuId == parentId)
                {
                    MyMenu myMenu = new MyMenu();
                    newMenus.Add(myMenu);
                    myMenu.TreeLevel = level;
                    myMenu.Id = menu.Id;
                    myMenu.ImageUrl = menu.ImageUrl;
                    myMenu.Name = menu.Name;
                    myMenu.NavigateUrl = menu.NavigateUrl;
                    myMenu.ParentMenuId = menu.ParentMenuId;
                    myMenu.Remark = menu.Remark;
                    myMenu.Show = menu.Show;
                    myMenu.SortIndex = menu.SortIndex;

                    if (level < maxLevel)
                    {
                        level++;
                        ResolveMenuCollection(oldMenus, newMenus, menu.Id, level, maxLevel);
                        level--;
                    }
                }
            }
        }
    }
    

Grid1_RowCommand事件处理

在Grid1的行事件中，需要处理两种类型的行事件，分别是：

    <ext:CheckBoxField ColumnId="cbxShow" DataField="Show" HeaderText="显示" RenderAsStaticField="false"
        AutoPostBack="true" CommandName="Show" Width="50px" />
    

和

    <ext:LinkButtonField Text="删除" ConfirmText="确定删除此菜单？" ConfirmTarget="_parent" CommandName="Delete"
        Width="50px" />
    

    protected void Grid1_RowCommand(object sender, ExtAspNet.GridCommandEventArgs e)
    {
        int menuId = Convert.ToInt32(Grid1.DataKeys[e.RowIndex][0]);
        if (e.CommandName == "Delete")
        {
            XMenu.Delete(menuId);
            BindGrid();
        }
        else if (e.CommandName == "Show")
        {
            ExtAspNet.CheckBoxField myCheckBoxField = Grid1.Columns.FindColumnById("cbxShow") as ExtAspNet.CheckBoxField;
            bool rowChecked = myCheckBoxField.GetCheckState(e.RowIndex);
            XMenu menu = XMenu.FetchByID(menuId);
            menu.Show = rowChecked;
            menu.Save(User.Identity.Name);
            BindGrid();
        }
    }
    

至此，整个列表页面完成。

下一章，我们将会介绍如何在弹出的新窗口中添加菜单和编辑菜单。


下载全部源代码