本文主要来体验在搜索区域增加更多的搜索条件，主要包括：
※ 使用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>
<!--搜索结束-->
□ 效果
