订餐系统——TreeView显示目录结构

    开发Web系统时，导航栏能更好的为用户服务，让用户轻松的获取自己想要的功能，看到自己能用的功能以及所处的位置等。在订餐系统中使用了TreeView控件来实现导航栏的功能。

    TreeView控件用来显示文件和目录结构以及各结构之间的层次关系，可以建立良好的分级视图，其节点容易折叠或显示，给页面带来良好的视觉效果。具体的实现过程如下：

    首先添加该控件，然后设置需要的Nodes值：    

 <asp:TreeView ID="TreeView1"  runat="server"  Font-Size="14px" ImageSet="Arrows"
                        Width="188px">
                        <ParentNodeStyle Font-Bold="False" Font-Size="24px" />
                        <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                        <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
                            VerticalPadding="0px" />
                        <Nodes>                            
                            <asp:TreeNode Text="基本信息"  Value="基本信息">
                                <asp:TreeNode Text="配置明日菜单"  Value="永和菜系" NavigateUrl="SetMenus.aspx"></asp:TreeNode>
                                <asp:TreeNode Text="批量配置菜单" Value="批量配置菜单" NavigateUrl="SetWeekMenus.aspx"></asp:TreeNode>
                                <asp:TreeNode Text="会馆菜单" Value="会馆菜单" NavigateUrl="../Order/HallMenu.aspx"></asp:TreeNode>
                                <asp:TreeNode Text="会馆订餐" Value="会馆订餐" NavigateUrl="../Order/HallOrder.aspx"></asp:TreeNode>                
                                <asp:TreeNode Text="详细菜谱" Value="详细菜谱" NavigateUrl="../cook/MatchMenu1.aspx"></asp:TreeNode>
                                <asp:TreeNode NavigateUrl="TakeFood.aspx" Text="结账管理" Value="结账管理"></asp:TreeNode>                               
                                <asp:TreeNode Text="修改密码" Value="修改密码" NavigateUrl="~/Behind/UserChangePwd.aspx"></asp:TreeNode>
                            </asp:TreeNode> 
                            <asp:TreeNode  Text="财务管理" Value="财务管理" >
                                <asp:TreeNode Text="注册管理" Value="注册管理"  NavigateUrl="register.aspx"></asp:TreeNode>
                                <asp:TreeNode Text="充值管理" Value="充值管理" NavigateUrl="RechargeManage.aspx"></asp:TreeNode>
                               <asp:TreeNode Text="挂失管理" Value="挂失管理" NavigateUrl="~/Behind/ReportLoss.aspx"></asp:TreeNode>
                                <asp:TreeNode Text="账单查询" Value="账单查询" NavigateUrl="BillManage.aspx"></asp:TreeNode>
                            </asp:TreeNode> 
                            <asp:TreeNode Text="权限设置" Value="权限设置">
                                <asp:TreeNode Text="分配权限"  Value="分配权限" NavigateUrl="~/Behind/SetAuthority.aspx"></asp:TreeNode>
                            </asp:TreeNode>                          
                            <asp:TreeNode Text="订单汇总" Value="订单汇总">
                                <asp:TreeNode NavigateUrl="OrderDetail.aspx"
                                    Text="订单明细" Value="订单明细"></asp:TreeNode>                               
                                <asp:TreeNode NavigateUrl="NotTakeOrder.aspx" Text="未取餐订单"
                                    Value="未取餐订单"></asp:TreeNode>
                                <asp:TreeNode NavigateUrl="OrderHistory.aspx" Text="历史订单"
                                    Value="历史订单"></asp:TreeNode>
                                <asp:TreeNode NavigateUrl="~/Behind/TodayOrder.aspx" Text="今日订单"
                                    Value="今日订单"></asp:TreeNode>
                                <asp:TreeNode NavigateUrl="~/Order/CookOrder.aspx" Text="会馆订单"
                                    value="会馆订单"></asp:TreeNode>
                            </asp:TreeNode>                            
                        </Nodes>
                        <RootNodeStyle Font-Size="18pt" />
                        <NodeStyle Font-Names="Verdana" Font-Size="24pt" ForeColor="Black" HorizontalPadding="30px"
                            NodeSpacing="0px" VerticalPadding="0px" Height="40px" />
                        <LeafNodeStyle Font-Size="16px" />
                    </asp:TreeView>

    效果图（部分）如下：

       

    由于此结构会应用于全部页面，所以就需要将该控件抽成模板。那么问题也就随之而来，因为该后台管理界面供多种权限的人员登陆，那么就必定要涉及到不同权限的人看到的功能是不一样的，也就是目录结构不一样。如何实现该功能呢？

    其实在TreeView中已经设置好属性了，跟我们之前用的一样，根据不同的权限进行设置节点的隐藏和显示即可，具体的代码实现如下（部分）：    

 if(!Page.IsPostBack){
                if (Session["userLevel"].ToString() == "厨师")
                {
                    //根据厨师的权限，进行显示
                    //TreeView1.Nodes.Remove(TreeView1.Nodes[0]);//移出权限设置模块
                    注意，移出第一个节点之后，原第二个节点会自动变为第一个节点，后边节点依次向前移动
                    TreeNode n = TreeView1.Nodes[0]; //获取第一个模块的根节点
                    n.ChildNodes.Remove(n.ChildNodes[3]);//移出第一个模块下的第四个节点
                    TreeView1.Nodes.Remove(TreeView1.Nodes[1]);//移出第二个模块  财务管理
                    TreeView1.Nodes.Remove(TreeView1.Nodes[1]);//移出第二个模块  权限设置
                    TreeNode n2 = TreeView1.Nodes[1];//第二个模块根节点
                    n2.ChildNodes.Remove(n2.ChildNodes[2]);//移出第三个节点
                }               
                if (Session["userLevel"].ToString() == "财务")
                {
                    TreeNode nBasic = TreeView1.Nodes[0];
                    //TreeView1.Nodes.Remove(TreeView1.Nodes[0]);//移出基本信息模块
                    nBasic.ChildNodes.Remove(nBasic.ChildNodes[0]);
                    nBasic.ChildNodes.Remove(nBasic.ChildNodes[0]);
                    nBasic.ChildNodes.Remove(nBasic.ChildNodes[0]);
                    nBasic.ChildNodes.Remove(nBasic.ChildNodes[0]);
                    nBasic.ChildNodes.Remove(nBasic.ChildNodes[0]);
                    nBasic.ChildNodes.Remove(nBasic.ChildNodes[0]);
                    TreeView1.Nodes.Remove(TreeView1.Nodes[2]);//移出权限设置模块
                    TreeNode n3 = TreeView1.Nodes[2]; //获取第三个模块的根节点
                    n3.ChildNodes.Remove(n3.ChildNodes[0]);
                    n3.ChildNodes.Remove(n3.ChildNodes[0]);
                    n3.ChildNodes.Remove(n3.ChildNodes[1]);
                }
            }

    

    虽然该功能实现了，但是还存在着缺点，就是没有通过权限的设置进行可配控制，最高权限的人可以设置让某个权限的人看到任一节点，而不是像上面那样写成固定的。其实原理是一样的，只不过实现动态可配，更能增加用户体验度。

  小结：

     只有在实践中才能真正的去综合各方面的因素去考虑问题，而不仅仅局限于我们功能的实现。功能实现其实是最简单的事情，如何做到良好的用户体验度，如何能让用户喜欢你的软件，还需要我们不断的在实践中提升自我，站在用户的角度，做到用户想要什么，我们就有什么的状态。