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> 

 <!--搜索结束--> 



□ 效果


分享给朋友:
您可能感兴趣的文章:
随机阅读: