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>
<!--搜索结束-->
□ 效果
datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框的更多相关文章
- ASP.NET MVC 中枚举生成下拉框
最近公司在开发财务系统,在工作中遇到不少的地方需要下拉框. 但是枚举框中数据的内容又来自枚举. 枚举代码如下: public class EnumDemo { public enum Value { ...
- datagrid在MVC中的运用02-结合搜索
本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...
- JavaScript向select下拉框中加入和删除元素
JavaScript向select下拉框中加入和删除元素 1.说明 a 利用append()方法向下拉框中加入元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...
- datagrid在MVC中的运用01-基本属性并实现分页
本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...
- MVC 中的@Html.DropDownList下拉框的使用
MVC 中的下拉框 实现方式,下面为大家介绍一个我自己认为比较好用的实现方式,而二话不说直接上代码: 第一步: 后台代码 //公共的方法 //在每次需要展示下拉框的时候,需要调用一下这个方法 [数据源 ...
- ASP.NET MVC中的cshtml页面中的下拉框的使用
ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...
- 实现在easyui中的datagrid,点击某一列的列头弹出combobox下拉框
easyUI datagrid在列头加下拉框,实现对列内容的筛选. 代码: onLoadSuccess: function (data) {//Fires when data is loaded s ...
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
随机推荐
- JavaEE:JavaEE技术组成
Java平台版本: JavaSE:Java Platform Standard Edition,标准版,用来开发桌面应用系统: JavaEE:Java Plateform Enterprise Edi ...
- .NET魔法堂:工程构建基石->;MSBuild
一.前言 MSBuild是一个既熟悉又陌生的名字,Visual Studio的项目加载和构建均通过MSBuild来实现.VS中右键打开项目菜单,对应MSBuild的Build目标,对应MSBuild的 ...
- C# 词法分析器(三)正则表达式
系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 正则表达式是一种描述词素的重要表示方法.虽然正则表达 ...
- Codeforces Round 261 Div.2 E Pashmak and Graph --DAG上的DP
题意:n个点,m条边,每条边有一个权值,找一条边数最多的边权严格递增的路径,输出路径长度. 解法:先将边权从小到大排序,然后从大到小遍历,dp[u]表示从u出发能够构成的严格递增路径的最大长度. dp ...
- #import与@class的区别
转自:http://www.cnblogs.com/jqyp/archive/2012/01/13/2321707.html 1.import会包含这个类的所有信息,包括实体变量和方法,而@class ...
- ios Swift 算法
// Playground - noun: a place where people can play import Cocoa var nums = Int[]() ... { nums.appen ...
- Redux的工作流程
1.Redux 是一个专门用来管理数据业务或逻辑状态的框架,它也可以实现代码结构的规范化并提供组件之间通信的便利,而这两点,对于大型应用来说非常关键. 2.工作流程: Redux 三大原则 单一数据源 ...
- 异步编程之asyncio简单介绍
引言: python由于GIL(全局锁)的存在,不能发挥多核的优势,其性能一直饱受诟病.然而在IO密集型的网络编程里,异步处理比同步处理能提升成百上千倍的效率,弥补了python性能方面的短板. as ...
- 浅析ARM公司在物联网领域的战略布局(转)
随着ARM芯片的出货量越来越多,自信满满的ARM公司统一软硬件平台的战略和雄心壮志越来越凸显.最初ARM公司仅是出售自己的知识产权(IP核)给各大芯片公司,由于最初ARM公司处于劣势,所以给芯片厂商很 ...
- Oracle ODP.NET vs Microsoft MSDP
08年做项目时,用 VS 2005,写据库层还在用 MSDP(System.Data.OracleClient),但是当时由于要操作 XML 和二进制文件,所以又使用了 ODP.NET(Oracle. ...