datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框

本文主要来体验在搜索区域增加更多的搜索条件，主要包括：

※ 使用jQuery ui的datepicker显示时间，设置显示格式、样式。
※ 设置jQuery ui的onClose事件，使开始和结束时间形成约束，即选择开始时间为某天，结束时间的选择范围只能在该天以后，反之亦然。
※ 下拉框显示枚举值

本文只关注视图显示，不涉及后台逻辑。关于搜索条件的过滤，请参照"datagrid在MVC中的运用02"。 

  关于显示时间

□ Html

<!--搜索开始-->
   <div id="tb" style="padding:3px">
       时间从：<input type="text" name="joinStartTime" id="joinStartTime" />
       到：<input type="text" name="joinEndTime" id="joinEndTime" />
       <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a>
   </div>
   <!--搜索结束-->

□ js部分

    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>

    <script src="~/Scripts/jquery.ui.core.min.js"></script>
    <script src="~/Scripts/jquery.ui.datepicker.min.js"></script>
    <script src="~/Scripts/jquery.ui.datepicker-zh-CN.js"></script>
    <script type="text/javascript">
        $(function() {
            //限制起始时间
            fromDateToDate();
        });


        //起始日期
        function fromDateToDate() {
            $('#joinStartTime').datepicker({
                dateFormat: "yy-mm-dd",
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 2,
                onClose: function (selectedDate) {
                    $("#joinEndTime").datepicker("option", "minDate", selectedDate);
                }
            });

            $('#joinEndTime').datepicker({
                dateFormat: "yy-mm-dd",
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 2,
                onClose: function (selectedDate) {
                    $("#joinStartTime").datepicker("option", "maxDate", selectedDate);
                }
            });
        }

    </script>

注意：
datepicker在显示年份月份的时候，显示时间界面有撑开的情况。可以找到jquery.ui.datepicker.css文件，修改其中的i-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 40%;}属性。

效果一：选择开始时间为某天，结束时间的的选择范围在该天以后

效果二：选择结束时间为某天，开始时间的选择范围在该天以前

  视图下拉框显示枚举值

□ 创建枚举

    public enum StatusEnum
    {
        Enabled = 0,
        Disabled = 1
    }

□ 考虑到下拉框需要显示中文，我们可以在枚举成员字段打上自定义系统属性，然后利用反射来读取自定义系统属性类的某属性。自定义系统属性如下：

using System;
namespace DataGridInMvc.Helper
{
    /// <summary>
    /// 打到Enum字段上的自定义系统属性
    /// </summary>
    public class EnumDisplayNameAttribute : Attribute
    {
        private string _displayName;
        public EnumDisplayNameAttribute(string displayName)
        {
            _displayName = displayName;
        }

        public string DisplayName
        {
            get
            {
                return _displayName;
            }
        }
    }
}

□ 把自定义系统属性打到枚举成员上

using DataGridInMvc.Helper;
namespace DataGridInMvc.Models
{
    public enum StatusEnum
    {
        [EnumDisplayName("启用")]
        Enabled = 0,
        [EnumDisplayName("禁用")]
        Disabled = 1
    }
}

□ 自定义枚举扩展类

主要完成以下使命：
1、前台Html.DropDownList需要List<SelectListItem>源，所以自定义枚举扩展类需要方法返回List<SelectListItem>。
2、把枚举中的自定义系统属性反射出来作为 SelectListItem的Text属性值。

using System; 
using System.Collections.Generic; 
using System.Reflection; 
using System.Web.Mvc;

namespace DataGridInMvc.Helper 
{ 
    /// <summary> 
    /// 把枚举转换成SelectListItem 
    /// </summary> 
    public class EnumExt 
    { 
         /// <summary> 
        /// 获取枚举成员的自定义Attribute的一个属性值 
        /// </summary> 
        /// <param name="e">枚举成员</param> 
        /// <returns></returns> 
        public static string GetEnumDescription(object e) 
        { 
            //获取枚举成员的Type对象 
            Type t = e.GetType();

            //获取Type对象的所有字段 
            FieldInfo[] ms = t.GetFields();

            //遍历所有字段 
            foreach (FieldInfo f in ms) 
            { 
                //如果当前所遍历字段的名称和枚举成员名称不一致，就跳出本次循环 
                if (f.Name != e.ToString()) 
                { 
                    continue; 
                }

                //判断当前所遍历字段中是否包含自定义系统属性 
                if (f.IsDefined(typeof(EnumDisplayNameAttribute), true)) 
                { 
                    //从当前所遍历字段中获取自定义系统属性，并根据自定义系统属性拿到它的属性值DisplayName，并返回 
                    if (f.GetCustomAttributes(typeof(EnumDisplayNameAttribute), true) != null) 
                    { 
                        return (f.GetCustomAttributes(typeof(EnumDisplayNameAttribute), true)[0] as EnumDisplayNameAttribute).DisplayName; 
                    } 
                    
                } 
            } 
            //如果以上失败就返回枚举成员的名称，比如Disabled 
            return e.ToString(); 
        }

        //List<SelectListItem>正是前台视图所需要的集合 
        public static List<SelectListItem> GetSelectList(Type enumType) 
        { 
            List<SelectListItem> selectList = new List<SelectListItem>(); 
            selectList.Add(new SelectListItem {Text = "--请选择--", Value = ""}); 
            //通过Enum.GetValues(enumType)获取到的是Dictionary<int, value>键值集合 
            //key=0,value=Enabled类似这样的键值对 
            //(int)e 实际上拿到的就是key 
            foreach (object e in Enum.GetValues(enumType)) 
            { 
                selectList.Add(new SelectListItem {Text = GetEnumDescription(e), Value = ((int) e).ToString()}); 
            } 
            return selectList; 
        }

    } 
}

 

□ 控制器

        public ActionResult Index()
        {
            ViewData["s"] = EnumExt.GetSelectList(typeof (StatusEnum));
            return View();
        }

□ 视图

    <!--搜索开始-->
    <div id="tb" style="padding:3px">
        时间从：<input type="text" name="joinStartTime" id="joinStartTime" />
        到：<input type="text" name="joinEndTime" id="joinEndTime" />
        状态：@Html.DropDownList("ss",(List<SelectListItem>)ViewData["s"]);
        <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a>
    </div>
    <!--搜索结束-->

□ 效果