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属性值。
展开
□ 控制器
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>
<!--搜索结束-->
□ 效果
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
