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> 

    <!--搜索结束--> 

□ 效果