EF+MVC+Bootstrap 项目实践 Day8

继续完成首页

一、上方导航栏

把bootstrap的几个下拉按钮效果都试了一下，感觉还可以。

<div class="btn-group ">
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            @CookieHelper.UserName<span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">修改密码</a></li>
            <li><a href="#">退出系统</a></li>
        </ul>
    </div>

二、左侧菜单栏

源码效果：

具体菜单是循环取出的，可折叠。

1、复制一些固定的内容先把大体效果做出来

 

左侧菜单是固定的，不是按数据生成的。左边右边分别是float，可以随窗口大小变化。找不到bootstrap的布局调用方式，怎么没有像easyui那样，有个整体布局的写法

2、折叠效果

一开始用collapse，配合button感觉虽然比较美观，但应该还是用bootstrap自带的Accordion example示例这种折叠效果。

直接复制过来改一改

本想动态展现左侧菜单数据的，一时搞不懂，只好跳过先学其它的。

三、客户管理

先学这个页面是因为它有我想学的三个地方：查询、分页、表单，这三个都是非常关键的。先把基本框架搭起来

1、Enum对应

public enum EnumAgeGroup
        {
            [EnumTitle("无", IsDisplay = false)] None = 0,
            [EnumTitle("30以下")] Below30 = 1,
            [EnumTitle("31-35")] From31To35 = 2,
            [EnumTitle("36-40")] From36To40 = 3,
            [EnumTitle("41-45")] From41To45 = 4,
            [EnumTitle("46-50")] From46To50 = 5,
            [EnumTitle("50以上")] Above50 = 6
        }
        /// <summary>
        /// 客户类型
        /// </summary>
        public enum EnumCategory
        {
            [EnumTitle("无", IsDisplay = false)] None = 0,
            [EnumTitle("单身")] Single = 1,
            [EnumTitle("已婚无小孩")] Married = 2,
            [EnumTitle("已婚有小孩")] MarriedButChild = 3,
            [EnumTitle("三代同堂")] ExtendedFamily = 4,
            [EnumTitle("其他结构")] Others = 5
        }

参照源码，使用一些Enum进行对应，另有EnumHelp公共类进行封装

2、相应文件创建

@Html.ActionLink("客户管理", "Index", new {Area = "Crm", Controller = "Customer"})

一句跳转页面折腾了半小时。。。

3、菜单导航

<div class="container-fluid">
            <div class="span12" id="navigation">
                <h4 class="page-title">
                    <span>标题</span>　<small>介绍</small>
                </h4>
                <ul class="breadcrumb">
                    <li>
                        <i class="icon-home"></i>
                        <span>首页</span>
                        <i class="icon-angle-right"></i>
                    </li>
                    <li>
                        <span>菜单组</span>
                        <i class="icon-angle-right"></i>
                    </li>
                    <li><span>菜单</span></li>
                </ul>
            </div>
            @RenderBody()
        </div>

源码中菜单导航复制过来就是得到默认的示例值，不知在哪修改成相应的具体点击菜单？

 ====================

通过关键字查找，原来有个js，处理左侧菜单的点击，把相应的路径取出来显示

另也封装了全选、删除、主题色